@simplybusiness/mobius 8.0.1 → 8.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.
@@ -0,0 +1,4929 @@
1
+ "use strict";
2
+ var __create = Object.create;
3
+ var __defProp = Object.defineProperty;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __getProtoOf = Object.getPrototypeOf;
7
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __typeError = (msg) => {
9
+ throw TypeError(msg);
10
+ };
11
+ var __export = (target, all) => {
12
+ for (var name in all)
13
+ __defProp(target, name, { get: all[name], enumerable: true });
14
+ };
15
+ var __copyProps = (to, from, except, desc) => {
16
+ if (from && typeof from === "object" || typeof from === "function") {
17
+ for (let key of __getOwnPropNames(from))
18
+ if (!__hasOwnProp.call(to, key) && key !== except)
19
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
20
+ }
21
+ return to;
22
+ };
23
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
24
+ // If the importer is in node compatibility mode or this is not an ESM
25
+ // file that has been converted to a CommonJS file using a Babel-
26
+ // compatible transform (i.e. "__esModule" has not been set), then set
27
+ // "default" to the CommonJS "module.exports" for node compatibility.
28
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
29
+ mod
30
+ ));
31
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
32
+ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
33
+ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
34
+ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
35
+ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
36
+
37
+ // index.tsx
38
+ var index_exports = {};
39
+ __export(index_exports, {
40
+ Accordion: () => Accordion,
41
+ AccordionList: () => AccordionList,
42
+ AddressLookup: () => AddressLookup,
43
+ Alert: () => Alert,
44
+ Box: () => Box,
45
+ BreadcrumbItem: () => BreadcrumbItem,
46
+ Breadcrumbs: () => Breadcrumbs,
47
+ Button: () => Button,
48
+ Checkbox: () => Checkbox,
49
+ CheckboxGroup: () => CheckboxGroup,
50
+ Combobox: () => Combobox,
51
+ Container: () => Container,
52
+ DEFAULT_BREAKPOINTS: () => DEFAULT_BREAKPOINTS,
53
+ DateField: () => DateField,
54
+ Divider: () => Divider,
55
+ Drawer: () => Drawer2,
56
+ DropdownMenu: () => DropdownMenu2,
57
+ ErrorMessage: () => ErrorMessage,
58
+ ExpandableText: () => ExpandableText,
59
+ Fieldset: () => Fieldset,
60
+ Flex: () => Flex,
61
+ Grid: () => Grid2,
62
+ Icon: () => Icon,
63
+ Image: () => Image,
64
+ Label: () => Label,
65
+ Link: () => Link,
66
+ LinkButton: () => LinkButton,
67
+ List: () => List,
68
+ ListItem: () => ListItem,
69
+ LoadingIndicator: () => LoadingIndicator,
70
+ Logo: () => Logo,
71
+ LoqateAddressLookupService: () => LoqateAddressLookupService,
72
+ MIN_MAX_ERROR: () => MIN_MAX_ERROR,
73
+ MaskedField: () => MaskedField,
74
+ Modal: () => Modal2,
75
+ NumberField: () => NumberField,
76
+ Option: () => Option2,
77
+ PasswordField: () => PasswordField,
78
+ Popover: () => Popover,
79
+ Progress: () => Progress,
80
+ Radio: () => Radio,
81
+ RadioGroup: () => RadioGroup,
82
+ SVG: () => SVG,
83
+ Segment: () => Segment,
84
+ SegmentGroup: () => SegmentGroup,
85
+ Select: () => Select,
86
+ Slider: () => Slider,
87
+ Stack: () => Stack,
88
+ Switch: () => Switch,
89
+ Table: () => Table2,
90
+ Text: () => Text,
91
+ TextArea: () => TextArea,
92
+ TextAreaInput: () => TextAreaInput,
93
+ TextField: () => TextField,
94
+ TextOrHTML: () => TextOrHTML,
95
+ Title: () => Title,
96
+ Toaster: () => Toaster,
97
+ Trust: () => Trust,
98
+ VisuallyHidden: () => VisuallyHidden,
99
+ convertToDateFormat: () => convertToDateFormat,
100
+ isValidDate: () => isValidDate,
101
+ toast: () => toast,
102
+ useBodyScrollLock: () => useBodyScrollLock,
103
+ useBreakpoint: () => useBreakpoint,
104
+ useButton: () => useButton,
105
+ useDebouncedValue: () => useDebouncedValue,
106
+ useDialog: () => useDialog,
107
+ useDialogPolyfill: () => useDialogPolyfill,
108
+ useDrawer: () => useDrawer,
109
+ useLabel: () => useLabel,
110
+ useModal: () => useModal,
111
+ useOnClickOutside: () => useOnClickOutside,
112
+ useOnUnmount: () => useOnUnmount,
113
+ usePrefersReducedMotion: () => usePrefersReducedMotion,
114
+ useRenderCount: () => useRenderCount,
115
+ useTextField: () => useTextField,
116
+ useValidationClasses: () => useValidationClasses,
117
+ useWindowEvent: () => useWindowEvent
118
+ });
119
+ module.exports = __toCommonJS(index_exports);
120
+
121
+ // src/components/Accordion/Accordion.tsx
122
+ var import_dedupe4 = __toESM(require("classnames/dedupe"));
123
+ var import_react14 = require("react");
124
+
125
+ // src/hooks/useBodyScrollLock/useBodyScrollLock.ts
126
+ var import_react = require("react");
127
+ function useBodyScrollLock({
128
+ enabled = true
129
+ } = {}) {
130
+ function disableScrollLock() {
131
+ document.body.style.removeProperty("overflow");
132
+ document.body.style.removeProperty("scrollbar-gutter");
133
+ document.documentElement.style.removeProperty("scrollbar-gutter");
134
+ }
135
+ function enableScrollLock() {
136
+ document.body.style.overflow = "hidden";
137
+ document.body.style.scrollbarGutter = "stable";
138
+ document.documentElement.style.scrollbarGutter = "stable";
139
+ }
140
+ (0, import_react.useEffect)(() => {
141
+ if (enabled) {
142
+ enableScrollLock();
143
+ } else {
144
+ disableScrollLock();
145
+ }
146
+ return () => {
147
+ disableScrollLock();
148
+ };
149
+ }, [enabled]);
150
+ }
151
+
152
+ // src/hooks/useBreakpoint/useBreakpoint.tsx
153
+ var import_lodash = __toESM(require("lodash.debounce"));
154
+ var import_react2 = require("react");
155
+ var DEFAULT_BREAKPOINTS = [
156
+ { size: "xs", value: 320 },
157
+ { size: "sm", value: 480 },
158
+ { size: "md", value: 670 },
159
+ { size: "lg", value: 960 },
160
+ { size: "xl", value: 1200 },
161
+ { size: "xxl", value: 1320 }
162
+ ];
163
+ var getBreakpoint = (breakpoints, windowWidth) => {
164
+ const closest = breakpoints.findIndex(
165
+ (breakpoint) => breakpoint.value >= windowWidth + 1
166
+ );
167
+ const smallest = breakpoints[0];
168
+ const largest = breakpoints[breakpoints.length - 1];
169
+ const match = breakpoints[closest - 1];
170
+ if (closest === 0) return smallest;
171
+ if (closest === -1) return largest;
172
+ return match;
173
+ };
174
+ var useBreakpoint = (customBreakpoints) => {
175
+ const window2 = globalThis?.window || void 0;
176
+ const isClientSide = typeof window2 !== "undefined";
177
+ const breakpoints = customBreakpoints || DEFAULT_BREAKPOINTS;
178
+ const defaultBreakpoint = breakpoints[0];
179
+ const [windowWidth, setWindowWidth] = (0, import_react2.useState)(
180
+ isClientSide ? window2.innerWidth : defaultBreakpoint.value
181
+ );
182
+ const [currentBreakpoint, setCurrentBreakpoint] = (0, import_react2.useState)(defaultBreakpoint);
183
+ const handleResize = () => {
184
+ setWindowWidth(window2.innerWidth);
185
+ };
186
+ (0, import_react2.useEffect)(() => {
187
+ if (!windowWidth || breakpoints.length === 0) {
188
+ setCurrentBreakpoint(breakpoints[0]);
189
+ return;
190
+ }
191
+ const newBreakpoint = getBreakpoint(breakpoints, windowWidth);
192
+ if (currentBreakpoint.size === newBreakpoint?.size) return;
193
+ setCurrentBreakpoint(newBreakpoint);
194
+ }, [currentBreakpoint, windowWidth, breakpoints]);
195
+ (0, import_react2.useEffect)(() => {
196
+ window2.addEventListener("resize", (0, import_lodash.default)(handleResize, 200), {
197
+ passive: true
198
+ });
199
+ return () => window2.removeEventListener("resize", handleResize);
200
+ }, [window2]);
201
+ const up = (0, import_react2.useCallback)(
202
+ (size) => {
203
+ const sizeIndex = breakpoints.findIndex((item) => item.size === size);
204
+ if (sizeIndex === -1) {
205
+ return false;
206
+ }
207
+ const currentIndex = breakpoints.findIndex(
208
+ (item) => item.size === currentBreakpoint.size
209
+ );
210
+ return currentIndex >= sizeIndex;
211
+ },
212
+ [currentBreakpoint, breakpoints]
213
+ );
214
+ const down = (0, import_react2.useCallback)(
215
+ (size) => {
216
+ const sizeIndex = breakpoints.findIndex((item) => item.size === size);
217
+ if (sizeIndex === -1) {
218
+ return true;
219
+ }
220
+ const currentIndex = breakpoints.findIndex(
221
+ (item) => item.size === currentBreakpoint.size
222
+ );
223
+ return currentIndex <= sizeIndex;
224
+ },
225
+ [currentBreakpoint, breakpoints]
226
+ );
227
+ return {
228
+ breakpoint: isClientSide ? currentBreakpoint : defaultBreakpoint,
229
+ up,
230
+ down
231
+ };
232
+ };
233
+
234
+ // src/hooks/useButton/useButton.tsx
235
+ var import_react3 = require("react");
236
+ function useButton({
237
+ elementType = "button",
238
+ type = "button",
239
+ isDisabled = false,
240
+ href,
241
+ target,
242
+ rel,
243
+ role,
244
+ name,
245
+ value,
246
+ onClick,
247
+ onPress
248
+ }) {
249
+ const realOnClick = (0, import_react3.useCallback)(
250
+ (event) => {
251
+ if (isDisabled) {
252
+ return;
253
+ }
254
+ onClick?.(event);
255
+ onPress?.(event);
256
+ },
257
+ [isDisabled, onClick, onPress]
258
+ );
259
+ function getRole() {
260
+ if (role) {
261
+ return role;
262
+ }
263
+ if (elementType === "a") {
264
+ return void 0;
265
+ }
266
+ return "button";
267
+ }
268
+ const extraProps = elementType === "button" ? { type } : {
269
+ role: getRole()
270
+ };
271
+ return {
272
+ buttonProps: {
273
+ href: elementType === "a" ? href : void 0,
274
+ target: elementType === "a" ? target : void 0,
275
+ rel: elementType === "a" ? rel : void 0,
276
+ tabIndex: isDisabled ? -1 : 0,
277
+ disabled: isDisabled || void 0,
278
+ "aria-disabled": isDisabled || void 0,
279
+ name: elementType === "input" || elementType === "button" ? name : void 0,
280
+ value: elementType === "input" || elementType === "button" ? value : void 0,
281
+ ...extraProps,
282
+ onClick: realOnClick
283
+ }
284
+ };
285
+ }
286
+
287
+ // src/hooks/useDebouncedValue/useDebouncedValue.tsx
288
+ var import_react4 = require("react");
289
+ function useDebouncedValue(value, delay = 0) {
290
+ const [debouncedValue, setDebouncedValue] = (0, import_react4.useState)(value);
291
+ (0, import_react4.useEffect)(() => {
292
+ let timeout = null;
293
+ if (delay === 0) {
294
+ setDebouncedValue(value);
295
+ } else {
296
+ timeout = setTimeout(() => {
297
+ setDebouncedValue(value);
298
+ }, delay);
299
+ }
300
+ return () => {
301
+ if (timeout) {
302
+ clearTimeout(timeout);
303
+ timeout = null;
304
+ }
305
+ };
306
+ }, [value, delay]);
307
+ return debouncedValue;
308
+ }
309
+
310
+ // src/hooks/useDialog/useDialog.ts
311
+ var import_react6 = require("react");
312
+
313
+ // src/utils/filterUndefinedProps.ts
314
+ var filterUndefinedProps = (props) => {
315
+ const filteredProps = {};
316
+ Object.keys(props).forEach((key) => {
317
+ if (props[key] !== void 0) {
318
+ filteredProps[key] = props[key];
319
+ }
320
+ });
321
+ return filteredProps;
322
+ };
323
+
324
+ // src/utils/getSpacingValue.ts
325
+ var getSpacingValue = (padding) => {
326
+ if (typeof padding === "string") {
327
+ return `var(--size-${padding})`;
328
+ }
329
+ if (typeof padding === "number") {
330
+ return `${padding}px`;
331
+ }
332
+ return void 0;
333
+ };
334
+
335
+ // src/utils/mergeRefs.ts
336
+ function mergeRefs(refs) {
337
+ return (value) => {
338
+ refs.forEach((ref) => {
339
+ if (typeof ref === "function") {
340
+ ref(value);
341
+ } else if (ref != null) {
342
+ ref.current = value;
343
+ }
344
+ });
345
+ };
346
+ }
347
+
348
+ // src/utils/polyfill-tests.ts
349
+ var supportsDialog = () => typeof HTMLDialogElement === "function";
350
+
351
+ // src/utils/sizeClasses.ts
352
+ var sizeClasses = (size) => {
353
+ if (!size) {
354
+ return {};
355
+ }
356
+ return {
357
+ "--is-xxs": size === "xxs",
358
+ "--is-xs": size === "xs",
359
+ "--is-sm": size === "sm",
360
+ "--is-md": size === "md",
361
+ "--is-lg": size === "lg",
362
+ "--is-xl": size === "xl",
363
+ "--is-xxl": size === "xxl"
364
+ };
365
+ };
366
+
367
+ // src/utils/spaceDelimitedList.ts
368
+ function spaceDelimitedList(list) {
369
+ return list.filter(Boolean).join(" ") || void 0;
370
+ }
371
+
372
+ // src/hooks/useDialogPolyfill/useDialogPolyfill.ts
373
+ var import_react5 = require("react");
374
+ var useDialogPolyfill = () => {
375
+ const [hasDialogSupport, setHasDialogSupport] = (0, import_react5.useState)(false);
376
+ const hasAlreadyLoaded = (0, import_react5.useRef)(false);
377
+ (0, import_react5.useEffect)(() => {
378
+ setHasDialogSupport(supportsDialog());
379
+ }, []);
380
+ const polyfillDialog = async (ref) => {
381
+ if (!hasAlreadyLoaded.current && !hasDialogSupport && typeof window !== "undefined" && ref.current !== null) {
382
+ const { default: dialogPolyfill } = await import("dialog-polyfill");
383
+ hasAlreadyLoaded.current = true;
384
+ try {
385
+ if (ref.current) {
386
+ dialogPolyfill.registerDialog(ref.current);
387
+ }
388
+ } catch (error3) {
389
+ console.error("Failed to load dialog-polyfill", error3);
390
+ }
391
+ }
392
+ };
393
+ return {
394
+ polyfillDialog
395
+ };
396
+ };
397
+
398
+ // src/hooks/useDialog/useDialog.ts
399
+ var TRANSITION_CLASS_NAME = "--transition";
400
+ var FALLBACK_TRANSITION_DURATION = 0;
401
+ var useDialog = (props) => {
402
+ const { ref, isOpen, transition, onOpen, onClose } = props;
403
+ const [hasDialogSupport, setHasDialogSupport] = (0, import_react6.useState)(false);
404
+ const shouldTransition = hasDialogSupport && transition.isEnabled;
405
+ const { polyfillDialog } = useDialogPolyfill();
406
+ (0, import_react6.useEffect)(() => {
407
+ setHasDialogSupport(supportsDialog());
408
+ }, []);
409
+ const TRANSITION_DURATION_IN_MS = ref.current && Number(
410
+ getComputedStyle(ref.current).getPropertyValue(transition.CSSVariable).replace("ms", "")
411
+ ) || FALLBACK_TRANSITION_DURATION;
412
+ useBodyScrollLock({ enabled: isOpen });
413
+ const open = (0, import_react6.useCallback)(() => {
414
+ ref.current?.showModal();
415
+ onOpen?.();
416
+ }, [onOpen, ref]);
417
+ const close = (0, import_react6.useCallback)(() => {
418
+ ref.current?.close();
419
+ onClose?.();
420
+ }, [onClose, ref]);
421
+ const handleClose = (0, import_react6.useCallback)(
422
+ (event) => {
423
+ if (event) {
424
+ event.preventDefault();
425
+ event.stopPropagation();
426
+ }
427
+ if (shouldTransition) {
428
+ ref.current?.classList.remove(TRANSITION_CLASS_NAME);
429
+ setTimeout(() => close(), TRANSITION_DURATION_IN_MS);
430
+ } else {
431
+ close();
432
+ }
433
+ },
434
+ [TRANSITION_DURATION_IN_MS, close, ref, shouldTransition]
435
+ );
436
+ (0, import_react6.useEffect)(() => {
437
+ async function toggleDialog() {
438
+ if (isOpen && !ref.current?.open) {
439
+ await polyfillDialog(ref);
440
+ open();
441
+ setTimeout(() => {
442
+ ref.current?.classList.add(TRANSITION_CLASS_NAME);
443
+ }, 0);
444
+ } else if (!isOpen && ref.current?.open) {
445
+ handleClose();
446
+ }
447
+ }
448
+ void toggleDialog();
449
+ }, [handleClose, isOpen, open, ref, polyfillDialog]);
450
+ return {
451
+ open,
452
+ close: handleClose
453
+ };
454
+ };
455
+
456
+ // src/hooks/useLabel/useLabel.tsx
457
+ var import_react7 = require("react");
458
+ function useLabel({
459
+ id: providedId,
460
+ label,
461
+ "aria-label": ariaLabel,
462
+ "aria-labelledby": ariaLabelledby,
463
+ labelElementType = "label"
464
+ }) {
465
+ let labelProps = {};
466
+ let fieldProps = {};
467
+ const hasWarnedAboutMissingLabels = (0, import_react7.useRef)(false);
468
+ const fallbackId = (0, import_react7.useId)();
469
+ const id = providedId || fallbackId;
470
+ const labelId = (0, import_react7.useId)();
471
+ if (label) {
472
+ ariaLabelledby = ariaLabelledby ? `${labelId} ${ariaLabelledby}` : labelId;
473
+ labelProps = {
474
+ id: labelId,
475
+ htmlFor: labelElementType === "label" ? id : void 0
476
+ };
477
+ } else if (!ariaLabelledby && !ariaLabel && !hasWarnedAboutMissingLabels.current) {
478
+ hasWarnedAboutMissingLabels.current = true;
479
+ console.warn(
480
+ "If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility"
481
+ );
482
+ }
483
+ fieldProps = {
484
+ id,
485
+ "aria-label": ariaLabel,
486
+ "aria-labelledby": ariaLabelledby
487
+ };
488
+ return {
489
+ labelProps,
490
+ fieldProps
491
+ };
492
+ }
493
+
494
+ // src/hooks/useOnClickOutside/useOnClickOutside.tsx
495
+ var import_react8 = require("react");
496
+ var useOnClickOutside = (ref, handler) => {
497
+ const stableHandler = (0, import_react8.useEffectEvent)(handler);
498
+ (0, import_react8.useEffect)(() => {
499
+ const listener = (event) => {
500
+ if (!ref.current || ref.current.contains(event.target)) {
501
+ return;
502
+ }
503
+ event.preventDefault();
504
+ event.stopPropagation();
505
+ stableHandler(event);
506
+ };
507
+ const handleEscapeKeyPress = (event) => {
508
+ if (event.key === "Escape") {
509
+ event.preventDefault();
510
+ event.stopPropagation();
511
+ stableHandler(event);
512
+ }
513
+ };
514
+ document.addEventListener("mousedown", listener);
515
+ document.addEventListener("touchstart", listener);
516
+ document.addEventListener("keydown", handleEscapeKeyPress);
517
+ return () => {
518
+ document.removeEventListener("mousedown", listener);
519
+ document.removeEventListener("touchstart", listener);
520
+ document.removeEventListener("keydown", handleEscapeKeyPress);
521
+ };
522
+ }, [ref]);
523
+ };
524
+
525
+ // src/hooks/useOnUnmount/useOnUnmount.tsx
526
+ var import_react9 = require("react");
527
+ function useOnUnmount(callback) {
528
+ const stableCallback = (0, import_react9.useEffectEvent)(callback);
529
+ (0, import_react9.useEffect)(() => () => stableCallback(), []);
530
+ }
531
+
532
+ // src/hooks/usePrefersReducedMotion/usePrefersReducedMotion.tsx
533
+ var import_react10 = require("react");
534
+ function usePrefersReducedMotion() {
535
+ const [prefersReducedMotion, setPrefersReducedMotion] = (0, import_react10.useState)(false);
536
+ (0, import_react10.useEffect)(() => {
537
+ const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
538
+ setPrefersReducedMotion(mediaQuery.matches);
539
+ const listener = (event) => {
540
+ setPrefersReducedMotion(event.matches);
541
+ };
542
+ mediaQuery.addEventListener("change", listener);
543
+ return () => {
544
+ mediaQuery.removeEventListener("change", listener);
545
+ };
546
+ }, []);
547
+ return prefersReducedMotion;
548
+ }
549
+
550
+ // src/hooks/useRenderCount/useRenderCount.ts
551
+ var import_react11 = require("react");
552
+ function useRenderCount() {
553
+ const count = (0, import_react11.useRef)(1);
554
+ (0, import_react11.useEffect)(() => {
555
+ count.current += 1;
556
+ });
557
+ return count.current;
558
+ }
559
+
560
+ // src/hooks/useTextField/useTextField.tsx
561
+ var import_react12 = require("react");
562
+ function useTextField(props) {
563
+ const {
564
+ isDisabled = false,
565
+ isReadOnly = false,
566
+ isRequired = false,
567
+ inputElementType = "input"
568
+ } = props;
569
+ const { labelProps, fieldProps } = useLabel(props);
570
+ const descriptionId = (0, import_react12.useId)();
571
+ const descriptionProps = { id: descriptionId };
572
+ const errorMessageId = (0, import_react12.useId)();
573
+ const errorMessageProps = { id: errorMessageId };
574
+ const ariaDescribedBy = spaceDelimitedList([
575
+ props.description && descriptionId,
576
+ props.errorMessage && errorMessageId,
577
+ props["aria-describedby"]
578
+ ]);
579
+ return {
580
+ descriptionProps,
581
+ errorMessageProps,
582
+ labelProps,
583
+ inputProps: {
584
+ defaultValue: props.defaultValue,
585
+ value: props.value,
586
+ onChange: props.onChange,
587
+ disabled: isDisabled,
588
+ readOnly: isReadOnly,
589
+ required: isRequired,
590
+ "aria-required": isRequired === true ? true : void 0,
591
+ "aria-invalid": props.isInvalid,
592
+ "aria-describedby": ariaDescribedBy,
593
+ "aria-errormessage": props["aria-errormessage"],
594
+ role: props.role,
595
+ type: inputElementType === "input" ? props.type : void 0,
596
+ pattern: inputElementType === "input" ? props.pattern : void 0,
597
+ autoComplete: props.autoComplete,
598
+ maxLength: props.maxLength,
599
+ minLength: props.minLength,
600
+ name: props.name,
601
+ placeholder: props.placeholder,
602
+ inputMode: props.inputMode,
603
+ // Clipboard events
604
+ onCopy: props.onCopy,
605
+ onCut: props.onCut,
606
+ onPaste: props.onPaste,
607
+ // Composition events
608
+ onCompositionEnd: props.onCompositionEnd,
609
+ onCompositionStart: props.onCompositionStart,
610
+ onCompositionUpdate: props.onCompositionUpdate,
611
+ // Selection events
612
+ onSelect: props.onSelect,
613
+ // Input events
614
+ onBeforeInput: props.onBeforeInput,
615
+ onInput: props.onInput,
616
+ // Focus events
617
+ onFocus: props.onFocus,
618
+ onBlur: props.onBlur,
619
+ ...fieldProps
620
+ }
621
+ };
622
+ }
623
+
624
+ // src/hooks/useValidationClasses/useValidationClasses.ts
625
+ var useValidationClasses = (props) => {
626
+ const { isInvalid } = props;
627
+ if (isInvalid) {
628
+ return "--is-invalid";
629
+ }
630
+ if (isInvalid === false) {
631
+ return "--is-valid";
632
+ }
633
+ return "";
634
+ };
635
+
636
+ // src/hooks/useWindowEvent/useWindowEvent.tsx
637
+ var import_react13 = require("react");
638
+ function normaliseOptions(options, otherOptions = {}) {
639
+ if (typeof options === "undefined") {
640
+ return otherOptions;
641
+ }
642
+ if (typeof options === "boolean") {
643
+ return { capture: options, ...otherOptions };
644
+ }
645
+ return { ...options, ...otherOptions };
646
+ }
647
+ function useWindowEvent(type, listener, options) {
648
+ const stableListener = (0, import_react13.useEffectEvent)(listener);
649
+ (0, import_react13.useEffect)(() => {
650
+ const controller = new AbortController();
651
+ const { signal } = controller;
652
+ const normalisedOptions = normaliseOptions(options, { signal });
653
+ window.addEventListener(type, stableListener, normalisedOptions);
654
+ return () => {
655
+ controller.abort();
656
+ window.removeEventListener(type, stableListener, normalisedOptions);
657
+ };
658
+ }, [type, options]);
659
+ }
660
+
661
+ // src/components/Accordion/AccordionLink.tsx
662
+ var import_dedupe3 = __toESM(require("classnames/dedupe"));
663
+
664
+ // src/components/Flex/Flex.tsx
665
+ var import_dedupe = __toESM(require("classnames/dedupe"));
666
+
667
+ // src/components/Flex/propUtils.ts
668
+ var buildFlexStyles = (props) => {
669
+ const {
670
+ flexDirection,
671
+ flexWrap,
672
+ flexGrow,
673
+ flex,
674
+ justifyContent,
675
+ alignItems,
676
+ alignContent,
677
+ gap,
678
+ rowGap,
679
+ columnGap
680
+ } = props;
681
+ const styleProps = {
682
+ flexDirection,
683
+ flexWrap,
684
+ flexGrow,
685
+ flex,
686
+ justifyContent,
687
+ alignItems,
688
+ alignContent,
689
+ gap: getSpacingValue(gap),
690
+ columnGap: getSpacingValue(columnGap),
691
+ rowGap: getSpacingValue(rowGap)
692
+ };
693
+ return filterUndefinedProps(styleProps);
694
+ };
695
+ var splitProps = (props) => {
696
+ const {
697
+ flexDirection,
698
+ flexWrap,
699
+ flexGrow,
700
+ flex,
701
+ justifyContent,
702
+ alignItems,
703
+ alignContent,
704
+ gap,
705
+ rowGap,
706
+ columnGap,
707
+ ...otherProps
708
+ } = props;
709
+ return [
710
+ {
711
+ flexDirection,
712
+ flexWrap,
713
+ flexGrow,
714
+ flex,
715
+ justifyContent,
716
+ alignItems,
717
+ alignContent,
718
+ gap,
719
+ rowGap,
720
+ columnGap
721
+ },
722
+ otherProps
723
+ ];
724
+ };
725
+
726
+ // src/components/Flex/Flex.tsx
727
+ var import_jsx_runtime = require("react/jsx-runtime");
728
+ var Flex = ({ ref, ...props }) => {
729
+ const {
730
+ elementType: Element = "div",
731
+ style,
732
+ className,
733
+ ...otherProps
734
+ } = props;
735
+ const classes = (0, import_dedupe.default)("mobius", "mobius-flex", className);
736
+ const [styleProps, restProps] = splitProps(otherProps);
737
+ const flexStyles = buildFlexStyles(styleProps);
738
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
739
+ Element,
740
+ {
741
+ ref,
742
+ style: {
743
+ ...flexStyles,
744
+ ...style
745
+ },
746
+ className: classes,
747
+ ...restProps
748
+ }
749
+ );
750
+ };
751
+ Flex.displayName = "Flex";
752
+
753
+ // src/components/Icon/Icon.tsx
754
+ var import_dedupe2 = __toESM(require("classnames/dedupe"));
755
+ var import_jsx_runtime2 = require("react/jsx-runtime");
756
+ var ICON_PREFIX = "mobius-icon";
757
+ var capitaliseFirstLetter = (str) => str.charAt(0).toUpperCase() + str.slice(1);
758
+ function Icon({
759
+ ref,
760
+ icon,
761
+ className,
762
+ size = "xs",
763
+ color,
764
+ fixedWidth,
765
+ spin,
766
+ spinReverse,
767
+ title,
768
+ ...otherProps
769
+ }) {
770
+ if (!icon) {
771
+ throw new Error("Must specify icon object");
772
+ }
773
+ const classes = (0, import_dedupe2.default)(
774
+ "mobius",
775
+ "mobius-icon",
776
+ `svg-inline--${ICON_PREFIX}`,
777
+ `--size-${size}`,
778
+ className,
779
+ {
780
+ [`${ICON_PREFIX}-fw`]: fixedWidth,
781
+ [`${ICON_PREFIX}-spin`]: spin || spinReverse,
782
+ [`${ICON_PREFIX}-spin-reverse`]: spinReverse
783
+ }
784
+ );
785
+ const { iconName, width, height, svgPathData } = icon;
786
+ const formattedIconName = iconName.split("-").join(" ");
787
+ const defaultTitle = `${capitaliseFirstLetter(formattedIconName)} icon`;
788
+ const titleText = title || defaultTitle;
789
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
790
+ "svg",
791
+ {
792
+ ref,
793
+ focusable: "false",
794
+ "data-icon": iconName,
795
+ className: classes,
796
+ role: "img",
797
+ xmlns: "http://www.w3.org/2000/svg",
798
+ viewBox: `0 0 ${width} ${height}`,
799
+ style: { color },
800
+ ...otherProps,
801
+ children: [
802
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("title", { children: titleText }),
803
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { fill: "currentColor", d: svgPathData })
804
+ ]
805
+ }
806
+ );
807
+ }
808
+
809
+ // src/components/Accordion/AccordionLink.tsx
810
+ var import_icons = require("@simplybusiness/icons");
811
+ var import_jsx_runtime3 = require("react/jsx-runtime");
812
+ var AccordionLink = ({
813
+ text,
814
+ elementType: LinkElement = "span",
815
+ toggle,
816
+ onClick,
817
+ headerChildren,
818
+ ariaExpanded,
819
+ accordionId,
820
+ contentId
821
+ }) => {
822
+ const linkClasses = (0, import_dedupe3.default)("mobius-accordion__link", {
823
+ "--is-open": ariaExpanded
824
+ });
825
+ const iconClasses = (0, import_dedupe3.default)("mobius-accordion__link-icon", {
826
+ "--is-open": ariaExpanded
827
+ });
828
+ const handleOnClick = (e) => {
829
+ if (onClick) {
830
+ onClick(e);
831
+ }
832
+ toggle();
833
+ };
834
+ const handleKeyDown = (e) => {
835
+ if (e.key === " " || e.key === "Enter") {
836
+ toggle();
837
+ }
838
+ };
839
+ if (headerChildren) {
840
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
841
+ Flex,
842
+ {
843
+ justifyContent: "space-between",
844
+ alignItems: "center",
845
+ className: "mobius-accordion__header",
846
+ children: [
847
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
848
+ "div",
849
+ {
850
+ id: accordionId,
851
+ className: linkClasses,
852
+ onClick: handleOnClick,
853
+ onKeyDown: handleKeyDown,
854
+ role: "button",
855
+ tabIndex: 0,
856
+ "aria-expanded": !!ariaExpanded,
857
+ "aria-controls": contentId,
858
+ children: [
859
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LinkElement, { className: "mobius-accordion__link-text", children: text }),
860
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { icon: import_icons.chevronDown, className: iconClasses })
861
+ ]
862
+ }
863
+ ),
864
+ headerChildren
865
+ ]
866
+ }
867
+ );
868
+ }
869
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
870
+ "div",
871
+ {
872
+ id: accordionId,
873
+ className: linkClasses,
874
+ onClick: handleOnClick,
875
+ onKeyDown: handleKeyDown,
876
+ role: "button",
877
+ tabIndex: 0,
878
+ "aria-expanded": !!ariaExpanded,
879
+ "aria-controls": contentId,
880
+ children: [
881
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LinkElement, { className: "mobius-accordion__link-text", children: text }),
882
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { icon: import_icons.chevronDown, className: iconClasses })
883
+ ]
884
+ }
885
+ );
886
+ };
887
+
888
+ // src/components/Accordion/Accordion.tsx
889
+ var import_jsx_runtime4 = require("react/jsx-runtime");
890
+ var Accordion = ({ ref, ...props }) => {
891
+ const {
892
+ showText = "See more",
893
+ hideText = "See less",
894
+ headerPosition = "top",
895
+ startOpen = false,
896
+ linkElementType,
897
+ onClick,
898
+ onOpen,
899
+ onClose,
900
+ onChange = () => {
901
+ },
902
+ headerChildren,
903
+ ...rest
904
+ } = props;
905
+ const [accordionState, setAccordionState] = (0, import_react14.useState)({
906
+ open: startOpen,
907
+ withAnimation: false
908
+ });
909
+ const prefersReducedMotion = usePrefersReducedMotion();
910
+ const containerClasses = (0, import_dedupe4.default)(
911
+ "mobius",
912
+ "mobius-accordion",
913
+ props.className,
914
+ {
915
+ "--should-animate": accordionState.withAnimation && !prefersReducedMotion,
916
+ "--is-open": accordionState.open
917
+ }
918
+ );
919
+ const contentContainerClasses = (0, import_dedupe4.default)(
920
+ "mobius-accordion__content-container",
921
+ {
922
+ "--is-open": accordionState.open
923
+ }
924
+ );
925
+ const contentClasses = (0, import_dedupe4.default)("mobius-accordion__content", {
926
+ "--is-open": accordionState.open
927
+ });
928
+ const linkText = accordionState.open ? hideText : showText;
929
+ const handleChange = () => {
930
+ if (!accordionState.open && onOpen) {
931
+ onOpen();
932
+ }
933
+ if (accordionState.open && onClose) {
934
+ onClose();
935
+ }
936
+ if (onChange) {
937
+ onChange(!accordionState.open);
938
+ }
939
+ setAccordionState({
940
+ open: !accordionState.open,
941
+ withAnimation: true
942
+ });
943
+ };
944
+ (0, import_react14.useEffect)(() => {
945
+ setAccordionState({
946
+ open: startOpen,
947
+ withAnimation: true
948
+ });
949
+ }, [startOpen]);
950
+ const baseId = (0, import_react14.useId)();
951
+ const accordionId = `accordion-header-${baseId}`;
952
+ const contentId = `accordion-panel-${baseId}`;
953
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { ref, ...rest, className: containerClasses, children: [
954
+ headerPosition === "top" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
955
+ AccordionLink,
956
+ {
957
+ text: linkText,
958
+ elementType: linkElementType,
959
+ toggle: handleChange,
960
+ onClick,
961
+ ariaExpanded: accordionState.open,
962
+ headerChildren,
963
+ accordionId,
964
+ contentId
965
+ }
966
+ ),
967
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
968
+ "div",
969
+ {
970
+ id: contentId,
971
+ className: contentContainerClasses,
972
+ "aria-hidden": !accordionState.open,
973
+ "aria-labelledby": accordionId,
974
+ role: "region",
975
+ children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: contentClasses, children: props.children })
976
+ }
977
+ ),
978
+ headerPosition === "bottom" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
979
+ AccordionLink,
980
+ {
981
+ text: linkText,
982
+ toggle: handleChange,
983
+ onClick,
984
+ ariaExpanded: accordionState.open,
985
+ headerChildren,
986
+ accordionId,
987
+ contentId
988
+ }
989
+ )
990
+ ] });
991
+ };
992
+ Accordion.displayName = "Accordion";
993
+
994
+ // src/components/Accordion/AccordionList.tsx
995
+ var import_react15 = require("react");
996
+ var import_dedupe6 = __toESM(require("classnames/dedupe"));
997
+
998
+ // src/components/Divider/Divider.tsx
999
+ var import_dedupe5 = __toESM(require("classnames/dedupe"));
1000
+ var import_jsx_runtime5 = require("react/jsx-runtime");
1001
+ var Divider = ({
1002
+ "aria-orientation": ariaOrientation = "horizontal",
1003
+ className,
1004
+ ...rest
1005
+ }) => {
1006
+ const classes = (0, import_dedupe5.default)("mobius", "mobius-divider", className);
1007
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1008
+ "div",
1009
+ {
1010
+ className: classes,
1011
+ role: "separator",
1012
+ "aria-orientation": ariaOrientation,
1013
+ ...rest,
1014
+ children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mobius-divider__inner" })
1015
+ }
1016
+ );
1017
+ };
1018
+ Divider.displayName = "Divider";
1019
+
1020
+ // src/components/Accordion/AccordionList.tsx
1021
+ var import_jsx_runtime6 = require("react/jsx-runtime");
1022
+ var AccordionList = (props) => {
1023
+ const {
1024
+ className,
1025
+ content,
1026
+ onOpen,
1027
+ onClose,
1028
+ allowMultiple = false,
1029
+ ...rest
1030
+ } = props;
1031
+ const [openIds, setOpenIds] = (0, import_react15.useState)(/* @__PURE__ */ new Set());
1032
+ const classes = (0, import_dedupe6.default)("mobius", "mobius-accordion-list", className);
1033
+ const handleAccordionChange = (id, isOpen) => {
1034
+ setOpenIds((prev) => {
1035
+ const newSet = new Set(prev);
1036
+ if (isOpen) {
1037
+ if (!allowMultiple) {
1038
+ newSet.clear();
1039
+ }
1040
+ newSet.add(id);
1041
+ } else {
1042
+ newSet.delete(id);
1043
+ }
1044
+ return newSet;
1045
+ });
1046
+ if (isOpen) {
1047
+ onOpen?.(id);
1048
+ } else {
1049
+ onClose?.(id);
1050
+ }
1051
+ };
1052
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: classes, ...rest, children: content.map((item, index) => {
1053
+ const { id, header, details } = item;
1054
+ const isOpen = openIds.has(id);
1055
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react15.Fragment, { children: [
1056
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1057
+ Accordion,
1058
+ {
1059
+ startOpen: isOpen,
1060
+ showText: header,
1061
+ hideText: header,
1062
+ onChange: (isOpen2) => handleAccordionChange(id, isOpen2),
1063
+ children: details
1064
+ }
1065
+ ),
1066
+ index < content.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Divider, {})
1067
+ ] }, id);
1068
+ }) });
1069
+ };
1070
+ AccordionList.displayName = "AccordionList";
1071
+
1072
+ // src/components/AddressLookup/AddressLookup.tsx
1073
+ var import_icons3 = require("@simplybusiness/icons");
1074
+ var import_react21 = require("react");
1075
+
1076
+ // src/components/Combobox/Combobox.tsx
1077
+ var import_dedupe14 = __toESM(require("classnames/dedupe"));
1078
+ var import_react20 = require("react");
1079
+
1080
+ // src/components/TextField/TextField.tsx
1081
+ var import_dedupe11 = __toESM(require("classnames/dedupe"));
1082
+
1083
+ // src/components/ErrorMessage/ErrorMessage.tsx
1084
+ var import_icons2 = require("@simplybusiness/icons");
1085
+ var import_dedupe7 = __toESM(require("classnames/dedupe"));
1086
+ var import_jsx_runtime7 = require("react/jsx-runtime");
1087
+ var ErrorMessage = ({
1088
+ id,
1089
+ errorMessage,
1090
+ className
1091
+ }) => {
1092
+ const classes = (0, import_dedupe7.default)("mobius", "mobius-error-message", className);
1093
+ if (!errorMessage) return null;
1094
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { id, className: classes, "data-testid": "ErrorMessage", role: "alert", children: [
1095
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1096
+ Icon,
1097
+ {
1098
+ icon: import_icons2.error,
1099
+ className: "mobius-error-message__icon",
1100
+ "aria-hidden": "true"
1101
+ }
1102
+ ),
1103
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1104
+ TextOrHTML,
1105
+ {
1106
+ elementType: "span",
1107
+ className: "mobius-error-message__text",
1108
+ text: errorMessage
1109
+ }
1110
+ )
1111
+ ] });
1112
+ };
1113
+ ErrorMessage.displayName = "ErrorMessage";
1114
+
1115
+ // src/components/Label/Label.tsx
1116
+ var import_dedupe8 = __toESM(require("classnames/dedupe"));
1117
+ var import_jsx_runtime8 = require("react/jsx-runtime");
1118
+ var Label = ({ ref, ...props }) => {
1119
+ const { elementType: Element = "label", children, ...otherProps } = props;
1120
+ const classes = (0, import_dedupe8.default)("mobius", "mobius-label", props.className);
1121
+ otherProps.className = classes;
1122
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Element, { ref, ...otherProps, className: classes, children });
1123
+ };
1124
+ Label.displayName = "Label";
1125
+
1126
+ // src/components/Stack/Stack.tsx
1127
+ var import_dedupe9 = __toESM(require("classnames/dedupe"));
1128
+ var import_jsx_runtime9 = require("react/jsx-runtime");
1129
+ var Stack = ({ ref, ...props }) => {
1130
+ const { elementType: Element = "div", gap, ...otherProps } = props;
1131
+ const classes = (0, import_dedupe9.default)(
1132
+ "mobius",
1133
+ "mobius-stack",
1134
+ {
1135
+ [`--gap-${gap}`]: gap
1136
+ },
1137
+ otherProps.className
1138
+ );
1139
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Element, { ref, ...otherProps, className: classes });
1140
+ };
1141
+ Stack.displayName = "Stack";
1142
+
1143
+ // src/components/TextField/adornmentWithClassName.ts
1144
+ var import_dedupe10 = __toESM(require("classnames/dedupe"));
1145
+ var import_react16 = require("react");
1146
+ var adornmentWithClassName = (component, validationClasses, className) => {
1147
+ if (!component) return null;
1148
+ return (0, import_react16.cloneElement)(component, {
1149
+ className: (0, import_dedupe10.default)(
1150
+ component.props.className,
1151
+ validationClasses,
1152
+ className
1153
+ )
1154
+ });
1155
+ };
1156
+
1157
+ // src/components/TextField/TextField.tsx
1158
+ var import_jsx_runtime10 = require("react/jsx-runtime");
1159
+ var TextField = ({ ref, ...props }) => {
1160
+ const {
1161
+ isDisabled,
1162
+ type = "text",
1163
+ isInvalid,
1164
+ className,
1165
+ label,
1166
+ errorMessage,
1167
+ children,
1168
+ isRequired,
1169
+ prefixInside,
1170
+ prefixOutside,
1171
+ suffixInside,
1172
+ suffixOutside,
1173
+ isReadOnly,
1174
+ ...otherProps
1175
+ } = props;
1176
+ const { inputProps, labelProps, errorMessageProps } = useTextField({
1177
+ ...props,
1178
+ "aria-errormessage": errorMessage
1179
+ });
1180
+ const hidden = type === "hidden";
1181
+ const validationClasses = useValidationClasses({ isInvalid });
1182
+ const textfieldClasses = {
1183
+ "--is-disabled": isDisabled,
1184
+ "--is-required": typeof isRequired === "boolean" && isRequired,
1185
+ "--is-optional": typeof isRequired === "boolean" && !isRequired,
1186
+ "--is-hidden": hidden,
1187
+ [className || ""]: true
1188
+ };
1189
+ const sharedClasses = (0, import_dedupe11.default)(validationClasses, textfieldClasses);
1190
+ const labelClasses = (0, import_dedupe11.default)(
1191
+ {
1192
+ "--is-disabled": isDisabled
1193
+ },
1194
+ validationClasses
1195
+ );
1196
+ const containerClasses = (0, import_dedupe11.default)(
1197
+ "mobius",
1198
+ "mobius-text-field",
1199
+ sharedClasses
1200
+ );
1201
+ const inputClasses = (0, import_dedupe11.default)(
1202
+ "mobius",
1203
+ "mobius-text-field__input",
1204
+ sharedClasses
1205
+ );
1206
+ const inputWrapperClasses = (0, import_dedupe11.default)(
1207
+ "mobius-text-field__input-wrapper",
1208
+ sharedClasses
1209
+ );
1210
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Stack, { gap: "xs", className: containerClasses, children: [
1211
+ label && !hidden && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Label, { ...labelProps, className: labelClasses, children: label }),
1212
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "mobius-text-field__inner-container", children: [
1213
+ adornmentWithClassName(
1214
+ prefixOutside,
1215
+ labelClasses,
1216
+ "mobius-text-field__prefix-outside"
1217
+ ),
1218
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: inputWrapperClasses, children: [
1219
+ adornmentWithClassName(
1220
+ prefixInside,
1221
+ labelClasses,
1222
+ "mobius-text-field__prefix-inside"
1223
+ ),
1224
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
1225
+ "input",
1226
+ {
1227
+ ...otherProps,
1228
+ ...inputProps,
1229
+ ref,
1230
+ type,
1231
+ className: inputClasses
1232
+ }
1233
+ ),
1234
+ adornmentWithClassName(
1235
+ suffixInside,
1236
+ labelClasses,
1237
+ "mobius-text-field__suffix-inside"
1238
+ )
1239
+ ] }),
1240
+ adornmentWithClassName(
1241
+ suffixOutside,
1242
+ labelClasses,
1243
+ "mobius-text-field__suffix-outside"
1244
+ )
1245
+ ] }),
1246
+ children && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mobius-text-field__children", children }),
1247
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ErrorMessage, { ...errorMessageProps, errorMessage })
1248
+ ] });
1249
+ };
1250
+ TextField.displayName = "TextField";
1251
+
1252
+ // src/components/VisuallyHidden/VisuallyHidden.tsx
1253
+ var import_jsx_runtime11 = require("react/jsx-runtime");
1254
+ function VisuallyHidden(props) {
1255
+ const {
1256
+ className,
1257
+ children,
1258
+ elementType: Component = "div",
1259
+ ...otherProps
1260
+ } = props;
1261
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
1262
+ Component,
1263
+ {
1264
+ className,
1265
+ style: {
1266
+ border: 0,
1267
+ clip: "rect(0 0 0 0)",
1268
+ clipPath: "inset(50%)",
1269
+ height: "1px",
1270
+ margin: "-1px",
1271
+ overflow: "hidden",
1272
+ padding: 0,
1273
+ position: "absolute",
1274
+ width: "1px",
1275
+ whiteSpace: "nowrap"
1276
+ },
1277
+ ...otherProps,
1278
+ children
1279
+ }
1280
+ );
1281
+ }
1282
+
1283
+ // src/components/Combobox/Listbox.tsx
1284
+ var import_dedupe13 = __toESM(require("classnames/dedupe"));
1285
+
1286
+ // src/components/Combobox/Option.tsx
1287
+ var import_react17 = require("react");
1288
+ var import_dedupe12 = __toESM(require("classnames/dedupe"));
1289
+
1290
+ // src/components/Combobox/utils.tsx
1291
+ function isOptionGroup(options) {
1292
+ if (!options) return false;
1293
+ return typeof options[0] === "object" && "options" in options[0] && options[0].options !== void 0 && "heading" in options[0] && options[0].heading !== void 0;
1294
+ }
1295
+ var getOptionValue = (option) => typeof option === "string" ? option : option?.value;
1296
+ var getOptionLabel = (option) => typeof option === "string" ? option : option?.label;
1297
+ function filterOptions(options, inputValue) {
1298
+ if (isOptionGroup(options)) {
1299
+ return options.map((optionGroup) => ({
1300
+ ...optionGroup,
1301
+ options: optionGroup.options.filter(
1302
+ (option) => getOptionLabel(option).toLowerCase().includes(inputValue.toLowerCase())
1303
+ )
1304
+ })).filter((optionGroup) => optionGroup.options.length > 0);
1305
+ }
1306
+ return options.filter(
1307
+ (option) => getOptionLabel(option).toLowerCase().includes(inputValue.toLowerCase())
1308
+ );
1309
+ }
1310
+
1311
+ // src/components/Combobox/Option.tsx
1312
+ var import_jsx_runtime12 = require("react/jsx-runtime");
1313
+ var Option = ({
1314
+ option,
1315
+ isHighlighted,
1316
+ onOptionSelect,
1317
+ optionComponent: OptionComponent,
1318
+ id
1319
+ }) => {
1320
+ const optionRef = (0, import_react17.useRef)(null);
1321
+ (0, import_react17.useEffect)(() => {
1322
+ if (isHighlighted && optionRef.current && optionRef.current.scrollIntoView) {
1323
+ optionRef.current.scrollIntoView({ block: "nearest" });
1324
+ }
1325
+ }, [isHighlighted]);
1326
+ return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
1327
+ "li",
1328
+ {
1329
+ ref: optionRef,
1330
+ role: "option",
1331
+ id,
1332
+ "aria-selected": isHighlighted,
1333
+ onMouseDown: () => onOptionSelect(option),
1334
+ className: (0, import_dedupe12.default)("mobius-combobox__option", "has-pii", {
1335
+ "mobius-combobox__option--is-highlighted": isHighlighted
1336
+ }),
1337
+ children: OptionComponent ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(OptionComponent, { option, isHighlighted }) : getOptionLabel(option)
1338
+ },
1339
+ getOptionValue(option)
1340
+ );
1341
+ };
1342
+
1343
+ // src/components/Combobox/Listbox.tsx
1344
+ var import_jsx_runtime13 = require("react/jsx-runtime");
1345
+ var getOptionKey = (option, index, groupIndex) => {
1346
+ let key;
1347
+ if (typeof option === "object" && option.id) key = option.id;
1348
+ else if (typeof option === "object") key = `${option.value}::${option.label}`;
1349
+ else if (typeof option === "string") key = option;
1350
+ else key = String(index);
1351
+ return groupIndex !== void 0 ? `${groupIndex}:${key}` : key;
1352
+ };
1353
+ var Listbox = ({
1354
+ id,
1355
+ isOpen = false,
1356
+ options,
1357
+ highlightedIndex,
1358
+ highlightedGroupIndex,
1359
+ onOptionSelect,
1360
+ optionComponent
1361
+ }) => {
1362
+ const classes = (0, import_dedupe13.default)("mobius-combobox__list", {
1363
+ "mobius-combobox__list--hidden": !isOpen
1364
+ });
1365
+ function getOptionId(option, groupIndex, index) {
1366
+ if (typeof option === "object" && "id" in option && typeof option.id === "string") {
1367
+ return option.id;
1368
+ }
1369
+ return isOptionGroup(options) ? `${id}-option-${groupIndex}-${index}` : `${id}-option-${index}`;
1370
+ }
1371
+ if (!isOpen) {
1372
+ return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { role: "listbox", id, className: classes });
1373
+ }
1374
+ if (options && options.length === 0) {
1375
+ return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { role: "listbox", id, className: classes, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "mobius-combobox__no-options", children: "No options" }) });
1376
+ }
1377
+ return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { role: "listbox", id, className: classes, children: isOptionGroup(options) ? options.map((option, groupIndex) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
1378
+ "ul",
1379
+ {
1380
+ role: "group",
1381
+ "aria-labelledby": `${id}-group-${groupIndex}`,
1382
+ className: "mobius-combobox__group",
1383
+ children: [
1384
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
1385
+ "li",
1386
+ {
1387
+ role: "presentation",
1388
+ id: `${id}-group-${groupIndex}`,
1389
+ className: "mobius-combobox__group-label",
1390
+ children: option.heading
1391
+ }
1392
+ ),
1393
+ option.options.map((groupOption, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
1394
+ Option,
1395
+ {
1396
+ option: groupOption,
1397
+ isHighlighted: highlightedIndex === index && highlightedGroupIndex === groupIndex,
1398
+ onOptionSelect,
1399
+ optionComponent,
1400
+ id: getOptionId(groupOption, groupIndex, index)
1401
+ },
1402
+ getOptionKey(groupOption, index, groupIndex)
1403
+ ))
1404
+ ]
1405
+ },
1406
+ option.heading
1407
+ )) : typeof options !== "undefined" ? options.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
1408
+ Option,
1409
+ {
1410
+ option,
1411
+ isHighlighted: highlightedIndex === index,
1412
+ onOptionSelect,
1413
+ optionComponent,
1414
+ id: getOptionId(option, 0, index)
1415
+ },
1416
+ getOptionKey(option, index)
1417
+ )) : null });
1418
+ };
1419
+
1420
+ // src/components/Combobox/useComboboxHighlight.tsx
1421
+ var import_react18 = require("react");
1422
+ function useComboboxHighlight(options) {
1423
+ const [highlightedIndex, setHighlightedIndex] = (0, import_react18.useState)(
1424
+ options && options.length ? 0 : -1
1425
+ );
1426
+ const [highlightedGroupIndex, setHighlightedGroupIndex] = (0, import_react18.useState)(0);
1427
+ function highlightNextOption() {
1428
+ const isGroup = isOptionGroup(options);
1429
+ if (!options) {
1430
+ return;
1431
+ }
1432
+ if (isGroup) {
1433
+ const group = options[highlightedGroupIndex];
1434
+ if (highlightedIndex === group.options.length - 1) {
1435
+ if (highlightedGroupIndex === options.length - 1) {
1436
+ return;
1437
+ }
1438
+ setHighlightedIndex(0);
1439
+ setHighlightedGroupIndex(highlightedGroupIndex + 1);
1440
+ } else {
1441
+ setHighlightedIndex(highlightedIndex + 1);
1442
+ }
1443
+ } else {
1444
+ if (highlightedIndex === options.length - 1) {
1445
+ return;
1446
+ }
1447
+ setHighlightedIndex(highlightedIndex + 1);
1448
+ }
1449
+ }
1450
+ function highlightPreviousOption() {
1451
+ const isGroup = isOptionGroup(options);
1452
+ if (highlightedIndex === 0 && highlightedGroupIndex === 0) {
1453
+ return;
1454
+ }
1455
+ if (isGroup) {
1456
+ if (highlightedIndex === 0) {
1457
+ const prevGroupIndex = highlightedGroupIndex - 1;
1458
+ const prevGroup = options[prevGroupIndex];
1459
+ setHighlightedGroupIndex(prevGroupIndex);
1460
+ setHighlightedIndex(prevGroup.options.length - 1);
1461
+ } else {
1462
+ setHighlightedIndex(highlightedIndex - 1);
1463
+ }
1464
+ } else {
1465
+ setHighlightedIndex(highlightedIndex - 1);
1466
+ }
1467
+ }
1468
+ function highlightFirstOption() {
1469
+ setHighlightedIndex(0);
1470
+ setHighlightedGroupIndex(0);
1471
+ }
1472
+ function highlightLastOption() {
1473
+ const isGroup = isOptionGroup(options);
1474
+ if (!options) {
1475
+ return;
1476
+ }
1477
+ if (isGroup) {
1478
+ const lastGroupIndex = options.length - 1;
1479
+ const lastGroup = options[lastGroupIndex];
1480
+ setHighlightedGroupIndex(lastGroupIndex);
1481
+ setHighlightedIndex(lastGroup.options.length - 1);
1482
+ } else {
1483
+ setHighlightedIndex(options.length - 1);
1484
+ }
1485
+ }
1486
+ const clearHighlight = () => {
1487
+ setHighlightedIndex(
1488
+ typeof options === "undefined" || options.length ? 0 : -1
1489
+ );
1490
+ setHighlightedGroupIndex(0);
1491
+ };
1492
+ return {
1493
+ highlightedIndex,
1494
+ highlightedGroupIndex,
1495
+ highlightPreviousOption,
1496
+ highlightNextOption,
1497
+ highlightFirstOption,
1498
+ highlightLastOption,
1499
+ clearHighlight
1500
+ };
1501
+ }
1502
+
1503
+ // src/components/Combobox/useComboboxOptions.ts
1504
+ var import_react19 = require("react");
1505
+ function useComboboxOptions({
1506
+ options,
1507
+ asyncOptions,
1508
+ delay = 300,
1509
+ minSearchLength = 3,
1510
+ inputValue = "",
1511
+ skipNextDebounceRef,
1512
+ onSearched
1513
+ }) {
1514
+ const [filteredOptions, setFilteredOptions] = (0, import_react19.useState)(void 0);
1515
+ const debouncedInputValue = useDebouncedValue(
1516
+ inputValue,
1517
+ // Don't debounce synchronous options
1518
+ options ? 0 : delay
1519
+ );
1520
+ const [isLoading, setIsLoading] = (0, import_react19.useState)(false);
1521
+ const [error3, setError] = (0, import_react19.useState)(null);
1522
+ (0, import_react19.useEffect)(() => {
1523
+ const controller = new AbortController();
1524
+ const { signal } = controller;
1525
+ const fetchOptions = async () => {
1526
+ setIsLoading(true);
1527
+ setError(null);
1528
+ try {
1529
+ if (asyncOptions) {
1530
+ if (debouncedInputValue.length < minSearchLength) {
1531
+ setFilteredOptions(void 0);
1532
+ return;
1533
+ }
1534
+ const result = await asyncOptions(debouncedInputValue, { signal });
1535
+ setFilteredOptions(result);
1536
+ onSearched?.(debouncedInputValue);
1537
+ } else if (options) {
1538
+ setFilteredOptions(filterOptions(options, debouncedInputValue));
1539
+ } else {
1540
+ setError(new Error("No options provided"));
1541
+ }
1542
+ } catch (e) {
1543
+ if (e instanceof DOMException && e.name === "AbortError") {
1544
+ return;
1545
+ }
1546
+ setError(e);
1547
+ } finally {
1548
+ setIsLoading(false);
1549
+ }
1550
+ };
1551
+ if (!skipNextDebounceRef?.current) {
1552
+ void fetchOptions();
1553
+ } else {
1554
+ skipNextDebounceRef.current = false;
1555
+ }
1556
+ return () => {
1557
+ controller.abort();
1558
+ };
1559
+ }, [
1560
+ debouncedInputValue,
1561
+ options,
1562
+ asyncOptions,
1563
+ delay,
1564
+ minSearchLength,
1565
+ skipNextDebounceRef,
1566
+ onSearched
1567
+ ]);
1568
+ function updateFilteredOptions(newOptions) {
1569
+ setIsLoading(true);
1570
+ return newOptions.then(setFilteredOptions).catch(setError).finally(() => setIsLoading(false));
1571
+ }
1572
+ return {
1573
+ filteredOptions,
1574
+ updateFilteredOptions,
1575
+ isLoading,
1576
+ error: error3,
1577
+ isError: error3 != null
1578
+ };
1579
+ }
1580
+
1581
+ // src/components/Combobox/Combobox.tsx
1582
+ var import_jsx_runtime14 = require("react/jsx-runtime");
1583
+ var ComboboxInner = ({
1584
+ ref,
1585
+ ...props
1586
+ }) => {
1587
+ const {
1588
+ id,
1589
+ defaultValue,
1590
+ value,
1591
+ options,
1592
+ asyncOptions,
1593
+ delay,
1594
+ minSearchLength,
1595
+ onSelected,
1596
+ className,
1597
+ placeholder,
1598
+ icon,
1599
+ onBlur,
1600
+ onFocus,
1601
+ onChange,
1602
+ // onSearched, // unused prop, consider removing
1603
+ optionComponent,
1604
+ errorMessage,
1605
+ ...otherProps
1606
+ } = props;
1607
+ const skipNextDebounceRef = (0, import_react20.useRef)(false);
1608
+ const fallbackRef = (0, import_react20.useRef)(null);
1609
+ const [inputValue, setInputValue] = (0, import_react20.useState)(defaultValue || "");
1610
+ const [isOpen, setIsOpen] = (0, import_react20.useState)(false);
1611
+ const [isChanging, setIsChanging] = (0, import_react20.useState)(false);
1612
+ const { filteredOptions, updateFilteredOptions, isLoading, error: error3 } = useComboboxOptions({
1613
+ options,
1614
+ asyncOptions,
1615
+ inputValue,
1616
+ delay,
1617
+ minSearchLength,
1618
+ skipNextDebounceRef
1619
+ });
1620
+ const {
1621
+ highlightedIndex,
1622
+ highlightedGroupIndex,
1623
+ highlightNextOption,
1624
+ highlightPreviousOption,
1625
+ highlightFirstOption,
1626
+ highlightLastOption,
1627
+ clearHighlight
1628
+ } = useComboboxHighlight(filteredOptions);
1629
+ const inputRef = ref || fallbackRef;
1630
+ const listboxId = (0, import_react20.useId)();
1631
+ const statusId = (0, import_react20.useId)();
1632
+ const blurTimeoutRef = (0, import_react20.useRef)(null);
1633
+ const userInteractedRef = (0, import_react20.useRef)(false);
1634
+ const justSelectedRef = (0, import_react20.useRef)(false);
1635
+ const { down } = useBreakpoint();
1636
+ const isMobile = down("md");
1637
+ const handleFocus = (e) => {
1638
+ onFocus?.(e);
1639
+ if (!filteredOptions || filteredOptions.length === 0) return;
1640
+ if (blurTimeoutRef.current) {
1641
+ clearTimeout(blurTimeoutRef.current);
1642
+ blurTimeoutRef.current = null;
1643
+ }
1644
+ const isNaturalFocus = userInteractedRef.current || e.relatedTarget !== null;
1645
+ if (userInteractedRef.current) {
1646
+ userInteractedRef.current = false;
1647
+ }
1648
+ if (justSelectedRef.current && !isNaturalFocus) {
1649
+ return;
1650
+ }
1651
+ if (isNaturalFocus) {
1652
+ setIsOpen(true);
1653
+ justSelectedRef.current = false;
1654
+ }
1655
+ };
1656
+ (0, import_react20.useEffect)(() => {
1657
+ if (!inputRef || typeof inputRef === "function") return;
1658
+ const inputElement = inputRef.current;
1659
+ if (!inputElement) return;
1660
+ const handleMouseDown = () => {
1661
+ userInteractedRef.current = true;
1662
+ };
1663
+ inputElement.addEventListener("mousedown", handleMouseDown);
1664
+ return () => {
1665
+ inputElement.removeEventListener("mousedown", handleMouseDown);
1666
+ };
1667
+ }, [inputRef]);
1668
+ useOnUnmount(() => {
1669
+ if (blurTimeoutRef.current) {
1670
+ clearTimeout(blurTimeoutRef.current);
1671
+ }
1672
+ });
1673
+ const handleInputChange = (e) => {
1674
+ const newValue = e.target.value;
1675
+ setInputValue(newValue);
1676
+ justSelectedRef.current = false;
1677
+ setIsChanging(true);
1678
+ if (!asyncOptions) {
1679
+ setIsOpen(true);
1680
+ }
1681
+ clearHighlight();
1682
+ onChange?.(e);
1683
+ };
1684
+ const handleOptionSelect = (option) => {
1685
+ const val = getOptionValue(option);
1686
+ if (!val) return;
1687
+ if (typeof option === "object" && "callback" in option && option.callback && typeof option.callback === "function") {
1688
+ setTimeout(() => {
1689
+ if (inputRef && typeof inputRef !== "function" && inputRef.current) {
1690
+ inputRef.current.focus();
1691
+ }
1692
+ }, 0);
1693
+ updateFilteredOptions(option.callback());
1694
+ return;
1695
+ }
1696
+ skipNextDebounceRef.current = true;
1697
+ justSelectedRef.current = true;
1698
+ setIsChanging(false);
1699
+ setIsOpen(false);
1700
+ setInputValue(val);
1701
+ onSelected?.(option);
1702
+ };
1703
+ const getFirstOption = () => {
1704
+ if (!filteredOptions) return void 0;
1705
+ if (isOptionGroup(filteredOptions)) {
1706
+ return filteredOptions[0]?.options[0];
1707
+ }
1708
+ return filteredOptions[0];
1709
+ };
1710
+ const getHighlightedOption = () => {
1711
+ if (!filteredOptions) return void 0;
1712
+ if (highlightedIndex === -1) return void 0;
1713
+ if (isOptionGroup(filteredOptions)) {
1714
+ const group = filteredOptions[highlightedGroupIndex];
1715
+ return group?.options[highlightedIndex];
1716
+ }
1717
+ return filteredOptions[highlightedIndex];
1718
+ };
1719
+ const getHighlightedOptionId = () => {
1720
+ const option = getHighlightedOption();
1721
+ if (!option) return void 0;
1722
+ if (isOptionGroup(filteredOptions)) {
1723
+ return `${listboxId}-option-${highlightedGroupIndex}-${highlightedIndex}`;
1724
+ }
1725
+ return `${listboxId}-option-${highlightedIndex}`;
1726
+ };
1727
+ const handleBlur = (e) => {
1728
+ if (!justSelectedRef.current) {
1729
+ const typedText = inputValue.trim().toLowerCase();
1730
+ const highlightedOption = getHighlightedOption();
1731
+ const label = getOptionLabel(highlightedOption);
1732
+ if (typedText === label?.toLowerCase()) {
1733
+ setTimeout(() => {
1734
+ handleOptionSelect(highlightedOption);
1735
+ }, 0);
1736
+ }
1737
+ }
1738
+ blurTimeoutRef.current = setTimeout(() => {
1739
+ onBlur?.(e);
1740
+ setIsOpen(false);
1741
+ setIsChanging(false);
1742
+ }, 150);
1743
+ };
1744
+ const handleKeyDown = (e) => {
1745
+ switch (e.key) {
1746
+ case "ArrowDown":
1747
+ e.preventDefault();
1748
+ justSelectedRef.current = false;
1749
+ setIsOpen(true);
1750
+ highlightNextOption();
1751
+ break;
1752
+ case "ArrowUp":
1753
+ e.preventDefault();
1754
+ justSelectedRef.current = false;
1755
+ setIsOpen(true);
1756
+ highlightPreviousOption();
1757
+ break;
1758
+ case "Home":
1759
+ e.preventDefault();
1760
+ justSelectedRef.current = false;
1761
+ setIsOpen(true);
1762
+ highlightFirstOption();
1763
+ break;
1764
+ case "End":
1765
+ e.preventDefault();
1766
+ justSelectedRef.current = false;
1767
+ setIsOpen(true);
1768
+ highlightLastOption();
1769
+ break;
1770
+ case "Enter":
1771
+ e.preventDefault();
1772
+ if (isOpen) {
1773
+ const selectedOption = getHighlightedOption() || getFirstOption();
1774
+ if (selectedOption) {
1775
+ handleOptionSelect(selectedOption);
1776
+ }
1777
+ }
1778
+ break;
1779
+ case "Escape":
1780
+ e.preventDefault();
1781
+ setInputValue("");
1782
+ setIsOpen(false);
1783
+ clearHighlight();
1784
+ break;
1785
+ default:
1786
+ }
1787
+ };
1788
+ (0, import_react20.useEffect)(() => {
1789
+ if (value) {
1790
+ setInputValue(value);
1791
+ }
1792
+ }, [value]);
1793
+ (0, import_react20.useEffect)(() => {
1794
+ if (asyncOptions && isChanging) {
1795
+ setIsOpen(!!filteredOptions && filteredOptions.length > 0);
1796
+ }
1797
+ }, [filteredOptions, asyncOptions, isChanging]);
1798
+ const classes = (0, import_dedupe14.default)(
1799
+ "mobius mobius-combobox",
1800
+ {
1801
+ "mobius-combobox--is-expanded": isOpen,
1802
+ "mobius-combobox--is-loading": isLoading,
1803
+ "mobius-combobox--is-mobile": isMobile
1804
+ },
1805
+ className
1806
+ );
1807
+ const getStatusMessage = () => {
1808
+ if (isLoading) return "Loading options";
1809
+ if (!filteredOptions || filteredOptions.length === 0) {
1810
+ return isChanging ? "No options found" : "";
1811
+ }
1812
+ const count = isOptionGroup(filteredOptions) ? filteredOptions.reduce((sum, group) => sum + group.options.length, 0) : filteredOptions.length;
1813
+ return isOpen && isChanging ? `${count} option${count === 1 ? "" : "s"} available` : "";
1814
+ };
1815
+ return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { id, "data-testid": "mobius-combobox__wrapper", className: classes, children: [
1816
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
1817
+ VisuallyHidden,
1818
+ {
1819
+ role: "status",
1820
+ "aria-live": "polite",
1821
+ id: statusId,
1822
+ elementType: "div",
1823
+ className: "mobius-combobox__status",
1824
+ children: getStatusMessage()
1825
+ }
1826
+ ),
1827
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
1828
+ TextField,
1829
+ {
1830
+ ...otherProps,
1831
+ className: "mobius-combobox__input",
1832
+ role: "combobox",
1833
+ value: inputValue,
1834
+ placeholder,
1835
+ onFocus: handleFocus,
1836
+ onBlur: handleBlur,
1837
+ onKeyDown: handleKeyDown,
1838
+ onChange: handleInputChange,
1839
+ autoComplete: "off",
1840
+ "aria-describedby": isLoading ? statusId : void 0,
1841
+ "aria-autocomplete": "list",
1842
+ "aria-haspopup": "listbox",
1843
+ "aria-owns": listboxId,
1844
+ "aria-controls": listboxId,
1845
+ "aria-expanded": isOpen,
1846
+ "aria-activedescendant": highlightedIndex === -1 ? void 0 : getHighlightedOptionId(),
1847
+ prefixInside: icon,
1848
+ ref: inputRef,
1849
+ errorMessage: errorMessage || error3?.message || void 0
1850
+ }
1851
+ ),
1852
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
1853
+ Listbox,
1854
+ {
1855
+ id: listboxId,
1856
+ isOpen,
1857
+ isLoading,
1858
+ options: filteredOptions,
1859
+ highlightedIndex,
1860
+ highlightedGroupIndex,
1861
+ onOptionSelect: handleOptionSelect,
1862
+ optionComponent
1863
+ }
1864
+ )
1865
+ ] });
1866
+ };
1867
+ var Combobox = ComboboxInner;
1868
+
1869
+ // src/components/AddressLookup/utils.ts
1870
+ function isLoqateErrorResponse(response) {
1871
+ return Array.isArray(response) && response.some((item) => "Error" in item);
1872
+ }
1873
+
1874
+ // src/components/AddressLookup/AddressLookup.tsx
1875
+ var import_jsx_runtime15 = require("react/jsx-runtime");
1876
+ function optionsFromResponse({ Items }, addressLookupService) {
1877
+ if (!Items || !Array.isArray(Items)) {
1878
+ throw Error("No address found");
1879
+ }
1880
+ if (isLoqateErrorResponse(Items)) {
1881
+ throw Error(Items[0].Description);
1882
+ }
1883
+ return Items.map((item) => ({
1884
+ id: item.Id,
1885
+ label: `${item.Text}, ${item.Description}`,
1886
+ value: item.Text,
1887
+ // Add a callback to trigger secondary search
1888
+ // if the address type is not "Address"
1889
+ callback: item.Type === "Address" ? void 0 : async () => {
1890
+ const result = await addressLookupService.findById(item.Id);
1891
+ return optionsFromResponse(result, addressLookupService);
1892
+ }
1893
+ }));
1894
+ }
1895
+ var AddressLookup = ({
1896
+ ref,
1897
+ addressLookupService,
1898
+ onAddressSelected,
1899
+ onOptionsDisplayed,
1900
+ onError,
1901
+ errorMessage,
1902
+ ...otherProps
1903
+ }) => {
1904
+ const [error3, _setError] = (0, import_react21.useState)(null);
1905
+ const setError = (0, import_react21.useCallback)(
1906
+ (newError) => {
1907
+ if (newError != null) onError?.(newError);
1908
+ _setError(newError);
1909
+ },
1910
+ [onError]
1911
+ );
1912
+ const asyncOptions = (0, import_react21.useCallback)(
1913
+ async (searchTerm) => {
1914
+ try {
1915
+ const response = await addressLookupService.search(searchTerm);
1916
+ setError(null);
1917
+ const options = optionsFromResponse(response, addressLookupService);
1918
+ onOptionsDisplayed?.();
1919
+ return options;
1920
+ } catch (e) {
1921
+ setError(e);
1922
+ return [];
1923
+ }
1924
+ },
1925
+ [addressLookupService, setError, onOptionsDisplayed]
1926
+ );
1927
+ const handleSelected = (selected) => {
1928
+ setError(null);
1929
+ if (typeof selected === "string" || !selected.id) {
1930
+ setError(new Error("Selected option missing id"));
1931
+ return Promise.resolve();
1932
+ }
1933
+ return addressLookupService.get(selected.id).then(onAddressSelected).catch(setError);
1934
+ };
1935
+ const realErrorMessage = error3 && "An error occurred" || errorMessage;
1936
+ return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
1937
+ Combobox,
1938
+ {
1939
+ ...otherProps,
1940
+ ref,
1941
+ onSelected: handleSelected,
1942
+ asyncOptions,
1943
+ errorMessage: realErrorMessage,
1944
+ icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { icon: import_icons3.search })
1945
+ }
1946
+ );
1947
+ };
1948
+ AddressLookup.displayName = "AddressLookup";
1949
+
1950
+ // src/components/AddressLookup/LoqateAddressLookupError.tsx
1951
+ var LoqateAddressLookupError = class extends Error {
1952
+ constructor(response) {
1953
+ super(response.Description);
1954
+ this.name = "LoqateAddressLookupError";
1955
+ this.response = response;
1956
+ }
1957
+ };
1958
+
1959
+ // src/components/AddressLookup/LoqateAddressLookupService.tsx
1960
+ var LOQATE_BASE_URL = "https://api.addressy.com/Capture/Interactive";
1961
+ var LOQATE_FIND_URL = "/Find/v1.00/json3.ws";
1962
+ var LOQATE_RETRIEVE_URL = "/Retrieve/v1.2/json3.ws";
1963
+ var DEFAULT_COUNTRIES = ["GB"];
1964
+ var _baseUrl, _apiKey, _countries, _filters;
1965
+ var LoqateAddressLookupService = class {
1966
+ constructor({
1967
+ baseUrl,
1968
+ apiKey,
1969
+ countries,
1970
+ filters
1971
+ }) {
1972
+ /**
1973
+ * Base URL for the Loqate API
1974
+ */
1975
+ __privateAdd(this, _baseUrl);
1976
+ /**
1977
+ * API key for the Loqate API
1978
+ */
1979
+ __privateAdd(this, _apiKey);
1980
+ /**
1981
+ * List of allowed country codes for the Loqate API
1982
+ * 2 or 3 character ISO country codes
1983
+ */
1984
+ __privateAdd(this, _countries);
1985
+ /**
1986
+ * Optional filters for the Loqate API
1987
+ * E.g., { AdministrativeArea: "CA", PostalCode: "90210" }
1988
+ */
1989
+ __privateAdd(this, _filters);
1990
+ __privateSet(this, _apiKey, apiKey);
1991
+ __privateSet(this, _baseUrl, baseUrl || LOQATE_BASE_URL);
1992
+ __privateSet(this, _countries, countries || DEFAULT_COUNTRIES);
1993
+ __privateSet(this, _filters, filters);
1994
+ }
1995
+ fetchFromApi(url) {
1996
+ return fetch(`${__privateGet(this, _baseUrl)}${url}`).then((response) => response.json()).then((json) => {
1997
+ if (json.Items?.some((item) => item.Error)) {
1998
+ throw new LoqateAddressLookupError(json);
1999
+ }
2000
+ return json;
2001
+ });
2002
+ }
2003
+ /**
2004
+ * Builds the Filters query parameter for Loqate API requests.
2005
+ * - Filter keys (e.g., "AdministrativeArea", "PostalCode") are predefined by Loqate API (no need to encode)
2006
+ * - Filter values (e.g., "New York", "90210") contain user input that may have special characters (need encoding)
2007
+ *
2008
+ * @returns Empty string if no filters, otherwise "&Filters=key1:value1&key2:value2" (Loqate's expected format for Filters)
2009
+ */
2010
+ buildFiltersQuery() {
2011
+ if (!__privateGet(this, _filters) || Object.keys(__privateGet(this, _filters)).length === 0) {
2012
+ return "";
2013
+ }
2014
+ const encodedFilters = Object.entries(__privateGet(this, _filters)).map(([key, value]) => `${key}:${encodeURIComponent(value)}`).join("&");
2015
+ return `&Filters=${encodedFilters}`;
2016
+ }
2017
+ search(searchTerm) {
2018
+ let url = `${LOQATE_FIND_URL}?Key=${__privateGet(this, _apiKey)}&Text=${searchTerm}&Countries=${__privateGet(this, _countries)?.join(",")}`;
2019
+ url += this.buildFiltersQuery();
2020
+ return this.fetchFromApi(url);
2021
+ }
2022
+ findById(id) {
2023
+ let url = `${LOQATE_FIND_URL}?Key=${__privateGet(this, _apiKey)}&Container=${id}&Countries=${__privateGet(this, _countries)?.join(",")}`;
2024
+ url += this.buildFiltersQuery();
2025
+ return this.fetchFromApi(url);
2026
+ }
2027
+ async get(id) {
2028
+ const url = `${LOQATE_RETRIEVE_URL}?Key=${__privateGet(this, _apiKey)}&Id=${id}`;
2029
+ const response = await this.fetchFromApi(url);
2030
+ return response.Items[0];
2031
+ }
2032
+ };
2033
+ _baseUrl = new WeakMap();
2034
+ _apiKey = new WeakMap();
2035
+ _countries = new WeakMap();
2036
+ _filters = new WeakMap();
2037
+
2038
+ // src/components/Alert/Alert.tsx
2039
+ var import_icons4 = require("@simplybusiness/icons");
2040
+ var import_dedupe15 = __toESM(require("classnames/dedupe"));
2041
+ var import_jsx_runtime16 = require("react/jsx-runtime");
2042
+ function isAlertVariant(value) {
2043
+ return value === "info" || value === "success" || value === "warning" || value === "error";
2044
+ }
2045
+ var Alert = ({ ref, ...props }) => {
2046
+ const {
2047
+ elementType: Element = "div",
2048
+ variant: variantProp,
2049
+ show = true,
2050
+ header,
2051
+ children,
2052
+ ...otherProps
2053
+ } = props;
2054
+ if (!show) return null;
2055
+ const variant = variantProp && isAlertVariant(variantProp) ? variantProp : "info";
2056
+ const colorValue = variant === "success" ? `var(--color-valid)` : `var(--color-${variant})`;
2057
+ const classes = (0, import_dedupe15.default)(
2058
+ "mobius",
2059
+ "mobius-alert",
2060
+ {
2061
+ "--info": variant === "info",
2062
+ "--success": variant === "success",
2063
+ "--warning": variant === "warning",
2064
+ "--error": variant === "error",
2065
+ "--has-header": header
2066
+ },
2067
+ otherProps.className
2068
+ );
2069
+ const icon = {
2070
+ info: import_icons4.circleInfo,
2071
+ success: import_icons4.circleTick,
2072
+ warning: import_icons4.warning,
2073
+ error: import_icons4.error
2074
+ };
2075
+ const headerClasses = (0, import_dedupe15.default)("mobius", "mobius-alert__header");
2076
+ const iconClasses = (0, import_dedupe15.default)("mobius", "mobius-alert__icon");
2077
+ const contentClasses = (0, import_dedupe15.default)("mobius", "mobius-alert__content");
2078
+ return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Element, { ref, role: "alert", ...otherProps, className: classes, children: [
2079
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: iconClasses, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { icon: icon[variant], color: colorValue }) }),
2080
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { children: [
2081
+ header && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: headerClasses, children: header }),
2082
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: contentClasses, children })
2083
+ ] })
2084
+ ] });
2085
+ };
2086
+ Alert.displayName = "Alert";
2087
+
2088
+ // src/components/Box/Box.tsx
2089
+ var import_dedupe16 = __toESM(require("classnames/dedupe"));
2090
+ var import_jsx_runtime17 = require("react/jsx-runtime");
2091
+ var Box = ({ ref, ...props }) => {
2092
+ const {
2093
+ elementType: Element = "div",
2094
+ padding,
2095
+ paddingX,
2096
+ paddingInline,
2097
+ paddingInlineStart,
2098
+ paddingInlineEnd,
2099
+ paddingY,
2100
+ paddingBlock,
2101
+ paddingBlockStart,
2102
+ paddingBlockEnd,
2103
+ paddingTop,
2104
+ paddingRight,
2105
+ paddingBottom,
2106
+ paddingLeft,
2107
+ minWidth,
2108
+ minHeight,
2109
+ maxWidth,
2110
+ maxHeight,
2111
+ width,
2112
+ height,
2113
+ style,
2114
+ ...otherProps
2115
+ } = props;
2116
+ const classes = (0, import_dedupe16.default)("mobius", "mobius-box", otherProps.className);
2117
+ const styleProps = filterUndefinedProps({
2118
+ padding: getSpacingValue(padding),
2119
+ paddingInline: getSpacingValue(paddingInline || paddingX),
2120
+ paddingBlock: getSpacingValue(paddingBlock || paddingY),
2121
+ paddingTop: getSpacingValue(paddingTop || paddingBlockStart),
2122
+ paddingRight: getSpacingValue(paddingRight || paddingInlineEnd),
2123
+ paddingBottom: getSpacingValue(paddingBottom || paddingBlockEnd),
2124
+ paddingLeft: getSpacingValue(paddingLeft || paddingInlineStart),
2125
+ minWidth,
2126
+ minHeight,
2127
+ maxWidth,
2128
+ maxHeight,
2129
+ width,
2130
+ height,
2131
+ ...style
2132
+ });
2133
+ return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Element, { ref, style: styleProps, ...otherProps, className: classes });
2134
+ };
2135
+ Box.displayName = "Box";
2136
+
2137
+ // src/components/Breadcrumbs/Breadcrumbs.tsx
2138
+ var import_react22 = require("react");
2139
+ var import_dedupe17 = __toESM(require("classnames/dedupe"));
2140
+ var import_jsx_runtime18 = require("react/jsx-runtime");
2141
+ var Breadcrumbs = ({ ref, ...props }) => {
2142
+ const { "aria-label": ariaLabel = "Breadcrumbs" } = props;
2143
+ const { navProps } = { navProps: { "aria-label": ariaLabel } };
2144
+ const { children, ...otherProps } = props;
2145
+ const childArray = import_react22.Children.toArray(children);
2146
+ const classes = (0, import_dedupe17.default)(
2147
+ "mobius",
2148
+ "mobius-breadcrumb",
2149
+ otherProps.className
2150
+ );
2151
+ return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("nav", { ref, ...otherProps, ...navProps, className: classes, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("ul", { children: childArray.map(
2152
+ (child, i) => (0, import_react22.cloneElement)(
2153
+ child,
2154
+ {
2155
+ key: i,
2156
+ isCurrent: i === childArray.length - 1
2157
+ }
2158
+ )
2159
+ ) }) });
2160
+ };
2161
+ Breadcrumbs.displayName = "Breadcrumbs";
2162
+
2163
+ // src/components/Breadcrumbs/BreadcrumbItem.tsx
2164
+ var import_react23 = require("react");
2165
+ var import_dedupe18 = __toESM(require("classnames/dedupe"));
2166
+ var import_jsx_runtime19 = require("react/jsx-runtime");
2167
+ var BreadcrumbItem = ({ ref, ...props }) => {
2168
+ const {
2169
+ isDisabled = false,
2170
+ isCurrent = false,
2171
+ "aria-current": ariaCurrent = "page",
2172
+ children,
2173
+ separator = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Box, { className: "mobius-breadcrumb__separator", "aria-hidden": "true", children: ">" }),
2174
+ ...otherProps
2175
+ } = props;
2176
+ const { itemProps } = {
2177
+ itemProps: {
2178
+ "aria-current": isCurrent ? ariaCurrent : void 0,
2179
+ "aria-disabled": isDisabled || isCurrent,
2180
+ ...otherProps
2181
+ }
2182
+ };
2183
+ const classes = (0, import_dedupe18.default)(
2184
+ "mobius",
2185
+ "mobius-breadcrumb__item",
2186
+ props.className
2187
+ );
2188
+ const child = typeof children === "string" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { ...itemProps, children }) : import_react23.Children.only(children);
2189
+ return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("li", { className: classes, children: [
2190
+ (0, import_react23.cloneElement)(child, {
2191
+ ...child.props,
2192
+ ...itemProps,
2193
+ ref
2194
+ }),
2195
+ !props.isCurrent && separator
2196
+ ] });
2197
+ };
2198
+ BreadcrumbItem.displayName = "BreadcrumbItem";
2199
+
2200
+ // src/components/Button/Button.tsx
2201
+ var import_dedupe19 = __toESM(require("classnames/dedupe"));
2202
+
2203
+ // src/components/Button/Loading.tsx
2204
+ var import_icons5 = require("@simplybusiness/icons");
2205
+ var import_jsx_runtime20 = require("react/jsx-runtime");
2206
+ var Loading = (props) => {
2207
+ const { children } = props;
2208
+ return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
2209
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "mobius-button__icon-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { icon: import_icons5.loading, spin: true, size: "md" }) }),
2210
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(VisuallyHidden, { className: "mobius-button__loading-text", children: "Loading" }),
2211
+ children
2212
+ ] });
2213
+ };
2214
+
2215
+ // src/components/Button/Success.tsx
2216
+ var import_icons6 = require("@simplybusiness/icons");
2217
+ var import_jsx_runtime21 = require("react/jsx-runtime");
2218
+ var Success = () => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
2219
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "mobius-button__icon-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, { icon: import_icons6.tick, size: "md" }) }),
2220
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(VisuallyHidden, { className: "mobius-button__success-text", children: "Success" })
2221
+ ] });
2222
+
2223
+ // src/components/Button/Button.tsx
2224
+ var import_jsx_runtime22 = require("react/jsx-runtime");
2225
+ var Button = ({ ref, ...props }) => {
2226
+ const {
2227
+ children,
2228
+ elementType: Component = "button",
2229
+ isDisabled,
2230
+ isLoading,
2231
+ isSuccess,
2232
+ variant = "primary",
2233
+ size = "md",
2234
+ onPress,
2235
+ onClick,
2236
+ ...otherProps
2237
+ } = props;
2238
+ const { buttonProps } = useButton(props);
2239
+ otherProps.className = (0, import_dedupe19.default)(
2240
+ "mobius",
2241
+ "mobius-button",
2242
+ `--variant-${variant}`,
2243
+ `--size-${size}`,
2244
+ {
2245
+ "--is-disabled": isDisabled,
2246
+ "--is-loading": isLoading,
2247
+ "--is-success": isSuccess && !isLoading
2248
+ },
2249
+ otherProps.className
2250
+ );
2251
+ return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Component, { ref, ...buttonProps, ...otherProps, children: [
2252
+ isLoading ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Loading, { children }) : children,
2253
+ isSuccess && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Success, {})
2254
+ ] });
2255
+ };
2256
+ Button.displayName = "Button";
2257
+
2258
+ // src/components/Checkbox/Checkbox.tsx
2259
+ var import_react24 = require("react");
2260
+ var import_dedupe20 = __toESM(require("classnames/dedupe"));
2261
+ var import_icons7 = require("@simplybusiness/icons");
2262
+ var import_jsx_runtime23 = require("react/jsx-runtime");
2263
+ var Checkbox = ({ ref, ...props }) => {
2264
+ const {
2265
+ id,
2266
+ label,
2267
+ isDisabled,
2268
+ isRequired,
2269
+ isInvalid,
2270
+ onChange,
2271
+ className,
2272
+ errorMessage,
2273
+ selected,
2274
+ defaultSelected = false,
2275
+ isReadOnly,
2276
+ isLastItem,
2277
+ name,
2278
+ value,
2279
+ ["aria-describedby"]: ariaDescribedBy,
2280
+ ...rest
2281
+ } = props;
2282
+ const [checked, setChecked] = (0, import_react24.useState)(defaultSelected);
2283
+ const fallbackRef = (0, import_react24.useRef)(null);
2284
+ const refObj = ref || fallbackRef;
2285
+ const inputId = (0, import_react24.useId)();
2286
+ const isControlled = typeof selected === "boolean";
2287
+ (0, import_react24.useEffect)(() => {
2288
+ if (isControlled) {
2289
+ setChecked(selected);
2290
+ }
2291
+ }, [selected, isControlled]);
2292
+ const validationClasses = useValidationClasses({ isInvalid });
2293
+ const sharedClasses = (0, import_dedupe20.default)(
2294
+ {
2295
+ "--is-disabled": isDisabled,
2296
+ "--is-selected": checked,
2297
+ "--is-required": typeof isRequired === "boolean" && isRequired,
2298
+ "--is-optional": typeof isRequired === "boolean" && !isRequired
2299
+ },
2300
+ validationClasses
2301
+ );
2302
+ const wrapperClasses = (0, import_dedupe20.default)(
2303
+ "mobius",
2304
+ "mobius-checkbox",
2305
+ sharedClasses,
2306
+ className
2307
+ );
2308
+ const labelClasses = (0, import_dedupe20.default)("mobius-checkbox__label", sharedClasses);
2309
+ const inputClasses = (0, import_dedupe20.default)("mobius-checkbox__input", sharedClasses);
2310
+ const iconClasses = (0, import_dedupe20.default)("mobius-checkbox__icon", sharedClasses);
2311
+ const errorMessageId = (0, import_react24.useId)();
2312
+ const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
2313
+ const describedBy = spaceDelimitedList([
2314
+ shouldErrorMessageShow,
2315
+ ariaDescribedBy
2316
+ ]);
2317
+ const labelId = (0, import_react24.useId)();
2318
+ const handleChange = (event) => {
2319
+ setChecked(!checked);
2320
+ if (onChange) {
2321
+ onChange(event, isLastItem);
2322
+ }
2323
+ };
2324
+ return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Stack, { gap: "xs", className: wrapperClasses, children: [
2325
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { className: labelClasses, children: [
2326
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2327
+ "input",
2328
+ {
2329
+ "aria-describedby": describedBy,
2330
+ "aria-errormessage": shouldErrorMessageShow,
2331
+ "aria-invalid": isInvalid,
2332
+ "aria-labelledby": labelId,
2333
+ readOnly: isReadOnly,
2334
+ disabled: isDisabled,
2335
+ ref: refObj,
2336
+ className: inputClasses,
2337
+ onChange: handleChange,
2338
+ type: "checkbox",
2339
+ checked,
2340
+ required: isRequired,
2341
+ id: id || inputId,
2342
+ name,
2343
+ value,
2344
+ ...rest
2345
+ }
2346
+ ),
2347
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
2348
+ Icon,
2349
+ {
2350
+ icon: checked ? import_icons7.squareTick : import_icons7.square,
2351
+ size: "md",
2352
+ className: iconClasses
2353
+ }
2354
+ ),
2355
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { id: labelId, className: "mobius-checkbox__visible-label", children: label })
2356
+ ] }),
2357
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ErrorMessage, { id: errorMessageId, errorMessage })
2358
+ ] });
2359
+ };
2360
+ Checkbox.displayName = "Checkbox";
2361
+
2362
+ // src/components/Checkbox/CheckboxGroup.tsx
2363
+ var import_dedupe21 = __toESM(require("classnames/dedupe"));
2364
+ var import_react25 = require("react");
2365
+ var import_jsx_runtime24 = require("react/jsx-runtime");
2366
+ var CheckboxGroup = ({ ref, ...props }) => {
2367
+ const {
2368
+ label,
2369
+ isDisabled = false,
2370
+ isRequired,
2371
+ isInvalid,
2372
+ orientation = "vertical",
2373
+ onChange,
2374
+ className,
2375
+ errorMessage,
2376
+ children,
2377
+ defaultValue = [],
2378
+ isReadOnly,
2379
+ itemsPerRow,
2380
+ lastItemDisables = false,
2381
+ ...rest
2382
+ } = props;
2383
+ const [selected, setSelected] = (0, import_react25.useState)(defaultValue);
2384
+ const isInitializedRef = (0, import_react25.useRef)(false);
2385
+ const prevDefaultValueRef = (0, import_react25.useRef)(defaultValue);
2386
+ (0, import_react25.useEffect)(() => {
2387
+ const hasChanged = defaultValue.length !== prevDefaultValueRef.current.length || defaultValue.some(
2388
+ (val, index) => val !== prevDefaultValueRef.current[index]
2389
+ );
2390
+ if (hasChanged || !isInitializedRef.current) {
2391
+ setSelected(defaultValue);
2392
+ prevDefaultValueRef.current = defaultValue;
2393
+ isInitializedRef.current = true;
2394
+ }
2395
+ }, [defaultValue]);
2396
+ const checkboxGroupClasses = (0, import_dedupe21.default)(
2397
+ "mobius",
2398
+ "mobius-checkbox-group",
2399
+ className,
2400
+ {
2401
+ "--is-horizontal": orientation === "horizontal",
2402
+ "--is-vertical": orientation === "vertical",
2403
+ "--is-required": typeof isRequired === "boolean" && isRequired,
2404
+ "--is-optional": typeof isRequired === "boolean" && !isRequired
2405
+ }
2406
+ );
2407
+ const validationClasses = useValidationClasses({ isInvalid });
2408
+ const labelClasses = (0, import_dedupe21.default)(
2409
+ {
2410
+ "--is-disabled": isDisabled
2411
+ },
2412
+ validationClasses
2413
+ );
2414
+ const errorMessageId = (0, import_react25.useId)();
2415
+ const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
2416
+ const describedBy = spaceDelimitedList([
2417
+ shouldErrorMessageShow,
2418
+ props["aria-describedby"]
2419
+ ]);
2420
+ const labelId = (0, import_react25.useId)();
2421
+ const handleChange = (event, isLastItem = false) => {
2422
+ const {
2423
+ target: { value, checked }
2424
+ } = event;
2425
+ let newValue = [...selected];
2426
+ if (!checked) {
2427
+ newValue = selected.filter((item) => item !== value);
2428
+ }
2429
+ if (checked) {
2430
+ newValue = [...selected, value];
2431
+ }
2432
+ if (checked && lastItemDisables && isLastItem) {
2433
+ newValue = [value];
2434
+ }
2435
+ setSelected(newValue);
2436
+ onChange?.(newValue);
2437
+ };
2438
+ const childrenArray = import_react25.Children.toArray(children);
2439
+ const lastCheckbox = childrenArray.filter(
2440
+ (child) => (0, import_react25.isValidElement)(child) && child.type === Checkbox
2441
+ ).pop();
2442
+ const lastCheckboxIsChecked = lastCheckbox && selected.includes(lastCheckbox.props.value);
2443
+ return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
2444
+ "div",
2445
+ {
2446
+ ...rest,
2447
+ "aria-labelledby": props["aria-labelledby"] || labelId,
2448
+ ref,
2449
+ className: checkboxGroupClasses,
2450
+ role: "group",
2451
+ style: {
2452
+ "--checkbox-items-per-row": itemsPerRow || import_react25.Children.count(children)
2453
+ },
2454
+ children: [
2455
+ label && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Label, { elementType: "span", id: labelId, className: labelClasses, children: label }),
2456
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "mobius-checkbox-group__wrapper", children: childrenArray.map((child) => {
2457
+ if ((0, import_react25.isValidElement)(child)) {
2458
+ const isLastItem = child === lastCheckbox;
2459
+ const isChildDisabled = isDisabled || lastItemDisables && lastCheckboxIsChecked && !isLastItem;
2460
+ const childProps = child.props;
2461
+ return (0, import_react25.cloneElement)(
2462
+ child,
2463
+ {
2464
+ isDisabled: isChildDisabled,
2465
+ isRequired,
2466
+ isReadOnly,
2467
+ isInvalid,
2468
+ isLastItem,
2469
+ selected: selected.includes(childProps.value),
2470
+ onChange: childProps.onChange || handleChange,
2471
+ "aria-describedby": describedBy
2472
+ }
2473
+ );
2474
+ }
2475
+ return child;
2476
+ }) }),
2477
+ errorMessage && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ErrorMessage, { id: errorMessageId, errorMessage })
2478
+ ]
2479
+ }
2480
+ );
2481
+ };
2482
+ CheckboxGroup.displayName = "CheckboxGroup";
2483
+
2484
+ // src/components/Container/Container.tsx
2485
+ var import_dedupe22 = __toESM(require("classnames/dedupe"));
2486
+ var import_jsx_runtime25 = require("react/jsx-runtime");
2487
+ var Container = ({ ref, ...props }) => {
2488
+ const { elementType: Element = "div", size = "md", ...otherProps } = props;
2489
+ const classes = (0, import_dedupe22.default)(
2490
+ "mobius",
2491
+ "mobius-container",
2492
+ sizeClasses(size),
2493
+ otherProps.className
2494
+ );
2495
+ return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Element, { ref, ...otherProps, className: classes });
2496
+ };
2497
+ Container.displayName = "Container";
2498
+
2499
+ // src/components/DateField/DateField.tsx
2500
+ var import_dedupe23 = __toESM(require("classnames/dedupe"));
2501
+ var import_react26 = require("react");
2502
+
2503
+ // src/components/DateField/validation.ts
2504
+ var convertToDateFormat = (date, format) => {
2505
+ const dateParts = date.split(/[-/]/);
2506
+ const formatParts = format ? format.split(/[-/]/) : ["yyyy", "mm", "dd"];
2507
+ const dateObj = {};
2508
+ const formattedDate = [];
2509
+ for (let i = 0; i < formatParts.length; i++) {
2510
+ dateObj[formatParts[i]] = dateParts[i] ? parseInt(dateParts[i], 10) : 0;
2511
+ }
2512
+ formattedDate.push(dateObj["yyyy"]?.toString() || "0000");
2513
+ formattedDate.push(
2514
+ (dateObj["mm"] < 10 ? "0" : "") + (dateObj["mm"]?.toString() || "00")
2515
+ );
2516
+ formattedDate.push(
2517
+ (dateObj["dd"] < 10 ? "0" : "") + (dateObj["dd"]?.toString() || "00")
2518
+ );
2519
+ return formattedDate.join("-");
2520
+ };
2521
+ var isValidDate = (date, format = "yyyy-mm-dd") => {
2522
+ if (!date) return true;
2523
+ const standardDate = convertToDateFormat(date, format);
2524
+ const [yearStr, monthStr, dayStr] = standardDate.split("-");
2525
+ const year = parseInt(yearStr, 10);
2526
+ const month = parseInt(monthStr, 10);
2527
+ const day = parseInt(dayStr, 10);
2528
+ if (month < 1 || month > 12) {
2529
+ return false;
2530
+ }
2531
+ const daysInMonth = new Date(year, month, 0).getDate();
2532
+ return day > 0 && day <= daysInMonth;
2533
+ };
2534
+
2535
+ // src/components/DateField/DateField.tsx
2536
+ var import_jsx_runtime26 = require("react/jsx-runtime");
2537
+ var MIN_MAX_ERROR = '"min" value should not be greater than "max" value.';
2538
+ var DateField = ({ ref, ...props }) => {
2539
+ const {
2540
+ min,
2541
+ max,
2542
+ format,
2543
+ className,
2544
+ errorMessage,
2545
+ defaultValue,
2546
+ value,
2547
+ ...otherProps
2548
+ } = props;
2549
+ const [error3, setError] = (0, import_react26.useState)(errorMessage);
2550
+ const [isInvalid, setIsInvalid] = (0, import_react26.useState)(void 0);
2551
+ const localRef = (0, import_react26.useRef)(null);
2552
+ const classes = (0, import_dedupe23.default)("mobius-date-field", className);
2553
+ const formattedMin = min ? convertToDateFormat(min, format) : void 0;
2554
+ const formattedMax = max ? convertToDateFormat(max, format) : void 0;
2555
+ const formattedDefaultValue = defaultValue ? convertToDateFormat(defaultValue, format) : void 0;
2556
+ const formattedValue = value ? convertToDateFormat(value, format) : void 0;
2557
+ const setInvalidState = (error4) => {
2558
+ setError(error4);
2559
+ setIsInvalid(true);
2560
+ };
2561
+ const setValidState = () => {
2562
+ setError(props.errorMessage);
2563
+ setIsInvalid(false);
2564
+ };
2565
+ (0, import_react26.useEffect)(() => {
2566
+ if (!isValidDate(min, format)) {
2567
+ setInvalidState(`Invalid min date: ${min}`);
2568
+ return;
2569
+ }
2570
+ if (!isValidDate(max, format)) {
2571
+ setInvalidState(`Invalid max date: ${max}`);
2572
+ return;
2573
+ }
2574
+ if (min && max) {
2575
+ const minDate = new Date(min);
2576
+ const maxDate = new Date(max);
2577
+ if (minDate > maxDate) {
2578
+ setInvalidState(MIN_MAX_ERROR);
2579
+ } else {
2580
+ setValidState();
2581
+ }
2582
+ } else {
2583
+ setValidState();
2584
+ }
2585
+ }, [min, max, format]);
2586
+ const validate = () => {
2587
+ const isValidInput = localRef.current?.checkValidity();
2588
+ if (!isValidInput) {
2589
+ setInvalidState("Invalid date input");
2590
+ } else {
2591
+ setValidState();
2592
+ }
2593
+ };
2594
+ const handleBlur = (event) => {
2595
+ validate();
2596
+ otherProps.onBlur?.(event);
2597
+ };
2598
+ return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
2599
+ TextField,
2600
+ {
2601
+ ref: mergeRefs([localRef, ref]),
2602
+ className: classes,
2603
+ type: "date",
2604
+ min: formattedMin,
2605
+ max: formattedMax,
2606
+ errorMessage: errorMessage ?? error3,
2607
+ isInvalid,
2608
+ defaultValue: formattedDefaultValue,
2609
+ value: formattedValue,
2610
+ onBlur: handleBlur,
2611
+ ...otherProps
2612
+ }
2613
+ );
2614
+ };
2615
+ DateField.displayName = "DateField";
2616
+
2617
+ // src/components/Drawer/Content.tsx
2618
+ var import_jsx_runtime27 = require("react/jsx-runtime");
2619
+ var Content = ({ ref, children, ...otherProps }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { ref, ...otherProps, className: "mobius-drawer__content", children });
2620
+ Content.displayName = "Content";
2621
+
2622
+ // src/components/Drawer/Drawer.tsx
2623
+ var import_dedupe24 = __toESM(require("classnames/dedupe"));
2624
+ var import_react28 = require("react");
2625
+
2626
+ // src/components/Drawer/DrawerContext.tsx
2627
+ var import_react27 = require("react");
2628
+ var DrawerContext = (0, import_react27.createContext)({
2629
+ onClose: () => {
2630
+ },
2631
+ closeLabel: void 0,
2632
+ headerId: void 0
2633
+ });
2634
+
2635
+ // src/components/Drawer/Drawer.tsx
2636
+ var import_jsx_runtime28 = require("react/jsx-runtime");
2637
+ var TRANSITION_CSS_VARIABLE = "--drawer-transition-duration";
2638
+ var Drawer = ({ ref, ...props }) => {
2639
+ const {
2640
+ isOpen,
2641
+ className,
2642
+ closeLabel,
2643
+ direction,
2644
+ announce = "Drawer opened on screen",
2645
+ onOpen,
2646
+ onClose,
2647
+ children
2648
+ } = props;
2649
+ const dialogRef = (0, import_react28.useRef)(null);
2650
+ const [shouldTransition, setShouldTransition] = (0, import_react28.useState)(false);
2651
+ const { close } = useDialog({
2652
+ ref: dialogRef,
2653
+ isOpen,
2654
+ onOpen,
2655
+ onClose,
2656
+ transition: {
2657
+ isEnabled: true,
2658
+ CSSVariable: TRANSITION_CSS_VARIABLE
2659
+ }
2660
+ });
2661
+ const hiddenId = `dialog-screen-reader-announce-${(0, import_react28.useId)()}`;
2662
+ const headerId = `dialog-header-${(0, import_react28.useId)()}`;
2663
+ const dialogClasses = (0, import_dedupe24.default)(
2664
+ "mobius",
2665
+ "mobius-drawer",
2666
+ `--${direction}`,
2667
+ className,
2668
+ {
2669
+ "--should-transition": shouldTransition
2670
+ }
2671
+ );
2672
+ (0, import_react28.useEffect)(() => {
2673
+ setShouldTransition(supportsDialog());
2674
+ }, []);
2675
+ const contextValue = (0, import_react28.useMemo)(
2676
+ () => ({
2677
+ onClose: close,
2678
+ closeLabel,
2679
+ headerId
2680
+ }),
2681
+ [close, closeLabel, headerId]
2682
+ );
2683
+ return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
2684
+ "dialog",
2685
+ {
2686
+ id: (0, import_react28.useId)(),
2687
+ ref: mergeRefs([dialogRef, ref]),
2688
+ onCancel: close,
2689
+ className: dialogClasses,
2690
+ "aria-describedby": hiddenId,
2691
+ "aria-labelledby": headerId,
2692
+ children: [
2693
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { id: hiddenId, children: announce }) }),
2694
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DrawerContext.Provider, { value: contextValue, children })
2695
+ ]
2696
+ }
2697
+ );
2698
+ };
2699
+ Drawer.displayName = "Drawer";
2700
+
2701
+ // src/components/Drawer/useDrawer.ts
2702
+ var import_react29 = require("react");
2703
+ var useDrawer = () => {
2704
+ const { onClose, closeLabel, headerId } = (0, import_react29.useContext)(DrawerContext);
2705
+ return { onClose, closeLabel, headerId };
2706
+ };
2707
+
2708
+ // src/components/Drawer/Header.tsx
2709
+ var import_icons8 = require("@simplybusiness/icons");
2710
+ var import_jsx_runtime29 = require("react/jsx-runtime");
2711
+ var Header = ({ ref, children, ...otherProps }) => {
2712
+ const { onClose, closeLabel, headerId } = useDrawer();
2713
+ return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("header", { ref, ...otherProps, className: "mobius-drawer__header", children: [
2714
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("h2", { id: headerId, children }),
2715
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
2716
+ Button,
2717
+ {
2718
+ "aria-label": "Close",
2719
+ variant: "basic",
2720
+ onPress: onClose,
2721
+ className: "mobius-drawer__close",
2722
+ size: "sm",
2723
+ children: [
2724
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon, { icon: import_icons8.cross }),
2725
+ " ",
2726
+ closeLabel
2727
+ ]
2728
+ }
2729
+ )
2730
+ ] });
2731
+ };
2732
+ Header.displayName = "Header";
2733
+
2734
+ // src/components/Drawer/index.tsx
2735
+ var Drawer2 = Object.assign(Drawer, {
2736
+ Header,
2737
+ Content
2738
+ });
2739
+ Drawer2.displayName = "Drawer";
2740
+
2741
+ // src/components/DropdownMenu/DropdownMenu.tsx
2742
+ var import_react30 = require("react");
2743
+ var import_react_accessible_dropdown_menu_hook = __toESM(require("react-accessible-dropdown-menu-hook"));
2744
+ var import_dedupe25 = __toESM(require("classnames/dedupe"));
2745
+ var import_jsx_runtime30 = require("react/jsx-runtime");
2746
+ var DropdownMenu = ({ ref, ...props }) => {
2747
+ const {
2748
+ elementType: Element = "nav",
2749
+ trigger,
2750
+ label = "Menu",
2751
+ children,
2752
+ ...otherProps
2753
+ } = props;
2754
+ const [activeId, setActiveId] = (0, import_react30.useState)(null);
2755
+ const numberOfItems = import_react30.Children.count(children);
2756
+ const {
2757
+ buttonProps,
2758
+ itemProps,
2759
+ isOpen: open,
2760
+ setIsOpen
2761
+ } = (0, import_react_accessible_dropdown_menu_hook.default)(numberOfItems);
2762
+ const classes = (0, import_dedupe25.default)(
2763
+ "mobius",
2764
+ "mobius-dropdown-menu",
2765
+ otherProps.className
2766
+ );
2767
+ const triggerClasses = (0, import_dedupe25.default)("mobius", "mobius-dropdown-menu__trigger");
2768
+ const listClasses = (0, import_dedupe25.default)("mobius", "mobius-dropdown-menu__list", {
2769
+ "--is-open": open
2770
+ });
2771
+ const handleChildClick = ({ onClick }, index) => {
2772
+ setActiveId(index);
2773
+ setIsOpen(false);
2774
+ if (onClick) {
2775
+ onClick();
2776
+ }
2777
+ };
2778
+ return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Element, { ref, ...otherProps, className: classes, children: [
2779
+ trigger ? (0, import_react30.cloneElement)(trigger, {
2780
+ className: triggerClasses,
2781
+ open,
2782
+ label,
2783
+ ...buttonProps
2784
+ }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Button, { className: triggerClasses, ...buttonProps, children: label }),
2785
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("ul", { className: listClasses, role: "menu", children: import_react30.Children.map(children, (child, index) => {
2786
+ if ((0, import_react30.isValidElement)(child)) {
2787
+ return (0, import_react30.cloneElement)(child, {
2788
+ onClick: () => handleChildClick(child.props, index),
2789
+ active: index === activeId,
2790
+ ...itemProps[index]
2791
+ });
2792
+ }
2793
+ return child;
2794
+ }) })
2795
+ ] });
2796
+ };
2797
+ DropdownMenu.displayName = "DropdownMenu";
2798
+
2799
+ // src/components/DropdownMenu/Item.tsx
2800
+ var import_react31 = require("react");
2801
+ var import_dedupe26 = __toESM(require("classnames/dedupe"));
2802
+ var import_jsx_runtime31 = require("react/jsx-runtime");
2803
+ var Item = ({ ref, ...props }) => {
2804
+ const {
2805
+ elementType: Element = "li",
2806
+ active,
2807
+ onClick,
2808
+ children,
2809
+ ...otherProps
2810
+ } = props;
2811
+ const classes = (0, import_dedupe26.default)(
2812
+ "mobius",
2813
+ "mobius-dropdown-menu__item",
2814
+ { "--is-active": active },
2815
+ otherProps.className
2816
+ );
2817
+ return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Element, { ref, onClick, ...otherProps, children: import_react31.Children.map(children, (child) => {
2818
+ if ((0, import_react31.isValidElement)(child)) {
2819
+ const childClasses = (0, import_dedupe26.default)(
2820
+ child.props.className,
2821
+ classes
2822
+ );
2823
+ return (0, import_react31.cloneElement)(
2824
+ child,
2825
+ {
2826
+ className: childClasses
2827
+ }
2828
+ );
2829
+ }
2830
+ return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: classes, children: child });
2831
+ }) });
2832
+ };
2833
+ Item.displayName = "DropdownMenu.Item";
2834
+
2835
+ // src/components/DropdownMenu/index.tsx
2836
+ var DropdownMenu2 = Object.assign(
2837
+ DropdownMenu,
2838
+ {
2839
+ Item
2840
+ }
2841
+ );
2842
+ DropdownMenu2.displayName = "DropdownMenu";
2843
+
2844
+ // src/components/Fieldset/Fieldset.tsx
2845
+ var import_dedupe27 = __toESM(require("classnames/dedupe"));
2846
+ var import_react32 = require("react");
2847
+ var import_jsx_runtime32 = require("react/jsx-runtime");
2848
+ var useFieldset = (props) => {
2849
+ const { legend } = props;
2850
+ let legendProps = {};
2851
+ let containerProps = {
2852
+ role: "group"
2853
+ };
2854
+ const legendId = (0, import_react32.useId)();
2855
+ if (legend) {
2856
+ legendProps = {
2857
+ ...legendProps,
2858
+ id: legendId
2859
+ };
2860
+ containerProps = {
2861
+ ...containerProps,
2862
+ "aria-labelledby": legendId
2863
+ };
2864
+ }
2865
+ return {
2866
+ legendProps,
2867
+ containerProps
2868
+ };
2869
+ };
2870
+ var Fieldset = ({ ref: _ref, ...props }) => {
2871
+ const {
2872
+ children,
2873
+ legend,
2874
+ legendComponent = /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("legend", {}),
2875
+ ...otherProps
2876
+ } = props;
2877
+ const { legendProps, containerProps } = useFieldset(props);
2878
+ const classes = (0, import_dedupe27.default)("mobius", "mobius-fieldset", props.className);
2879
+ legendProps.className = "mobius-fieldset__legend";
2880
+ return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Flex, { ...containerProps, ...otherProps, className: classes, children: [
2881
+ legend && (0, import_react32.cloneElement)(legendComponent, { ...legendProps }, [legend]),
2882
+ children
2883
+ ] });
2884
+ };
2885
+ Fieldset.displayName = "Fieldset";
2886
+
2887
+ // src/components/Grid/Grid.tsx
2888
+ var import_dedupe28 = __toESM(require("classnames/dedupe"));
2889
+ var import_jsx_runtime33 = require("react/jsx-runtime");
2890
+ var Grid = ({ ref: _ref, ...props }) => {
2891
+ const {
2892
+ columns = 12,
2893
+ gap,
2894
+ columnGap,
2895
+ rowGap,
2896
+ alignContent,
2897
+ alignItems,
2898
+ justifyContent,
2899
+ justifyItems,
2900
+ className,
2901
+ style,
2902
+ ...rest
2903
+ } = props;
2904
+ const classes = (0, import_dedupe28.default)("mobius", "mobius-grid", className);
2905
+ const styles = filterUndefinedProps({
2906
+ boxSizing: "border-box",
2907
+ display: "grid",
2908
+ gridTemplateColumns: `repeat(${columns}, 1fr)`,
2909
+ gap: getSpacingValue(gap),
2910
+ columnGap: getSpacingValue(columnGap),
2911
+ rowGap: getSpacingValue(rowGap),
2912
+ alignContent,
2913
+ alignItems,
2914
+ justifyContent,
2915
+ justifyItems,
2916
+ ...style
2917
+ });
2918
+ return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: styles, className: classes, ...rest });
2919
+ };
2920
+ Grid.displayName = "Grid";
2921
+
2922
+ // src/components/Grid/Item.tsx
2923
+ var import_react33 = require("react");
2924
+ var import_dedupe29 = __toESM(require("classnames/dedupe"));
2925
+ var import_jsx_runtime34 = require("react/jsx-runtime");
2926
+ var getBreakpointMap = (config) => Object.entries(config).reduce(
2927
+ (prev, [key, value]) => {
2928
+ const previous = Object.values(prev);
2929
+ const lastDefined = previous[previous.length - 1];
2930
+ return { ...prev, [key]: value || lastDefined };
2931
+ },
2932
+ {}
2933
+ );
2934
+ var DEFAULT_SPAN = 12;
2935
+ var GridItem = ({ ref: _ref, ...props }) => {
2936
+ const {
2937
+ breakpoint: { size: breakpointSize }
2938
+ } = useBreakpoint();
2939
+ const {
2940
+ span,
2941
+ xs = Array.isArray(span) ? DEFAULT_SPAN : span,
2942
+ sm,
2943
+ md,
2944
+ lg,
2945
+ xl,
2946
+ xxl,
2947
+ alignSelf,
2948
+ justifySelf,
2949
+ className,
2950
+ ...rest
2951
+ } = props;
2952
+ const breakpointMap = getBreakpointMap({
2953
+ xs,
2954
+ sm,
2955
+ md,
2956
+ lg,
2957
+ xl,
2958
+ xxl
2959
+ });
2960
+ const [responsiveSpan, setResponsiveSpan] = (0, import_react33.useState)();
2961
+ const classes = (0, import_dedupe29.default)("mobius-grid__item", className);
2962
+ (0, import_react33.useEffect)(() => {
2963
+ setResponsiveSpan(breakpointMap[breakpointSize]);
2964
+ }, [breakpointSize, breakpointMap]);
2965
+ const styles = {
2966
+ gridColumn: responsiveSpan ? `span ${responsiveSpan}` : void 0,
2967
+ alignSelf,
2968
+ justifySelf
2969
+ };
2970
+ return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { style: { ...styles }, className: classes, ...rest });
2971
+ };
2972
+ GridItem.displayName = "GridItem";
2973
+
2974
+ // src/components/Grid/index.tsx
2975
+ var Grid2 = Object.assign(Grid, {
2976
+ Item: GridItem
2977
+ });
2978
+ Grid2.displayName = "Grid";
2979
+
2980
+ // src/components/Image/Image.tsx
2981
+ var import_dedupe30 = __toESM(require("classnames/dedupe"));
2982
+ var import_jsx_runtime35 = require("react/jsx-runtime");
2983
+ var Image = ({
2984
+ ref,
2985
+ alt,
2986
+ elementType: Component = "img",
2987
+ ...otherProps
2988
+ }) => {
2989
+ const classes = (0, import_dedupe30.default)("mobius", "mobius-image", otherProps.className);
2990
+ return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Component, { alt, ref, ...otherProps, className: classes });
2991
+ };
2992
+ Image.displayName = "Image";
2993
+
2994
+ // src/components/Link/Link.tsx
2995
+ var import_dedupe31 = __toESM(require("classnames/dedupe"));
2996
+ var import_jsx_runtime36 = require("react/jsx-runtime");
2997
+ var Link = ({ ref, ...props }) => {
2998
+ const {
2999
+ isDisabled = false,
3000
+ elementType: Component = "a",
3001
+ style,
3002
+ className,
3003
+ variant = "primary",
3004
+ ...otherProps
3005
+ } = props;
3006
+ const disabledStyles = {
3007
+ pointerEvents: "none"
3008
+ };
3009
+ const styles = { ...style, ...isDisabled && disabledStyles };
3010
+ const classes = (0, import_dedupe31.default)(
3011
+ "mobius",
3012
+ "mobius-link",
3013
+ className,
3014
+ `mobius-link--${variant}`,
3015
+ {
3016
+ "--is-disabled": isDisabled
3017
+ }
3018
+ );
3019
+ return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
3020
+ Component,
3021
+ {
3022
+ ref,
3023
+ style: styles,
3024
+ className: classes,
3025
+ "aria-disabled": isDisabled ? true : void 0,
3026
+ ...otherProps,
3027
+ children: props.children
3028
+ }
3029
+ );
3030
+ };
3031
+ Link.displayName = "Link";
3032
+
3033
+ // src/components/LinkButton/LinkButton.tsx
3034
+ var import_dedupe32 = __toESM(require("classnames/dedupe"));
3035
+ var import_jsx_runtime37 = require("react/jsx-runtime");
3036
+ function LinkButton({
3037
+ href,
3038
+ children,
3039
+ className,
3040
+ elementType = "a",
3041
+ ...rest
3042
+ }) {
3043
+ if (!href) {
3044
+ throw new Error("LinkButton requires a href prop");
3045
+ }
3046
+ const classes = (0, import_dedupe32.default)("mobius", "mobius-link-button", className);
3047
+ return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Button, { elementType, href, className: classes, ...rest, children });
3048
+ }
3049
+
3050
+ // src/components/List/List.tsx
3051
+ var import_react34 = require("react");
3052
+ var import_dedupe33 = __toESM(require("classnames/dedupe"));
3053
+ var import_jsx_runtime38 = require("react/jsx-runtime");
3054
+ var List = ({ ref, ...props }) => {
3055
+ const Component = props.isOrdered ? "ol" : "ul";
3056
+ const { children, icon, ...otherProps } = props;
3057
+ const { isOrdered, liststyletype, isReversed, ...restProps } = otherProps;
3058
+ const mappedProps = {
3059
+ ...restProps,
3060
+ reversed: isReversed
3061
+ };
3062
+ const classes = (0, import_dedupe33.default)(
3063
+ "mobius",
3064
+ "mobius-list",
3065
+ {
3066
+ "--has-icon": icon,
3067
+ [`--is-${liststyletype}`]: liststyletype
3068
+ },
3069
+ otherProps.className
3070
+ );
3071
+ return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Component, { ref, ...mappedProps, className: classes, children: import_react34.Children.map(children, (child) => {
3072
+ if ((0, import_react34.isValidElement)(child)) {
3073
+ return (0, import_react34.cloneElement)(child, {
3074
+ parentIcon: icon
3075
+ });
3076
+ }
3077
+ return child;
3078
+ }) });
3079
+ };
3080
+ List.displayName = "List";
3081
+
3082
+ // src/components/List/ListItem.tsx
3083
+ var import_dedupe34 = __toESM(require("classnames/dedupe"));
3084
+ var import_jsx_runtime39 = require("react/jsx-runtime");
3085
+ var ListItem = ({ ref, ...props }) => {
3086
+ const { parentIcon, icon, children, ...otherProps } = props;
3087
+ const iconContent = icon || parentIcon;
3088
+ const classes = (0, import_dedupe34.default)(
3089
+ "mobius",
3090
+ "mobius-list__item",
3091
+ {
3092
+ "--has-icon": iconContent
3093
+ },
3094
+ props.className
3095
+ );
3096
+ const contentClasses = (0, import_dedupe34.default)("mobius", "mobius-list__item-content");
3097
+ const iconClasses = (0, import_dedupe34.default)("mobius", "mobius-list__icon");
3098
+ if (iconContent) {
3099
+ return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("li", { ref, ...otherProps, className: classes, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: contentClasses, children: [
3100
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: iconClasses, children: iconContent }),
3101
+ children
3102
+ ] }) });
3103
+ }
3104
+ return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("li", { ref, ...otherProps, className: classes, children });
3105
+ };
3106
+ ListItem.displayName = "ListItem";
3107
+
3108
+ // src/components/LoadingIndicator/LoadingIndicator.tsx
3109
+ var import_dedupe35 = __toESM(require("classnames/dedupe"));
3110
+ var import_icons9 = require("@simplybusiness/icons");
3111
+ var import_jsx_runtime40 = require("react/jsx-runtime");
3112
+ var LoadingIndicator = ({ ref, ...props }) => {
3113
+ const { icon = import_icons9.loading, ...otherProps } = props;
3114
+ const classes = (0, import_dedupe35.default)(
3115
+ "mobius",
3116
+ "mobius-loading-indicator",
3117
+ otherProps.className
3118
+ );
3119
+ return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Icon, { icon, spin: true, ref, ...otherProps, className: classes });
3120
+ };
3121
+ LoadingIndicator.displayName = "LoadingIndicator";
3122
+
3123
+ // src/components/Logo/Logo.tsx
3124
+ var import_dedupe36 = __toESM(require("classnames/dedupe"));
3125
+ var import_jsx_runtime41 = require("react/jsx-runtime");
3126
+ var Logo = ({ ref, ...props }) => {
3127
+ const { className, width, height, ...otherProps } = props;
3128
+ const classes = (0, import_dedupe36.default)("mobius", "mobius-logo", className);
3129
+ return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
3130
+ "svg",
3131
+ {
3132
+ width,
3133
+ height,
3134
+ ref,
3135
+ className: classes,
3136
+ viewBox: "0 0 144 37",
3137
+ ...otherProps,
3138
+ children: [
3139
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
3140
+ "linearGradient",
3141
+ {
3142
+ id: "logo-gradient",
3143
+ x1: "83.508%",
3144
+ x2: "11.891%",
3145
+ y1: "76.042%",
3146
+ y2: "26.973%",
3147
+ children: [
3148
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("stop", { stopColor: "#4632D8", offset: "0%" }),
3149
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("stop", { stopColor: "#9084E8", offset: "100%" })
3150
+ ]
3151
+ }
3152
+ ) }),
3153
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("g", { children: [
3154
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
3155
+ "path",
3156
+ {
3157
+ fill: "#0E0A2B",
3158
+ d: "M68.788 11.307c0-2.486-2.027-3.345-3.833-4.1-1.332-.562-2.471-1.036-2.471-2.072 0-.873.77-1.42 1.968-1.42 1.051 0 1.806.444 2.294.725.193.103.474.222.755.133.192-.06.34-.207.459-.444l.34-.621c.266-.474.163-.888-.281-1.2-.533-.384-1.88-1.05-3.537-1.05-2.738 0-4.647 1.643-4.647 4.01 0 2.413 2.012 3.301 3.788 4.07 1.347.593 2.516 1.096 2.516 2.161 0 .873-.754 1.45-1.924 1.45-1.287 0-2.22-.65-2.678-.961l-.03-.015c-.533-.296-.903-.237-1.228.192l-.415.607c-.444.607-.148.992.134 1.228.828.637 2.427 1.392 4.203 1.392 2.708 0 4.587-1.673 4.587-4.085zm4.44 2.975V6.186c0-.577-.31-.888-.873-.888h-.843c-.563 0-.874.311-.874.888v8.096c0 .577.296.888.874.888h.843c.563 0 .873-.311.873-.888zM71.482 4.203h.755c.518 0 .814-.281.814-.8v-.517c0-.518-.296-.814-.814-.814h-.755c-.518 0-.8.281-.8.814v.518c.016.518.297.8.8.8zM92.645 24.48h.755c.518 0 .814-.282.814-.8v-.518c0-.518-.296-.814-.814-.814h-.755c-.518 0-.799.282-.799.814v.518c0 .518.281.8.8.8zm-6.26-19.42c-1.539 0-2.397.962-2.945 1.895-.444-1.243-1.435-1.895-2.871-1.895-1.362 0-2.146.888-2.723 1.806v-.68c0-.578-.311-.889-.873-.889h-.74c-.563 0-.873.311-.873.888v8.096c0 .577.295.888.873.888h.843c.577 0 .873-.311.873-.888V10.73c0-2.25.888-3.271 2.058-3.271 1.006 0 1.198.71 1.198 1.85v4.987c0 .578.311.888.888.888h.844c.577 0 .873-.31.873-.888v-3.551c0-2.25.873-3.271 2.013-3.271 1.036 0 1.243.74 1.243 1.85v4.987c0 .577.31.888.888.888h.814c.577 0 .888-.31.888-.888V8.835c0-2.5-1.095-3.774-3.27-3.774zm10.804 10.33c2.679 0 4.558-2.13 4.558-5.164 0-3.094-1.776-5.166-4.425-5.166-1.761 0-2.708 1.036-3.049 1.51v-.533c0-.459-.34-.755-.873-.755h-.607c-.562 0-.888.326-.888.888v11.9c0 .576.311.887.888.887h.814c.578 0 .888-.31.888-.888v-3.404c0-.207-.014-.4-.014-.532.325.429 1.184 1.258 2.708 1.258zm-2.768-5.105c0-1.362.622-2.975 2.368-2.975 1.377 0 2.309 1.184 2.309 2.945 0 1.746-.947 2.916-2.338 2.916-1.54 0-2.339-1.45-2.339-2.886zm12.965 4.07v-.652c0-.444-.252-.725-.681-.784-.34-.03-.68-.192-.68-1.066v-9.47c0-.563-.326-.888-.874-.888h-.843c-.563 0-.874.31-.874.888v9.679c0 1.258.34 2.16 1.021 2.678.637.489 1.466.533 2.013.533.607 0 .918-.325.918-.917zm9.457-9.073h-.962c-.518 0-.844.237-.977.726l-1.717 4.972c-.089.311-.192.71-.251.977-.074-.281-.193-.71-.296-1.021l-1.835-4.943c-.163-.489-.489-.71-.977-.71h-1.036c-.415 0-.622.162-.71.295-.09.134-.163.385.014.755l3.685 8.57-.34.813c-.252.592-.77 1.229-1.45 1.229-.267 0-.474-.09-.652-.163h-.014c-.43-.104-.755.074-.962.488l-.163.415c-.119.251-.148.517-.06.725.075.192.237.34.474.429.326.118.814.296 1.391.296 1.628 0 2.975-.977 3.597-2.605l3.996-10.226c.103-.296.088-.563-.045-.755-.163-.163-.4-.267-.71-.267zM67.634 28.297c.977-.592 1.54-1.658 1.54-2.886 0-2.176-1.688-3.567-4.293-3.567h-4.04c-.562 0-.873.311-.873.888v11.899c0 .577.296.888.873.888h4.1c1.346 0 2.5-.34 3.33-.962.932-.71 1.42-1.761 1.42-3.049.03-1.524-.784-2.767-2.057-3.211zm-5.017-.962v-3.212h2.25c1.02 0 1.628.592 1.628 1.584 0 .991-.607 1.643-1.57 1.643h-2.308v-.015zm4.396 4.01c0 1.155-.71 1.865-1.865 1.865h-2.53v-3.714h2.53c1.14.014 1.865.74 1.865 1.85zm12.638-5.712h-.814c-.577 0-.888.31-.888.888v3.655c0 2.176-1.361 3.182-2.634 3.182-1.006 0-1.406-.547-1.406-1.88v-4.942c0-.578-.31-.888-.888-.888h-.814c-.562 0-.888.325-.888.888v5.431c0 2.516 1.17 3.774 3.463 3.774a3.937 3.937 0 003.286-1.761v.651c0 .577.296.888.873.888h.74c.577 0 .888-.31.888-.888v-8.095c-.03-.578-.355-.903-.918-.903zm6.956 3.937c-.917-.311-1.702-.592-1.702-1.184 0-.74.77-.859 1.229-.859.784 0 1.406.281 1.805.474.548.237.947.118 1.184-.34l.193-.341c.251-.518.133-.947-.326-1.184-.326-.178-1.288-.71-2.753-.71-2.279 0-3.803 1.213-3.803 3.004 0 2.042 1.731 2.65 3.137 3.138.903.325 1.687.592 1.687 1.169 0 .547-.488.902-1.258.902-.917 0-1.613-.37-2.057-.621l-.059-.03c-.533-.28-.903-.207-1.213.222l-.222.34c-.178.252-.237.504-.178.726.044.207.192.37.4.488a5.774 5.774 0 003.285 1.007c2.235 0 3.789-1.273 3.789-3.079-.03-2.042-1.761-2.649-3.138-3.122zm6.897-3.937h-.844c-.562 0-.873.31-.873.888v8.095c0 .577.296.888.873.888h.844c.577 0 .873-.31.873-.888v-8.095c0-.563-.31-.888-.873-.888zm9.324-.237c-1.924 0-2.93 1.154-3.36 1.806v-.681c0-.577-.31-.888-.873-.888h-.74c-.563 0-.873.31-.873.888v8.095c0 .577.296.888.873.888h.843c.578 0 .874-.31.874-.888v-3.744c0-1.79 1.14-3.078 2.708-3.078 1.021 0 1.436.547 1.436 1.88v4.942c0 .577.31.888.887.888h.814c.578 0 .888-.31.888-.888v-5.431c0-2.516-1.169-3.789-3.477-3.789zm10.448 0c-2.96 0-5.032 2.131-5.032 5.165 0 2.99 2.235 5.165 5.313 5.165 1.48 0 2.635-.533 3.345-.977.444-.266.562-.695.296-1.198l-.222-.385c-.266-.459-.651-.563-1.184-.31h-.015a3.885 3.885 0 01-2.042.606c-1.54 0-2.634-.962-2.812-2.472h5.816a.935.935 0 00.933-.917c.014-2.827-1.717-4.677-4.396-4.677zm-.044 2.013c1.065 0 1.79.77 1.864 1.968h-4.1c.253-1.213 1.096-1.968 2.236-1.968zm10.152 2.16c-.917-.31-1.702-.591-1.702-1.183 0-.74.77-.859 1.229-.859.784 0 1.406.281 1.805.474.548.237.947.118 1.184-.34l.192-.341c.252-.518.134-.947-.325-1.184-.326-.178-1.288-.71-2.753-.71-2.279 0-3.803 1.213-3.803 3.004 0 2.042 1.731 2.65 3.137 3.138.903.325 1.687.592 1.687 1.169 0 .547-.488.902-1.258.902-.917 0-1.613-.37-2.057-.621l-.059-.03c-.533-.28-.903-.207-1.214.222l-.222.34c-.177.252-.236.504-.177.726.044.207.192.37.4.488a5.774 5.774 0 003.285 1.007c2.235 0 3.789-1.273 3.789-3.079-.015-2.042-1.747-2.649-3.138-3.122zm8.791 0c-.917-.31-1.702-.591-1.702-1.183 0-.74.77-.859 1.229-.859.784 0 1.406.281 1.805.474.548.237.947.118 1.184-.34l.192-.341c.252-.518.134-.947-.325-1.184-.326-.178-1.288-.71-2.753-.71-2.279 0-3.803 1.213-3.803 3.004 0 2.042 1.731 2.65 3.137 3.138.903.325 1.687.592 1.687 1.169 0 .547-.488.902-1.258.902-.917 0-1.613-.37-2.057-.621l-.059-.03c-.533-.28-.903-.207-1.214.222l-.222.34c-.177.252-.236.504-.177.726.044.207.192.37.4.488a5.774 5.774 0 003.285 1.007c2.235 0 3.789-1.273 3.789-3.079-.015-2.042-1.747-2.649-3.138-3.122z"
3159
+ }
3160
+ ),
3161
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
3162
+ "path",
3163
+ {
3164
+ fill: "url(#logo-gradient)",
3165
+ d: "M22.747 22.288c.607 1.214.918 2.59.918 4.144 0 1.45-.267 2.827-.8 4.1a10.018 10.018 0 01-2.279 3.36c-.991.961-2.235 1.73-3.744 2.278-1.51.563-3.167.829-4.988.829-2.264 0-4.35-.385-6.29-1.14-1.938-.77-3.492-1.598-4.676-2.5-.31-.252-.548-.504-.696-.77a1.332 1.332 0 01-.177-.71.718.718 0 010-.252c.03-.37.207-.785.547-1.199l1.14-1.598c.4-.548.829-.844 1.288-.918a.896.896 0 01.222-.03c.4 0 .873.163 1.39.474 2.487 1.776 4.914 2.679 7.252 2.679 1.643 0 2.96-.385 3.922-1.14.962-.755 1.45-1.746 1.45-2.96 0-.725-.192-1.39-.562-1.983a5.347 5.347 0 00-1.539-1.569 18.207 18.207 0 00-2.235-1.287 56.102 56.102 0 00-2.649-1.214c-.917-.4-1.835-.814-2.752-1.258a19.282 19.282 0 01-2.62-1.539 14.014 14.014 0 01-2.22-1.924c-.666-.695-1.169-1.539-1.554-2.545-.37-.992-.562-2.087-.562-3.271 0-2.042.533-3.863 1.598-5.446 1.066-1.584 2.516-2.797 4.336-3.641C8.303.414 10.345 0 12.624 0c1.91 0 3.685.281 5.358.844 1.657.562 2.96 1.198 3.892 1.88.68.473 1.006 1.035 1.006 1.671 0 .385-.118.785-.37 1.2l-.917 1.657c-.385.74-.903 1.11-1.554 1.11-.4 0-.83-.133-1.318-.4a42.421 42.421 0 00-1.687-.947c-.473-.237-1.14-.488-1.998-.71a9.458 9.458 0 00-2.56-.356c-1.672 0-3.004.37-3.981 1.11-.992.74-1.48 1.717-1.48 2.946 0 .902.31 1.701.932 2.412.622.695 1.421 1.302 2.398 1.79.977.489 2.057.977 3.256 1.466a54.048 54.048 0 013.552 1.628 20.795 20.795 0 013.24 2.042c.948.755 1.732 1.732 2.354 2.945zm31.257 2.945c0 3.197-1.155 6.083-3.256 8.14-2.265 2.205-5.506 3.36-9.368 3.36H30.71c-2.443 0-4.278-1.836-4.278-4.278V4.53c0-1.2.43-2.28 1.214-3.064C28.43.681 29.51.252 30.709.252h9.013c3.419 0 6.32 1.095 8.377 3.182 1.909 1.923 2.945 4.558 2.945 7.429 0 2.294-.622 4.203-1.91 5.816 1.377.77 2.487 1.776 3.286 2.99 1.066 1.583 1.584 3.448 1.584 5.564zm-12.106-7.68c.044-.03 4.913-3.02 4.913-6.675 0-1.761-.607-3.345-1.717-4.455-1.568-1.584-3.788-1.924-5.372-1.924H30.68v28h10.7c2.738 0 4.958-.754 6.408-2.16 1.273-1.243 1.983-3.049 1.983-5.106 0-1.272-.296-2.353-.858-3.196v-.03c-1.362-2.353-6.838-3.774-6.897-3.789l-.844-.222.726-.444z"
3166
+ }
3167
+ ),
3168
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
3169
+ "path",
3170
+ {
3171
+ fill: "#0E0A2B",
3172
+ d: "M138.199 25.455c0-.4.074-.784.222-1.14.148-.354.355-.665.606-.932.267-.266.563-.473.903-.621.34-.148.725-.222 1.11-.222.4 0 .784.074 1.125.222.355.148.666.355.917.621.267.267.474.578.622.933.148.355.222.74.222 1.14 0 .399-.074.784-.222 1.139a2.86 2.86 0 01-.622.932 3.087 3.087 0 01-.917.637 2.646 2.646 0 01-1.125.236c-.4 0-.77-.074-1.11-.236a2.777 2.777 0 01-.903-.637 2.821 2.821 0 01-.606-.932 2.898 2.898 0 01-.222-1.14zm.71 0c0 .326.06.622.163.903.103.281.266.518.459.725a2.051 2.051 0 001.524.666c.31 0 .592-.059.858-.177a2.175 2.175 0 001.155-1.214c.118-.281.162-.577.162-.903 0-.325-.059-.621-.162-.902a2.422 2.422 0 00-.46-.726 2.112 2.112 0 00-.695-.488 2.073 2.073 0 00-.858-.178c-.31 0-.592.06-.844.178a2.051 2.051 0 00-.68.488 2.45 2.45 0 00-.46.726 2.636 2.636 0 00-.162.902zm1.154-1.14c0-.221.119-.34.34-.34h.889c.296 0 .532.09.695.252.178.163.267.4.267.68a.623.623 0 01-.06.297.557.557 0 01-.133.222.512.512 0 01-.163.148c-.059.044-.118.059-.162.074v.014l.03.03c.014.015.014.03.029.06l.044.088.34.666c.06.118.075.207.045.281-.03.074-.104.104-.207.104h-.104c-.192 0-.31-.089-.385-.252l-.384-.829h-.4v.74c0 .222-.104.34-.31.34h-.06c-.207 0-.31-.118-.31-.34v-2.234zm1.051 1.037c.133 0 .252-.045.31-.119.075-.074.104-.192.104-.325s-.03-.252-.103-.326a.413.413 0 00-.296-.118h-.385v.873h.37v.015z"
3173
+ }
3174
+ )
3175
+ ] })
3176
+ ]
3177
+ }
3178
+ );
3179
+ };
3180
+ Logo.displayName = "Logo";
3181
+
3182
+ // src/components/Modal/Content.tsx
3183
+ var import_jsx_runtime42 = require("react/jsx-runtime");
3184
+ var Content2 = ({ ref, children, ...otherProps }) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { ref, ...otherProps, className: "mobius-modal__content", children });
3185
+ Content2.displayName = "Content";
3186
+
3187
+ // src/components/Modal/Header.tsx
3188
+ var import_icons10 = require("@simplybusiness/icons");
3189
+
3190
+ // src/components/Modal/useModal.ts
3191
+ var import_react36 = require("react");
3192
+
3193
+ // src/components/Modal/ModalContext.tsx
3194
+ var import_react35 = require("react");
3195
+ var ModalContext = (0, import_react35.createContext)({
3196
+ onClose: () => {
3197
+ },
3198
+ closeLabel: void 0
3199
+ });
3200
+
3201
+ // src/components/Modal/useModal.ts
3202
+ var useModal = () => {
3203
+ const { onClose, closeLabel } = (0, import_react36.useContext)(ModalContext);
3204
+ return { onClose, closeLabel };
3205
+ };
3206
+
3207
+ // src/components/Modal/Header.tsx
3208
+ var import_jsx_runtime43 = require("react/jsx-runtime");
3209
+ var Header2 = ({ ref, children, ...otherProps }) => {
3210
+ const { onClose, closeLabel } = useModal();
3211
+ return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("header", { ref, ...otherProps, className: "mobius-modal__header", children: [
3212
+ children,
3213
+ /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
3214
+ Button,
3215
+ {
3216
+ "aria-label": "Close",
3217
+ variant: "basic",
3218
+ onPress: onClose,
3219
+ className: "mobius-modal__close",
3220
+ children: [
3221
+ /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Icon, { icon: import_icons10.cross }),
3222
+ " ",
3223
+ closeLabel
3224
+ ]
3225
+ }
3226
+ )
3227
+ ] });
3228
+ };
3229
+ Header2.displayName = "Header";
3230
+
3231
+ // src/components/Modal/Modal.tsx
3232
+ var import_dedupe37 = __toESM(require("classnames/dedupe"));
3233
+ var import_react37 = require("react");
3234
+ var import_jsx_runtime44 = require("react/jsx-runtime");
3235
+ var TRANSITION_CSS_VARIABLE2 = "--modal-transition-duration";
3236
+ var Modal = ({ ref, ...props }) => {
3237
+ const {
3238
+ isOpen,
3239
+ onClose,
3240
+ onOpen,
3241
+ children,
3242
+ className,
3243
+ closeLabel,
3244
+ isFullScreen,
3245
+ animation,
3246
+ ...rest
3247
+ } = props;
3248
+ const [shouldTransition, setShouldTransition] = (0, import_react37.useState)(false);
3249
+ (0, import_react37.useEffect)(() => {
3250
+ setShouldTransition(supportsDialog());
3251
+ }, []);
3252
+ const dialogRef = (0, import_react37.useRef)(null);
3253
+ const { close } = useDialog({
3254
+ ref: dialogRef,
3255
+ isOpen,
3256
+ onOpen,
3257
+ onClose,
3258
+ transition: {
3259
+ isEnabled: !!animation,
3260
+ CSSVariable: TRANSITION_CSS_VARIABLE2
3261
+ }
3262
+ });
3263
+ const modalClasses = (0, import_dedupe37.default)(
3264
+ "mobius",
3265
+ "mobius-modal",
3266
+ {
3267
+ "--no-dialog-support": !shouldTransition,
3268
+ // This class is used to correctly position modal in x/y middle on iOS <= 15.2
3269
+ "--should-transition": shouldTransition && animation,
3270
+ "--slide-up": animation === "slideUp",
3271
+ "--fade": animation === "fade",
3272
+ "--is-fullscreen": isFullScreen
3273
+ },
3274
+ className
3275
+ );
3276
+ const contextValue = (0, import_react37.useMemo)(
3277
+ () => ({
3278
+ onClose: close,
3279
+ closeLabel
3280
+ }),
3281
+ [close, closeLabel]
3282
+ );
3283
+ return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
3284
+ "dialog",
3285
+ {
3286
+ ref: mergeRefs([dialogRef, ref]),
3287
+ onCancel: close,
3288
+ className: modalClasses,
3289
+ ...rest,
3290
+ children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ModalContext.Provider, { value: contextValue, children })
3291
+ }
3292
+ );
3293
+ };
3294
+ Modal.displayName = "Modal";
3295
+
3296
+ // src/components/Modal/index.tsx
3297
+ var Modal2 = Object.assign(Modal, {
3298
+ Header: Header2,
3299
+ Content: Content2
3300
+ });
3301
+ Modal2.displayName = "Modal";
3302
+
3303
+ // src/components/NumberField/NumberField.tsx
3304
+ var import_dedupe38 = __toESM(require("classnames/dedupe"));
3305
+ var import_react38 = require("react");
3306
+ var import_jsx_runtime45 = require("react/jsx-runtime");
3307
+ var NumberField = ({ ref, ...props }) => {
3308
+ const {
3309
+ minValue,
3310
+ maxValue,
3311
+ step,
3312
+ defaultValue,
3313
+ hideSpinButtons,
3314
+ className,
3315
+ ...otherProps
3316
+ } = props;
3317
+ const {
3318
+ onFocus: customOnFocus,
3319
+ onBlur: customOnBlur,
3320
+ ...rest
3321
+ } = otherProps;
3322
+ const focusedInputRef = (0, import_react38.useRef)(null);
3323
+ const wheelHandler = (0, import_react38.useCallback)((ev) => ev.preventDefault(), []);
3324
+ (0, import_react38.useEffect)(() => {
3325
+ return () => {
3326
+ focusedInputRef.current?.removeEventListener("wheel", wheelHandler);
3327
+ focusedInputRef.current = null;
3328
+ };
3329
+ }, [wheelHandler]);
3330
+ const containerClasses = (0, import_dedupe38.default)("mobius-number-field", className, {
3331
+ "--hide-spin-buttons": hideSpinButtons
3332
+ });
3333
+ const handleBeforeInput = (event) => {
3334
+ const { data } = event.nativeEvent;
3335
+ if (step && Number.isInteger(step) && data === ".") {
3336
+ event.preventDefault();
3337
+ }
3338
+ if (minValue && minValue >= 0 && data === "-") {
3339
+ event.preventDefault();
3340
+ }
3341
+ };
3342
+ const handleBlur = (event) => {
3343
+ const { value } = event.target;
3344
+ const numValue = parseFloat(value);
3345
+ if (step && step > 1 && !isNaN(numValue)) {
3346
+ const baseValue = minValue ?? 0;
3347
+ const steps = Math.round((numValue - baseValue) / step);
3348
+ const snappedValue = baseValue + steps * step;
3349
+ if (snappedValue !== numValue) {
3350
+ event.target.value = snappedValue.toString();
3351
+ const changeEvent = new Event("change", { bubbles: true });
3352
+ event.target.dispatchEvent(changeEvent);
3353
+ const syntheticChangeEvent = {
3354
+ ...event,
3355
+ target: event.target,
3356
+ currentTarget: event.currentTarget
3357
+ };
3358
+ otherProps.onChange?.(syntheticChangeEvent);
3359
+ }
3360
+ }
3361
+ customOnBlur?.(event);
3362
+ };
3363
+ const forwardedProps = {
3364
+ ...rest,
3365
+ onFocus: (e) => {
3366
+ const el = e.currentTarget;
3367
+ focusedInputRef.current?.removeEventListener("wheel", wheelHandler);
3368
+ focusedInputRef.current = el;
3369
+ el.addEventListener("wheel", wheelHandler, { passive: false });
3370
+ customOnFocus?.(e);
3371
+ },
3372
+ onBlur: (e) => handleBlur(e)
3373
+ };
3374
+ return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
3375
+ TextField,
3376
+ {
3377
+ ...forwardedProps,
3378
+ className: containerClasses,
3379
+ onBeforeInput: handleBeforeInput,
3380
+ type: "number",
3381
+ min: minValue ?? void 0,
3382
+ max: maxValue ?? void 0,
3383
+ step,
3384
+ ref,
3385
+ defaultValue: defaultValue != null ? defaultValue?.toString() : defaultValue
3386
+ }
3387
+ );
3388
+ };
3389
+ NumberField.displayName = "NumberField";
3390
+
3391
+ // src/components/Option/Option.tsx
3392
+ var import_jsx_runtime46 = require("react/jsx-runtime");
3393
+ var Option2 = ({ ref, ...props }) => {
3394
+ const { isDisabled, ...rest } = props;
3395
+ const mappedProps = {
3396
+ ...rest,
3397
+ disabled: isDisabled
3398
+ };
3399
+ return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("option", { ...mappedProps, ref });
3400
+ };
3401
+ Option2.displayName = "Option";
3402
+
3403
+ // src/components/PasswordField/PasswordField.tsx
3404
+ var import_dedupe39 = __toESM(require("classnames/dedupe"));
3405
+ var import_react39 = require("react");
3406
+
3407
+ // src/components/PasswordField/ShowHideButton.tsx
3408
+ var import_icons11 = require("@simplybusiness/icons");
3409
+ var import_jsx_runtime47 = require("react/jsx-runtime");
3410
+ var ShowHideButton = ({
3411
+ show = false,
3412
+ onClick
3413
+ }) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
3414
+ "button",
3415
+ {
3416
+ className: "mobius-password-field__show-button",
3417
+ type: "button",
3418
+ onClick: (e) => {
3419
+ e.preventDefault();
3420
+ onClick();
3421
+ },
3422
+ "aria-label": `${show ? "Hide" : "Show"} password`,
3423
+ "data-testid": "show-hide-button",
3424
+ children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Icon, { icon: show ? import_icons11.eyeSlash : import_icons11.eye, "aria-hidden": "true" })
3425
+ }
3426
+ );
3427
+
3428
+ // src/components/PasswordField/PasswordField.tsx
3429
+ var import_jsx_runtime48 = require("react/jsx-runtime");
3430
+ var PasswordField = ({
3431
+ ref,
3432
+ className,
3433
+ ...props
3434
+ }) => {
3435
+ const [show, setShow] = (0, import_react39.useState)(false);
3436
+ const type = show ? "text" : "password";
3437
+ const classes = (0, import_dedupe39.default)("mobius-password-field", className);
3438
+ const localRef = (0, import_react39.useRef)(null);
3439
+ const handleShowHideButtonClick = () => {
3440
+ const selectionStart = localRef.current?.selectionStart;
3441
+ const selectionEnd = localRef.current?.selectionEnd;
3442
+ setShow((oldShow) => !oldShow);
3443
+ requestAnimationFrame(() => {
3444
+ localRef.current?.focus();
3445
+ if (selectionStart != null && selectionEnd != null) {
3446
+ localRef.current?.setSelectionRange(selectionStart, selectionEnd);
3447
+ }
3448
+ });
3449
+ };
3450
+ return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
3451
+ TextField,
3452
+ {
3453
+ ref: mergeRefs([localRef, ref]),
3454
+ className: classes,
3455
+ ...props,
3456
+ type,
3457
+ suffixInside: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ShowHideButton, { onClick: handleShowHideButtonClick, show })
3458
+ }
3459
+ );
3460
+ };
3461
+ PasswordField.displayName = "PasswordField";
3462
+
3463
+ // src/components/Popover/Popover.tsx
3464
+ var import_react40 = require("@floating-ui/react");
3465
+ var import_icons12 = require("@simplybusiness/icons");
3466
+ var import_dedupe40 = __toESM(require("classnames/dedupe"));
3467
+ var import_react41 = require("react");
3468
+ var import_jsx_runtime49 = require("react/jsx-runtime");
3469
+ var OFFSET_FROM_CONTENT_DEFAULT = 10;
3470
+ var Popover = (props) => {
3471
+ const { trigger, children, onOpen, onClose, className } = props;
3472
+ const arrowRef = (0, import_react41.useRef)(null);
3473
+ const [isOpen, setIsOpen] = (0, import_react41.useState)(false);
3474
+ const { refs, floatingStyles, context } = (0, import_react40.useFloating)({
3475
+ open: isOpen,
3476
+ onOpenChange: setIsOpen,
3477
+ whileElementsMounted: import_react40.autoUpdate,
3478
+ middleware: [
3479
+ (0, import_react40.arrow)({
3480
+ element: arrowRef
3481
+ }),
3482
+ (0, import_react40.offset)(OFFSET_FROM_CONTENT_DEFAULT),
3483
+ (0, import_react40.shift)(),
3484
+ (0, import_react40.flip)()
3485
+ ]
3486
+ });
3487
+ const dismiss = (0, import_react40.useDismiss)(context, {
3488
+ bubbles: true,
3489
+ outsidePress: (event) => {
3490
+ const toggle = refs.reference.current;
3491
+ const isToggleClick = !toggle?.contains(event.target);
3492
+ if (isToggleClick) {
3493
+ onClose?.();
3494
+ }
3495
+ return true;
3496
+ }
3497
+ });
3498
+ const { getReferenceProps, getFloatingProps } = (0, import_react40.useInteractions)([dismiss]);
3499
+ const containerClasses = (0, import_dedupe40.default)(
3500
+ "mobius",
3501
+ "mobius-popover__container",
3502
+ className
3503
+ );
3504
+ const toggleVisibility = () => {
3505
+ if (isOpen) {
3506
+ setIsOpen(false);
3507
+ onClose?.();
3508
+ return;
3509
+ }
3510
+ setIsOpen(true);
3511
+ onOpen?.();
3512
+ };
3513
+ const triggerComponent = (0, import_react41.cloneElement)(trigger, {
3514
+ ref: refs.setReference,
3515
+ className: (0, import_dedupe40.default)(
3516
+ trigger.props.className,
3517
+ "mobius-popover__toggle"
3518
+ ),
3519
+ onClick: toggleVisibility,
3520
+ ...getReferenceProps()
3521
+ });
3522
+ useWindowEvent("keydown", (e) => {
3523
+ if (e.key === "Escape") {
3524
+ onClose?.();
3525
+ e.preventDefault();
3526
+ e.stopPropagation();
3527
+ }
3528
+ });
3529
+ return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
3530
+ triggerComponent,
3531
+ isOpen && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
3532
+ "div",
3533
+ {
3534
+ className: containerClasses,
3535
+ ref: refs.setFloating,
3536
+ style: floatingStyles,
3537
+ ...getFloatingProps(),
3538
+ children: [
3539
+ /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "mobius-popover", children: [
3540
+ /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("header", { className: "mobius-popover__header", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
3541
+ Button,
3542
+ {
3543
+ type: "button",
3544
+ className: "mobius-popover__close-button",
3545
+ onClick: toggleVisibility,
3546
+ "aria-label": "Close",
3547
+ variant: "ghost",
3548
+ children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
3549
+ Icon,
3550
+ {
3551
+ icon: import_icons12.cross,
3552
+ size: "md",
3553
+ className: "mobius-popover__close-icon"
3554
+ }
3555
+ )
3556
+ }
3557
+ ) }),
3558
+ /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "mobius-popover__body", children })
3559
+ ] }),
3560
+ /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
3561
+ import_react40.FloatingArrow,
3562
+ {
3563
+ ref: arrowRef,
3564
+ context,
3565
+ width: 20,
3566
+ className: "mobius-popover__arrow-icon"
3567
+ }
3568
+ )
3569
+ ]
3570
+ }
3571
+ )
3572
+ ] });
3573
+ };
3574
+
3575
+ // src/components/Progress/Progress.tsx
3576
+ var import_dedupe41 = __toESM(require("classnames/dedupe"));
3577
+ var import_react42 = require("react");
3578
+ var import_jsx_runtime50 = require("react/jsx-runtime");
3579
+ function warnAboutInvalidValues(value, minValue, maxValue) {
3580
+ if (minValue > maxValue) {
3581
+ console.warn("minValue is greater than maxValue");
3582
+ }
3583
+ if (value < minValue) {
3584
+ console.warn("Progress value is less than minValue");
3585
+ }
3586
+ if (value > maxValue) {
3587
+ console.warn("Progress value is greater than maxValue");
3588
+ }
3589
+ }
3590
+ var sanitizedValue = (value, defaultValue) => {
3591
+ if (value === void 0 || Number.isNaN(value)) {
3592
+ return defaultValue;
3593
+ }
3594
+ return value;
3595
+ };
3596
+ var getLabelComponent = (label, progressLabelId, showLabel) => {
3597
+ if (showLabel) {
3598
+ return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
3599
+ Label,
3600
+ {
3601
+ id: progressLabelId,
3602
+ className: "mobius-progress__label",
3603
+ elementType: "span",
3604
+ children: label
3605
+ }
3606
+ );
3607
+ }
3608
+ return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
3609
+ Label,
3610
+ {
3611
+ id: progressLabelId,
3612
+ className: "mobius-progress__label",
3613
+ elementType: "span",
3614
+ children: label
3615
+ }
3616
+ ) });
3617
+ };
3618
+ var DEFAULT_VALUE = 0;
3619
+ var DEFAULT_MIN_VALUE = 0;
3620
+ var DEFAULT_MAX_VALUE = 100;
3621
+ var Progress = ({ ref, ...props }) => {
3622
+ const progressId = (0, import_react42.useId)();
3623
+ const progressLabelId = (0, import_react42.useId)();
3624
+ const {
3625
+ id,
3626
+ label,
3627
+ showLabel = true,
3628
+ showValueLabel = !!label,
3629
+ valueFormatter,
3630
+ variant = "primary",
3631
+ className
3632
+ } = props;
3633
+ let { value, minValue, maxValue } = props;
3634
+ value = sanitizedValue(value, DEFAULT_VALUE);
3635
+ minValue = sanitizedValue(minValue, DEFAULT_MIN_VALUE);
3636
+ maxValue = sanitizedValue(maxValue, DEFAULT_MAX_VALUE);
3637
+ if (value === void 0 || minValue === void 0 || maxValue === void 0) {
3638
+ return null;
3639
+ }
3640
+ warnAboutInvalidValues(value, minValue, maxValue);
3641
+ const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
3642
+ const percentage = clamp(
3643
+ Math.round((value - minValue) / (maxValue - minValue) * 100),
3644
+ 0,
3645
+ 100
3646
+ );
3647
+ const barWidth = `${percentage}%`;
3648
+ const classes = (0, import_dedupe41.default)("mobius", "mobius-progress", className, {
3649
+ "--is-primary": variant === "primary",
3650
+ "--is-secondary": variant === "secondary"
3651
+ });
3652
+ const progressBarProps = {};
3653
+ progressBarProps["aria-valuemin"] = minValue.toString();
3654
+ progressBarProps["aria-valuemax"] = maxValue.toString();
3655
+ progressBarProps["aria-valuenow"] = value.toString();
3656
+ progressBarProps["aria-valuetext"] = valueFormatter instanceof Function ? valueFormatter(value, minValue, maxValue) : barWidth;
3657
+ const labelComponent = getLabelComponent(label, progressLabelId, showLabel);
3658
+ return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
3659
+ "div",
3660
+ {
3661
+ id: id || progressId,
3662
+ ...progressBarProps,
3663
+ ref,
3664
+ className: classes,
3665
+ role: "progressbar",
3666
+ "aria-labelledby": progressLabelId,
3667
+ children: [
3668
+ labelComponent,
3669
+ /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "mobius-progress__track", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "mobius-progress__bar", style: { width: barWidth } }) }),
3670
+ showValueLabel && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Label, { "data-testid": "value-label", elementType: "span", children: progressBarProps["aria-valuetext"] })
3671
+ ]
3672
+ }
3673
+ );
3674
+ };
3675
+ Progress.displayName = "Progress";
3676
+
3677
+ // src/components/Radio/Radio.tsx
3678
+ var import_dedupe42 = __toESM(require("classnames/dedupe"));
3679
+ var import_react43 = require("react");
3680
+ var import_jsx_runtime51 = require("react/jsx-runtime");
3681
+ var Radio = ({ ref, ...props }) => {
3682
+ const {
3683
+ children,
3684
+ value,
3685
+ label,
3686
+ className,
3687
+ isDisabled,
3688
+ errorMessage,
3689
+ onChange,
3690
+ defaultChecked,
3691
+ groupDisabled,
3692
+ name,
3693
+ selected,
3694
+ setSelected,
3695
+ isRequired,
3696
+ onOverflow,
3697
+ orientation,
3698
+ ...otherProps
3699
+ } = props;
3700
+ const realDisabled = groupDisabled || isDisabled;
3701
+ const isMultiline = label && children;
3702
+ const isControlled = selected !== void 0;
3703
+ const isChecked = isControlled ? selected === value : defaultChecked;
3704
+ const contentRef = (0, import_react43.useRef)(null);
3705
+ const prevOverflowRef = (0, import_react43.useRef)({
3706
+ vertical: false,
3707
+ horizontal: false
3708
+ });
3709
+ const hasIconFirst = (0, import_react43.useMemo)(() => {
3710
+ if (!children || import_react43.Children.count(children) === 0) return false;
3711
+ const firstChild = import_react43.Children.toArray(children)[0];
3712
+ if (!(0, import_react43.isValidElement)(firstChild)) return false;
3713
+ const props2 = firstChild.props;
3714
+ return "icon" in props2 && props2.icon !== void 0;
3715
+ }, [children]);
3716
+ (0, import_react43.useLayoutEffect)(() => {
3717
+ if (!contentRef.current || !onOverflow) return;
3718
+ if (orientation === "vertical") {
3719
+ return;
3720
+ }
3721
+ const element = contentRef.current;
3722
+ const scrollOverflowVertical = element.scrollHeight > element.clientHeight;
3723
+ const scrollOverflowHorizontal = element.scrollWidth > element.clientWidth;
3724
+ const styles = window.getComputedStyle(element);
3725
+ const lineHeight = parseFloat(styles.lineHeight);
3726
+ const fontSize = parseFloat(styles.fontSize);
3727
+ const singleLineHeight = isNaN(lineHeight) ? fontSize * 1.2 : lineHeight;
3728
+ const WRAP_DETECTION_TOLERANCE = 1.1;
3729
+ const hasWrapped = element.clientHeight > singleLineHeight * WRAP_DETECTION_TOLERANCE;
3730
+ const vertical = scrollOverflowVertical || hasWrapped;
3731
+ const horizontal = scrollOverflowHorizontal;
3732
+ const newOverflowState = { vertical, horizontal };
3733
+ const prevOverflow = prevOverflowRef.current;
3734
+ if (newOverflowState.vertical !== prevOverflow.vertical || newOverflowState.horizontal !== prevOverflow.horizontal) {
3735
+ prevOverflowRef.current = newOverflowState;
3736
+ onOverflow(newOverflowState);
3737
+ }
3738
+ }, [label, children, onOverflow, orientation]);
3739
+ const radioClasses = {
3740
+ "--is-disabled": realDisabled,
3741
+ "--is-selected": selected === value,
3742
+ "--is-multiline": !!isMultiline,
3743
+ "--is-required": isRequired
3744
+ };
3745
+ const containerClasses = (0, import_dedupe42.default)(
3746
+ "mobius-radio__label",
3747
+ radioClasses,
3748
+ className,
3749
+ { "--has-icon-first": hasIconFirst }
3750
+ );
3751
+ const inputClasses = (0, import_dedupe42.default)("mobius-radio__input", radioClasses);
3752
+ const { "aria-describedby": _ariaDescribedBy, ...rest } = otherProps;
3753
+ const handleChange = (event) => {
3754
+ if (setSelected) {
3755
+ setSelected(event.target.value);
3756
+ }
3757
+ if (onChange) {
3758
+ const adaptedEvent = {
3759
+ ...event.nativeEvent,
3760
+ target: event.target
3761
+ };
3762
+ onChange(adaptedEvent);
3763
+ }
3764
+ };
3765
+ return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
3766
+ /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Label, { className: containerClasses, children: [
3767
+ /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
3768
+ "input",
3769
+ {
3770
+ "aria-describedby": otherProps["aria-describedby"],
3771
+ disabled: realDisabled,
3772
+ ref,
3773
+ className: inputClasses,
3774
+ value,
3775
+ tabIndex: 0,
3776
+ type: "radio",
3777
+ onChange: handleChange,
3778
+ ...isControlled ? { checked: isChecked } : { defaultChecked: isChecked },
3779
+ name,
3780
+ required: isRequired,
3781
+ ...rest
3782
+ }
3783
+ ),
3784
+ isMultiline ? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { ref: contentRef, className: "mobius-radio__content--multiline", children: [
3785
+ /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "mobius-radio__content-first-line", children: label }),
3786
+ /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "mobius-radio__extra-content", children })
3787
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { ref: contentRef, className: "mobius-radio__content", children: label || children })
3788
+ ] }),
3789
+ errorMessage && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ErrorMessage, { errorMessage })
3790
+ ] });
3791
+ };
3792
+ Radio.displayName = "Radio";
3793
+
3794
+ // src/components/Radio/RadioGroup.tsx
3795
+ var import_dedupe43 = __toESM(require("classnames/dedupe"));
3796
+ var import_react44 = require("react");
3797
+ var import_jsx_runtime52 = require("react/jsx-runtime");
3798
+ var getDefaultVal = (children, defaultValue) => {
3799
+ if (Array.isArray(children) && defaultValue) {
3800
+ const option = children?.find((item) => item.props.value === defaultValue);
3801
+ if (!option) return "";
3802
+ return option.props.value;
3803
+ }
3804
+ return "";
3805
+ };
3806
+ var RadioGroup = ({ ref, ...props }) => {
3807
+ const {
3808
+ label,
3809
+ isDisabled = false,
3810
+ isRequired,
3811
+ isInvalid,
3812
+ orientation = "vertical",
3813
+ className,
3814
+ errorMessage,
3815
+ children,
3816
+ defaultValue,
3817
+ value,
3818
+ isReadOnly,
3819
+ name,
3820
+ onChange,
3821
+ autoStack = false,
3822
+ ...rest
3823
+ } = props;
3824
+ const defaultSelected = getDefaultVal(children, value || defaultValue);
3825
+ const [selected, setSelected] = (0, import_react44.useState)(defaultSelected);
3826
+ const overflowsRef = (0, import_react44.useRef)({});
3827
+ const [hasOverflow, setHasOverflow] = (0, import_react44.useState)(false);
3828
+ (0, import_react44.useEffect)(() => {
3829
+ if (value !== void 0) {
3830
+ setSelected(value);
3831
+ }
3832
+ }, [value]);
3833
+ const handleOverflow = (0, import_react44.useCallback)(
3834
+ (radioValue, overflow) => {
3835
+ overflowsRef.current = {
3836
+ ...overflowsRef.current,
3837
+ [radioValue]: overflow
3838
+ };
3839
+ const anyOverflow = Object.values(overflowsRef.current).some(
3840
+ (o) => o.vertical || o.horizontal
3841
+ );
3842
+ if (anyOverflow !== hasOverflow) {
3843
+ setHasOverflow(anyOverflow);
3844
+ }
3845
+ },
3846
+ [hasOverflow]
3847
+ );
3848
+ const effectiveOrientation = autoStack && orientation === "horizontal" && hasOverflow ? "vertical" : orientation;
3849
+ const validationClasses = useValidationClasses({ isInvalid });
3850
+ const radioClasses = {
3851
+ "--is-disabled": isDisabled,
3852
+ "--is-required": typeof isRequired === "boolean" && isRequired,
3853
+ "--is-optional": typeof isRequired === "boolean" && !isRequired,
3854
+ [`--is-${effectiveOrientation}`]: true,
3855
+ [className || ""]: true
3856
+ };
3857
+ const radioGroupClasses = (0, import_dedupe43.default)(
3858
+ "mobius",
3859
+ "mobius-radio-group",
3860
+ radioClasses,
3861
+ validationClasses
3862
+ );
3863
+ const radioWrapperClasses = (0, import_dedupe43.default)("mobius-radio__wrapper", {
3864
+ [`--is-${effectiveOrientation}`]: true
3865
+ });
3866
+ const labelClasses = (0, import_dedupe43.default)(radioClasses, validationClasses);
3867
+ const errorMessageId = (0, import_react44.useId)();
3868
+ const defaultNameAttrId = (0, import_react44.useId)();
3869
+ const nameAttribute = name || defaultNameAttrId;
3870
+ const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
3871
+ const describedBy = spaceDelimitedList([
3872
+ shouldErrorMessageShow,
3873
+ props["aria-describedby"]
3874
+ ]);
3875
+ const labelId = (0, import_react44.useId)();
3876
+ return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
3877
+ "div",
3878
+ {
3879
+ ...rest,
3880
+ "aria-describedby": describedBy,
3881
+ "aria-disabled": isDisabled,
3882
+ "aria-errormessage": shouldErrorMessageShow,
3883
+ "aria-invalid": isInvalid,
3884
+ "aria-label": props["aria-label"],
3885
+ "aria-labelledby": props["aria-labelledby"] || labelId,
3886
+ "aria-orientation": effectiveOrientation,
3887
+ "aria-readonly": isReadOnly,
3888
+ "aria-required": isRequired,
3889
+ ref,
3890
+ className: radioGroupClasses,
3891
+ role: "radiogroup",
3892
+ children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Stack, { gap: "xs", children: [
3893
+ label && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Label, { htmlFor: name, id: labelId, className: labelClasses, children: label }),
3894
+ /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: radioWrapperClasses, children: import_react44.Children.map(children, (child) => {
3895
+ if ((0, import_react44.isValidElement)(child)) {
3896
+ const childValue = child.props.value;
3897
+ return (0, import_react44.cloneElement)(
3898
+ child,
3899
+ {
3900
+ orientation: effectiveOrientation,
3901
+ groupDisabled: isDisabled,
3902
+ name: nameAttribute,
3903
+ selected: selected || defaultSelected,
3904
+ // in case state does not update
3905
+ setSelected,
3906
+ isRequired,
3907
+ "aria-describedby": describedBy,
3908
+ onChange,
3909
+ onOverflow: childValue ? (overflow) => handleOverflow(childValue, overflow) : void 0
3910
+ }
3911
+ );
3912
+ }
3913
+ return child;
3914
+ }) }),
3915
+ /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ErrorMessage, { id: errorMessageId, errorMessage })
3916
+ ] })
3917
+ }
3918
+ );
3919
+ };
3920
+ RadioGroup.displayName = "RadioGroup";
3921
+
3922
+ // src/components/Segment/SegmentGroup.tsx
3923
+ var import_dedupe44 = __toESM(require("classnames/dedupe"));
3924
+ var import_jsx_runtime53 = require("react/jsx-runtime");
3925
+ var SegmentGroup = (props) => {
3926
+ const { children, horizontal, gap, className, ...rest } = props;
3927
+ const gapClass = gap ? `gap-${gap}` : "";
3928
+ const classes = (0, import_dedupe44.default)(
3929
+ "mobius",
3930
+ "mobius-segment-group",
3931
+ className,
3932
+ { "--is-horizontal": horizontal },
3933
+ gapClass
3934
+ );
3935
+ return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: classes, ...rest, children });
3936
+ };
3937
+ SegmentGroup.displayName = "SegmentGroup";
3938
+
3939
+ // src/components/Segment/Segment.tsx
3940
+ var import_dedupe45 = __toESM(require("classnames/dedupe"));
3941
+ var import_jsx_runtime54 = require("react/jsx-runtime");
3942
+ var Segment = (props) => {
3943
+ const { heading, children, colour, inverted, className, ...rest } = props;
3944
+ const classes = (0, import_dedupe45.default)(
3945
+ "mobius",
3946
+ "mobius-segment",
3947
+ colour,
3948
+ { inverted },
3949
+ className
3950
+ );
3951
+ return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: classes, ...rest, children: [
3952
+ heading && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "mobius-segment__heading", children: heading }),
3953
+ children
3954
+ ] });
3955
+ };
3956
+ Segment.displayName = "Segment";
3957
+
3958
+ // src/components/Select/Select.tsx
3959
+ var import_icons13 = require("@simplybusiness/icons");
3960
+ var import_dedupe46 = __toESM(require("classnames/dedupe"));
3961
+ var import_react45 = require("react");
3962
+ var import_jsx_runtime55 = require("react/jsx-runtime");
3963
+ var Select = ({ ref, ...props }) => {
3964
+ const {
3965
+ label,
3966
+ onChange,
3967
+ isInvalid,
3968
+ errorMessage,
3969
+ isDisabled = false,
3970
+ isRequired,
3971
+ ...otherProps
3972
+ } = props;
3973
+ const { labelProps, fieldProps } = useLabel({
3974
+ label,
3975
+ ...otherProps
3976
+ });
3977
+ const validationClasses = useValidationClasses({ isInvalid });
3978
+ const stateClasses = {
3979
+ "--is-disabled": isDisabled,
3980
+ "--is-required": typeof isRequired === "boolean" && isRequired,
3981
+ "--is-optional": typeof isRequired === "boolean" && !isRequired
3982
+ };
3983
+ const sharedClasses = (0, import_dedupe46.default)(validationClasses, stateClasses);
3984
+ const wrapperClasses = (0, import_dedupe46.default)(
3985
+ "mobius-select__wrapper",
3986
+ sharedClasses,
3987
+ otherProps.className
3988
+ );
3989
+ const selectClasses = (0, import_dedupe46.default)(
3990
+ "mobius-select",
3991
+ sharedClasses,
3992
+ otherProps.className
3993
+ );
3994
+ const labelClasses = (0, import_dedupe46.default)(
3995
+ "mobius-label",
3996
+ sharedClasses,
3997
+ otherProps.className
3998
+ );
3999
+ const iconClasses = (0, import_dedupe46.default)("mobius-select__icon", sharedClasses);
4000
+ const errorMessageId = (0, import_react45.useId)();
4001
+ const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
4002
+ const describedBy = spaceDelimitedList([
4003
+ shouldErrorMessageShow,
4004
+ props["aria-describedby"]
4005
+ ]);
4006
+ const handleChange = (e) => {
4007
+ if (onChange) {
4008
+ onChange(e);
4009
+ }
4010
+ };
4011
+ return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Stack, { className: "mobius mobius-select__outer", gap: "xs", children: [
4012
+ label && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Label, { ...labelProps, className: labelClasses, children: label }),
4013
+ /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: wrapperClasses, children: [
4014
+ /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
4015
+ "select",
4016
+ {
4017
+ ...otherProps,
4018
+ ...fieldProps,
4019
+ ref,
4020
+ multiple: false,
4021
+ className: selectClasses,
4022
+ disabled: isDisabled,
4023
+ "aria-invalid": !!errorMessage,
4024
+ "aria-describedby": describedBy,
4025
+ "aria-required": isRequired,
4026
+ required: isRequired,
4027
+ onChange: handleChange
4028
+ }
4029
+ ),
4030
+ /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: iconClasses, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Icon, { icon: import_icons13.chevronDown }) })
4031
+ ] }),
4032
+ errorMessage && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ErrorMessage, { id: errorMessageId, errorMessage })
4033
+ ] });
4034
+ };
4035
+ Select.displayName = "Select";
4036
+
4037
+ // src/components/Slider/Slider.tsx
4038
+ var import_dedupe47 = __toESM(require("classnames/dedupe"));
4039
+ var import_react47 = require("react");
4040
+
4041
+ // src/components/Slider/helpers.ts
4042
+ var import_react46 = require("react");
4043
+ function numberFormatter(value, formatOptions, locale = navigator.languages?.[0] || "en-GB") {
4044
+ if (!formatOptions) {
4045
+ return value?.toString() || "";
4046
+ }
4047
+ return new Intl.NumberFormat(locale, formatOptions).format(+(value || 0));
4048
+ }
4049
+
4050
+ // src/components/Slider/Slider.tsx
4051
+ var import_jsx_runtime56 = require("react/jsx-runtime");
4052
+ var Slider = (props) => {
4053
+ const {
4054
+ id,
4055
+ className,
4056
+ label,
4057
+ "aria-label": ariaLabel,
4058
+ "aria-labelledby": ariaLabelledBy,
4059
+ minValue,
4060
+ maxValue,
4061
+ step = 1,
4062
+ defaultValue = 0,
4063
+ value,
4064
+ onChange,
4065
+ onChangeEnd,
4066
+ variant = "primary",
4067
+ minLabel,
4068
+ maxLabel,
4069
+ formatOptions,
4070
+ isDisabled = false
4071
+ } = props;
4072
+ const trackRef = (0, import_react47.useRef)(null);
4073
+ const [currentValue, setCurrentValue] = (0, import_react47.useState)(
4074
+ value || defaultValue || 0
4075
+ );
4076
+ const [isDragging, setIsDraggging] = (0, import_react47.useState)(false);
4077
+ const { labelProps, fieldProps } = useLabel({
4078
+ id,
4079
+ label,
4080
+ "aria-label": ariaLabel,
4081
+ "aria-labelledby": ariaLabelledBy
4082
+ });
4083
+ const formattedValue = numberFormatter(currentValue, formatOptions);
4084
+ const classes = (0, import_dedupe47.default)("mobius", "mobius-slider", className, {
4085
+ "--is-disabled": isDisabled,
4086
+ "--is-primary": variant === "primary",
4087
+ "--is-secondary": variant === "secondary",
4088
+ "--is-dragging": isDragging
4089
+ });
4090
+ const handleChange = (e) => {
4091
+ const val = +e.target.value;
4092
+ setCurrentValue(val);
4093
+ if (onChange) {
4094
+ onChange(val);
4095
+ }
4096
+ };
4097
+ const handleChangeStart = () => {
4098
+ setIsDraggging(true);
4099
+ };
4100
+ const handleChangeEnd = () => {
4101
+ setIsDraggging(false);
4102
+ if (onChangeEnd) {
4103
+ onChangeEnd(currentValue);
4104
+ }
4105
+ };
4106
+ return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: classes, children: [
4107
+ /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "mobius-slider__label-wrapper", children: [
4108
+ label && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Label, { ...labelProps, children: label }),
4109
+ label && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("output", { style: { flex: "1 0 auto", textAlign: "end" }, children: formattedValue })
4110
+ ] }),
4111
+ /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { ref: trackRef, className: "mobius-slider__track-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
4112
+ "input",
4113
+ {
4114
+ className: "mobius-slider__track",
4115
+ type: "range",
4116
+ min: minValue,
4117
+ max: maxValue,
4118
+ value: currentValue,
4119
+ step,
4120
+ onChange: handleChange,
4121
+ autoComplete: "off",
4122
+ disabled: isDisabled,
4123
+ onMouseDown: handleChangeStart,
4124
+ onMouseUp: handleChangeEnd,
4125
+ onKeyDown: handleChangeStart,
4126
+ onKeyUp: handleChangeEnd,
4127
+ ...fieldProps
4128
+ }
4129
+ ) }),
4130
+ /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "mobius-slider__labels", children: [
4131
+ /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "mobius-slider__min-label", "data-testid": "min-label", children: minLabel }),
4132
+ /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "mobius-slider__max-label", "data-testid": "max-label", children: maxLabel })
4133
+ ] })
4134
+ ] });
4135
+ };
4136
+
4137
+ // src/components/SVG/SVG.tsx
4138
+ var import_react48 = require("react");
4139
+ var import_dedupe48 = __toESM(require("classnames/dedupe"));
4140
+ var import_jsx_runtime57 = require("react/jsx-runtime");
4141
+ var SVG = ({ ref, ...props }) => {
4142
+ const { children, className, ...otherProps } = props;
4143
+ const classes = (0, import_dedupe48.default)("mobius", "mobius-svg", className);
4144
+ const svgNode = import_react48.Children.only(children);
4145
+ const { children: svgChildren, viewBox, xmlns } = svgNode.props;
4146
+ return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
4147
+ "svg",
4148
+ {
4149
+ viewBox,
4150
+ xmlns,
4151
+ ref,
4152
+ ...otherProps,
4153
+ className: classes,
4154
+ children: svgChildren
4155
+ }
4156
+ );
4157
+ };
4158
+ SVG.displayName = "SVG";
4159
+
4160
+ // src/components/Switch/Switch.tsx
4161
+ var import_react49 = require("react");
4162
+ var import_dedupe49 = __toESM(require("classnames/dedupe"));
4163
+ var import_jsx_runtime58 = require("react/jsx-runtime");
4164
+ var Switch = ({ ref, ...props }) => {
4165
+ const {
4166
+ checked = false,
4167
+ className,
4168
+ onChange,
4169
+ isDisabled = false,
4170
+ ...otherProps
4171
+ } = props;
4172
+ const [enabled, setEnabled] = (0, import_react49.useState)(checked);
4173
+ (0, import_react49.useEffect)(() => {
4174
+ setEnabled(checked);
4175
+ }, [checked]);
4176
+ const classes = (0, import_dedupe49.default)(
4177
+ "mobius",
4178
+ "mobius-switch",
4179
+ {
4180
+ "mobius-switch--checked": enabled,
4181
+ "mobius-switch--disabled": isDisabled
4182
+ },
4183
+ className
4184
+ );
4185
+ const handleChange = (event) => {
4186
+ setEnabled(!enabled);
4187
+ if (onChange) {
4188
+ onChange(event);
4189
+ }
4190
+ };
4191
+ return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("label", { ref, className: classes, children: [
4192
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { children: enabled ? "On" : "Off" }) }),
4193
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
4194
+ "input",
4195
+ {
4196
+ type: "checkbox",
4197
+ role: "switch",
4198
+ checked: enabled,
4199
+ onChange: handleChange,
4200
+ disabled: isDisabled,
4201
+ ...otherProps
4202
+ }
4203
+ ),
4204
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "mobius-switch__slider" })
4205
+ ] });
4206
+ };
4207
+ Switch.displayName = "Switch";
4208
+
4209
+ // src/components/Table/Table.tsx
4210
+ var import_dedupe50 = __toESM(require("classnames/dedupe"));
4211
+ var import_jsx_runtime59 = require("react/jsx-runtime");
4212
+ var Table = ({ ref, ...props }) => {
4213
+ const classes = (0, import_dedupe50.default)("mobius", "mobius-table", props.className);
4214
+ return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("table", { ref, ...props, className: classes });
4215
+ };
4216
+ Table.displayName = "Table";
4217
+
4218
+ // src/components/Table/Head.tsx
4219
+ var import_dedupe51 = __toESM(require("classnames/dedupe"));
4220
+ var import_jsx_runtime60 = require("react/jsx-runtime");
4221
+ var Head = ({ ref, ...props }) => {
4222
+ const classes = (0, import_dedupe51.default)("mobius", "mobius-table__head", props.className);
4223
+ return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("thead", { ref, ...props, className: classes });
4224
+ };
4225
+ Head.displayName = "Table.Head";
4226
+
4227
+ // src/components/Table/Body.tsx
4228
+ var import_dedupe52 = __toESM(require("classnames/dedupe"));
4229
+ var import_jsx_runtime61 = require("react/jsx-runtime");
4230
+ var Body = ({ ref, ...props }) => {
4231
+ const classes = (0, import_dedupe52.default)("mobius", "mobius-table__body", props.className);
4232
+ return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("tbody", { ref, ...props, className: classes });
4233
+ };
4234
+ Body.displayName = "Table.Body";
4235
+
4236
+ // src/components/Table/Foot.tsx
4237
+ var import_dedupe53 = __toESM(require("classnames/dedupe"));
4238
+ var import_jsx_runtime62 = require("react/jsx-runtime");
4239
+ var Foot = ({ ref, ...props }) => {
4240
+ const classes = (0, import_dedupe53.default)("mobius", "mobius-table__foot", props.className);
4241
+ return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("tfoot", { ref, ...props, className: classes });
4242
+ };
4243
+ Foot.displayName = "Table.Foot";
4244
+
4245
+ // src/components/Table/Row.tsx
4246
+ var import_dedupe54 = __toESM(require("classnames/dedupe"));
4247
+ var import_jsx_runtime63 = require("react/jsx-runtime");
4248
+ var Row = ({ ref, ...props }) => {
4249
+ const classes = (0, import_dedupe54.default)("mobius", "mobius-table__row", props.className);
4250
+ return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("tr", { ref, ...props, className: classes });
4251
+ };
4252
+ Row.displayName = "Table.Row";
4253
+
4254
+ // src/components/Table/HeaderCell.tsx
4255
+ var import_dedupe55 = __toESM(require("classnames/dedupe"));
4256
+ var import_jsx_runtime64 = require("react/jsx-runtime");
4257
+ var HeaderCell = ({ ref, ...props }) => {
4258
+ const classes = (0, import_dedupe55.default)(
4259
+ "mobius",
4260
+ "mobius-table__head-cell",
4261
+ props.className
4262
+ );
4263
+ return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("th", { ...props, ref, className: classes });
4264
+ };
4265
+ HeaderCell.displayName = "Table.HeaderCell";
4266
+
4267
+ // src/components/Table/Cell.tsx
4268
+ var import_dedupe56 = __toESM(require("classnames/dedupe"));
4269
+ var import_jsx_runtime65 = require("react/jsx-runtime");
4270
+ var Cell = ({ ref, ...props }) => {
4271
+ const classes = (0, import_dedupe56.default)(
4272
+ "mobius",
4273
+ "mobius-table__body-cell",
4274
+ props.className
4275
+ );
4276
+ return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("td", { ref, ...props, className: classes });
4277
+ };
4278
+ Cell.displayName = "Table.Cell";
4279
+
4280
+ // src/components/Table/index.tsx
4281
+ var Table2 = Object.assign(Table, {
4282
+ Head,
4283
+ Body,
4284
+ Foot,
4285
+ Row,
4286
+ HeaderCell,
4287
+ Cell
4288
+ });
4289
+ Table2.displayName = "Table";
4290
+
4291
+ // src/components/Text/Text.tsx
4292
+ var import_dedupe57 = __toESM(require("classnames/dedupe"));
4293
+ var import_jsx_runtime66 = require("react/jsx-runtime");
4294
+ var getElementType = (variant, elementType) => {
4295
+ if (variant) {
4296
+ return ["h1", "h2", "h3", "h4"].includes(variant) ? variant : "p";
4297
+ }
4298
+ return elementType || "p";
4299
+ };
4300
+ var Text = ({ ref, elementType: Component = "p", ...props }) => {
4301
+ const { variant, className, spacing, ...otherProps } = props;
4302
+ const elementType = getElementType(variant, Component);
4303
+ const variantType = variant || elementType;
4304
+ const classes = (0, import_dedupe57.default)(
4305
+ "mobius",
4306
+ "mobius-text",
4307
+ { [`--is-${variantType}`]: variantType },
4308
+ { [`--has-line-height-${spacing}`]: spacing },
4309
+ className
4310
+ );
4311
+ return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Component, { ref, ...otherProps, className: classes });
4312
+ };
4313
+ Text.displayName = "Text";
4314
+
4315
+ // src/components/TextArea/TextArea.tsx
4316
+ var import_dedupe59 = __toESM(require("classnames/dedupe"));
4317
+
4318
+ // src/components/TextAreaInput/TextAreaInput.tsx
4319
+ var import_dedupe58 = __toESM(require("classnames/dedupe"));
4320
+ var import_jsx_runtime67 = require("react/jsx-runtime");
4321
+ var TextAreaInput = ({ ref, ...props }) => {
4322
+ const { isSelected, isDisabled, isReadOnly, isRequired, ...otherProps } = props;
4323
+ const classes = (0, import_dedupe58.default)(
4324
+ "mobius",
4325
+ "mobius-text-area__input",
4326
+ {
4327
+ "--is-disabled": isDisabled,
4328
+ "--is-selected": isSelected,
4329
+ "--is-required": isRequired
4330
+ },
4331
+ otherProps.className
4332
+ );
4333
+ return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
4334
+ "textarea",
4335
+ {
4336
+ ref,
4337
+ ...otherProps,
4338
+ required: isRequired,
4339
+ readOnly: isReadOnly,
4340
+ className: classes
4341
+ }
4342
+ );
4343
+ };
4344
+ TextAreaInput.displayName = "TextAreaInput";
4345
+
4346
+ // src/components/TextArea/TextArea.tsx
4347
+ var import_jsx_runtime68 = require("react/jsx-runtime");
4348
+ var TextArea = ({ ref, ...props }) => {
4349
+ const {
4350
+ isDisabled,
4351
+ className,
4352
+ errorMessage,
4353
+ label,
4354
+ isInvalid,
4355
+ ...otherProps
4356
+ } = props;
4357
+ const { inputProps, labelProps, errorMessageProps } = useTextField(props);
4358
+ const classes = (0, import_dedupe59.default)("mobius", "mobius-text-area", className);
4359
+ const validationClasses = useValidationClasses({ isInvalid });
4360
+ const inputClasses = (0, import_dedupe59.default)("mobius-text-area__input", validationClasses);
4361
+ const labelClasses = (0, import_dedupe59.default)(
4362
+ {
4363
+ "--is-disabled": isDisabled
4364
+ },
4365
+ validationClasses
4366
+ );
4367
+ return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(Stack, { className: classes, gap: "xs", children: [
4368
+ label && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Label, { ...labelProps, className: labelClasses, children: props.label }),
4369
+ /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
4370
+ TextAreaInput,
4371
+ {
4372
+ ...otherProps,
4373
+ ...inputProps,
4374
+ ref,
4375
+ className: inputClasses,
4376
+ isDisabled,
4377
+ "aria-invalid": errorMessage != null
4378
+ }
4379
+ ),
4380
+ /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ErrorMessage, { ...errorMessageProps, errorMessage })
4381
+ ] });
4382
+ };
4383
+ TextArea.displayName = "TextArea";
4384
+
4385
+ // src/components/TextOrHTML/TextOrHTML.tsx
4386
+ var import_react50 = require("react");
4387
+ var import_jsx_runtime69 = require("react/jsx-runtime");
4388
+ var TextOrHTML = ({
4389
+ ref,
4390
+ text,
4391
+ htmlClassName,
4392
+ htmlElementType = "span",
4393
+ textWrapper = false,
4394
+ ...textProps
4395
+ }) => {
4396
+ const DangerousComponent = htmlElementType;
4397
+ const dangerousHTML = (0, import_react50.useMemo)(() => ({ __html: text }), [text]);
4398
+ const dangerousElement = /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
4399
+ DangerousComponent,
4400
+ {
4401
+ className: htmlClassName,
4402
+ dangerouslySetInnerHTML: dangerousHTML
4403
+ }
4404
+ );
4405
+ if (textWrapper) {
4406
+ return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Text, { ref, ...textProps, children: dangerousElement });
4407
+ }
4408
+ return dangerousElement;
4409
+ };
4410
+ TextOrHTML.displayName = "TextOrHTML";
4411
+
4412
+ // src/components/Title/Title.tsx
4413
+ var import_dedupe60 = __toESM(require("classnames/dedupe"));
4414
+ var import_jsx_runtime70 = require("react/jsx-runtime");
4415
+ var Title = ({ ref, ...props }) => {
4416
+ const {
4417
+ elementType: Element = "div",
4418
+ title,
4419
+ description,
4420
+ ...otherProps
4421
+ } = props;
4422
+ const classes = (0, import_dedupe60.default)("mobius", "mobius-title", otherProps.className);
4423
+ const headerClasses = (0, import_dedupe60.default)("mobius", "mobius-title__header");
4424
+ const contentClasses = (0, import_dedupe60.default)("mobius", "mobius-title__description");
4425
+ const containerClasses = (0, import_dedupe60.default)("mobius", "mobius-title__container");
4426
+ return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Element, { ref, ...otherProps, className: classes, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(Flex, { flexDirection: "column", className: containerClasses, children: [
4427
+ /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("p", { className: headerClasses, children: title }),
4428
+ /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("p", { className: contentClasses, children: description })
4429
+ ] }) });
4430
+ };
4431
+ Title.displayName = "Title";
4432
+
4433
+ // src/components/Toast/Toast.tsx
4434
+ var import_icons14 = require("@simplybusiness/icons");
4435
+ var import_dedupe61 = __toESM(require("classnames/dedupe"));
4436
+ var import_sonner = require("sonner");
4437
+
4438
+ // src/components/Toast/state.ts
4439
+ var toastState = {
4440
+ showCloseButton: true
4441
+ };
4442
+
4443
+ // src/components/Toast/Toast.tsx
4444
+ var import_jsx_runtime71 = require("react/jsx-runtime");
4445
+ var variantIcons = {
4446
+ info: import_icons14.circleInfo,
4447
+ success: import_icons14.circleCheck,
4448
+ warning: import_icons14.triangleExclamation,
4449
+ error: import_icons14.circleExclamation
4450
+ };
4451
+ var variantColors = {
4452
+ info: "var(--color-info)",
4453
+ success: "var(--color-valid)",
4454
+ warning: "var(--color-warning)",
4455
+ error: "var(--color-error)"
4456
+ };
4457
+ var ToastIcon = ({ variant }) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "mobius-toast__icon", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Icon, { icon: variantIcons[variant], color: variantColors[variant] }) });
4458
+ var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "mobius-toast__close-icon", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Icon, { icon: import_icons14.cross }) });
4459
+ var ToastContent = ({
4460
+ toastId,
4461
+ variant,
4462
+ title,
4463
+ description,
4464
+ action,
4465
+ cancel,
4466
+ showCloseButton = toastState.showCloseButton
4467
+ }) => /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: (0, import_dedupe61.default)("mobius", "mobius-toast", `--${variant}`), children: [
4468
+ /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ToastIcon, { variant }),
4469
+ /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "mobius-toast__body", children: [
4470
+ /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "mobius-toast__content", children: [
4471
+ title && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "mobius-toast__title", children: title }),
4472
+ description && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "mobius-toast__description", children: description })
4473
+ ] }),
4474
+ (action || cancel) && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "mobius-toast__actions", children: [
4475
+ cancel && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
4476
+ "button",
4477
+ {
4478
+ type: "button",
4479
+ className: "mobius-toast__cancel",
4480
+ onClick: () => {
4481
+ cancel.onClick?.();
4482
+ import_sonner.toast.dismiss(toastId);
4483
+ },
4484
+ children: cancel.label
4485
+ }
4486
+ ),
4487
+ action && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
4488
+ "button",
4489
+ {
4490
+ type: "button",
4491
+ className: "mobius-toast__action",
4492
+ onClick: () => {
4493
+ action.onClick();
4494
+ import_sonner.toast.dismiss(toastId);
4495
+ },
4496
+ children: action.label
4497
+ }
4498
+ )
4499
+ ] })
4500
+ ] }),
4501
+ showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
4502
+ "button",
4503
+ {
4504
+ type: "button",
4505
+ className: "mobius-toast__close",
4506
+ onClick: () => import_sonner.toast.dismiss(toastId),
4507
+ "aria-label": "Close",
4508
+ children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(CloseIcon, {})
4509
+ }
4510
+ )
4511
+ ] });
4512
+ var createCustomToast = (message, variant, options) => import_sonner.toast.custom(
4513
+ (id) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
4514
+ ToastContent,
4515
+ {
4516
+ toastId: id,
4517
+ variant,
4518
+ title: options?.title,
4519
+ description: options?.description ?? message,
4520
+ action: options?.action,
4521
+ cancel: options?.cancel,
4522
+ showCloseButton: options?.showCloseButton
4523
+ }
4524
+ ),
4525
+ {
4526
+ duration: options?.duration,
4527
+ onDismiss: options?.onDismiss,
4528
+ onAutoClose: options?.onAutoClose
4529
+ }
4530
+ );
4531
+ var toast = {
4532
+ /** Show an info toast */
4533
+ info: (message, options) => createCustomToast(message, "info", options),
4534
+ /** Show a success toast */
4535
+ success: (message, options) => createCustomToast(message, "success", options),
4536
+ /** Show a warning toast */
4537
+ warning: (message, options) => createCustomToast(message, "warning", options),
4538
+ /** Show an error toast */
4539
+ error: (message, options) => createCustomToast(message, "error", options),
4540
+ /** Dismiss a specific toast by ID or all toasts */
4541
+ dismiss: (toastId) => import_sonner.toast.dismiss(toastId)
4542
+ };
4543
+
4544
+ // src/components/Toast/Toaster.tsx
4545
+ var import_react51 = require("react");
4546
+ var import_sonner2 = require("sonner");
4547
+ var import_jsx_runtime72 = require("react/jsx-runtime");
4548
+ var Toaster = ({
4549
+ position = "top-right",
4550
+ closeButton = true,
4551
+ expand = false,
4552
+ duration = 4e3,
4553
+ visibleToasts = 3,
4554
+ gap = 8
4555
+ }) => {
4556
+ (0, import_react51.useEffect)(() => {
4557
+ toastState.showCloseButton = closeButton;
4558
+ }, [closeButton]);
4559
+ return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
4560
+ import_sonner2.Toaster,
4561
+ {
4562
+ position,
4563
+ closeButton: false,
4564
+ expand,
4565
+ duration,
4566
+ visibleToasts,
4567
+ gap
4568
+ }
4569
+ );
4570
+ };
4571
+ Toaster.displayName = "Toaster";
4572
+
4573
+ // src/components/Trust/Trust.tsx
4574
+ var import_dedupe62 = __toESM(require("classnames/dedupe"));
4575
+ var import_react52 = require("react");
4576
+
4577
+ // src/components/Trust/constants.ts
4578
+ var REQUIRED_TRUSTPILOT_CLASS_NAME = "trustpilot-widget";
4579
+ var SIMPLYBUSINESS_UNIT_ID = "5ca35a3da72b330001954cef";
4580
+ var SIMPLYBUSINESS_UNIT_IDS = {
4581
+ "en-US": "5ca35a3da72b330001954cef",
4582
+ // US business unit ID
4583
+ "en-GB": "56b1db010000ff0005887125"
4584
+ // UK business unit ID
4585
+ };
4586
+ var TRUSTPILOT_LINKS = {
4587
+ "en-US": "https://www.trustpilot.com/review/simplybusiness.com",
4588
+ "en-GB": "https://www.trustpilot.com/review/simplybusiness.co.uk"
4589
+ };
4590
+ var TRUSTPILOT_TEMPLATE_IDS = {
4591
+ "micro-combo": "5419b6ffb0d04a076446a9af",
4592
+ mini: "53aa8807dec7e10d38f59f32",
4593
+ carousel: "53aa8912dec7e10d38f59f36",
4594
+ horizontal: "5406e65db0d04a09e042d5fc",
4595
+ "micro-star": "5419b732fbfb950b10de65e5"
4596
+ };
4597
+ var TRUSTPILOT_WIDGET = {
4598
+ // Keys based on actual widget names
4599
+ // https://support.trustpilot.com/hc/en-us/articles/360019826379-TrustBox-widget-overview
4600
+ "micro-combo": {
4601
+ templateId: TRUSTPILOT_TEMPLATE_IDS["micro-combo"],
4602
+ className: "--is-variant-micro-combo",
4603
+ styles: {
4604
+ height: "25px"
4605
+ }
4606
+ },
4607
+ mini: {
4608
+ templateId: TRUSTPILOT_TEMPLATE_IDS["mini"],
4609
+ className: "--is-variant-mini",
4610
+ styles: {
4611
+ width: "300px",
4612
+ height: "150px"
4613
+ }
4614
+ },
4615
+ carousel: {
4616
+ templateId: TRUSTPILOT_TEMPLATE_IDS["carousel"],
4617
+ className: "--is-variant-carousel",
4618
+ styles: {
4619
+ height: "150px"
4620
+ }
4621
+ },
4622
+ horizontal: {
4623
+ templateId: TRUSTPILOT_TEMPLATE_IDS["horizontal"],
4624
+ className: "--is-variant-horizontal",
4625
+ styles: {
4626
+ height: "28px"
4627
+ }
4628
+ },
4629
+ "micro-star": {
4630
+ templateId: TRUSTPILOT_TEMPLATE_IDS["micro-star"],
4631
+ className: "--is-variant-micro-star",
4632
+ styles: {
4633
+ height: "24px"
4634
+ }
4635
+ }
4636
+ };
4637
+
4638
+ // src/components/Trust/Trust.tsx
4639
+ var import_jsx_runtime73 = require("react/jsx-runtime");
4640
+ var Trust = ({ ref, ...props }) => {
4641
+ const {
4642
+ elementType: Element = "div",
4643
+ variant,
4644
+ theme,
4645
+ locale,
4646
+ height,
4647
+ width,
4648
+ stars,
4649
+ className
4650
+ } = props;
4651
+ const [isMounted, setIsMounted] = (0, import_react52.useState)(false);
4652
+ const trustRef = (0, import_react52.useRef)(null);
4653
+ const {
4654
+ templateId,
4655
+ className: variantClassName,
4656
+ styles
4657
+ } = TRUSTPILOT_WIDGET[variant];
4658
+ const link = TRUSTPILOT_LINKS[locale];
4659
+ const businessUnitId = SIMPLYBUSINESS_UNIT_IDS[locale] || SIMPLYBUSINESS_UNIT_ID;
4660
+ const dataProps = {
4661
+ "data-businessunit-id": businessUnitId,
4662
+ "data-locale": locale,
4663
+ "data-template-id": templateId,
4664
+ "data-theme": theme,
4665
+ "data-style-width": width || "100%",
4666
+ "data-style-height": height,
4667
+ "data-stars": stars
4668
+ };
4669
+ const classes = (0, import_dedupe62.default)(
4670
+ "mobius",
4671
+ "mobius-trust",
4672
+ REQUIRED_TRUSTPILOT_CLASS_NAME,
4673
+ {
4674
+ [`--is-${theme}`]: theme,
4675
+ [variantClassName]: variant
4676
+ },
4677
+ className
4678
+ );
4679
+ (0, import_react52.useEffect)(() => {
4680
+ const hasTrustpilotLoaded = trustRef.current && window?.Trustpilot && window?.Trustpilot.loadFromElement;
4681
+ if (isMounted && hasTrustpilotLoaded) {
4682
+ window.Trustpilot.loadFromElement(trustRef.current, true);
4683
+ }
4684
+ }, [isMounted]);
4685
+ (0, import_react52.useEffect)(() => {
4686
+ setIsMounted(true);
4687
+ }, []);
4688
+ if (!isMounted) return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { style: styles });
4689
+ return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
4690
+ Element,
4691
+ {
4692
+ ref: mergeRefs([trustRef, ref]),
4693
+ className: classes,
4694
+ style: styles,
4695
+ ...dataProps,
4696
+ children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
4697
+ "a",
4698
+ {
4699
+ href: link,
4700
+ target: "_blank",
4701
+ rel: "noopener noreferrer",
4702
+ className: "mobius-trust__link",
4703
+ children: "Trustpilot"
4704
+ }
4705
+ )
4706
+ }
4707
+ );
4708
+ };
4709
+
4710
+ // src/components/ExpandableText/ExpandableText.tsx
4711
+ var import_dedupe63 = __toESM(require("classnames/dedupe"));
4712
+ var import_react53 = require("react");
4713
+ var import_jsx_runtime74 = require("react/jsx-runtime");
4714
+ var ExpandableText = ({ ref, ...props }) => {
4715
+ const {
4716
+ text,
4717
+ maxLines = 3,
4718
+ breakpoint,
4719
+ showText = "Read more",
4720
+ hideText = "Read less",
4721
+ className,
4722
+ textProps = {},
4723
+ accordionProps = {},
4724
+ onToggle,
4725
+ ...otherProps
4726
+ } = props;
4727
+ const [isExpanded, setIsExpanded] = (0, import_react53.useState)(false);
4728
+ const [isCollapsed, setIsCollapsed] = (0, import_react53.useState)(false);
4729
+ const textRef = (0, import_react53.useRef)(null);
4730
+ const { down } = useBreakpoint();
4731
+ const baseId = (0, import_react53.useId)();
4732
+ const expandButtonId = `expandable-text-expand-${baseId}`;
4733
+ const shouldCollapse = breakpoint ? down(breakpoint) : true;
4734
+ (0, import_react53.useEffect)(() => {
4735
+ if (!shouldCollapse || !textRef.current) {
4736
+ setIsCollapsed(false);
4737
+ return;
4738
+ }
4739
+ const element = textRef.current;
4740
+ const isOverflowing = element.scrollHeight > element.clientHeight;
4741
+ setIsCollapsed(isOverflowing);
4742
+ }, [text, shouldCollapse, maxLines]);
4743
+ if (breakpoint && !shouldCollapse) {
4744
+ return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { ref, className, ...otherProps, children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(TextOrHTML, { text, textWrapper: true, ...textProps }) });
4745
+ }
4746
+ const handleAccordionChange = (expanded) => {
4747
+ setIsExpanded(expanded);
4748
+ onToggle?.(expanded);
4749
+ };
4750
+ const classes = (0, import_dedupe63.default)("mobius-expandable-text", className);
4751
+ const textContainerClasses = (0, import_dedupe63.default)("mobius-expandable-text__content", {
4752
+ "mobius-expandable-text__content--collapsed": !isExpanded
4753
+ });
4754
+ const textContainerStyle = {
4755
+ "--line-clamp": maxLines
4756
+ };
4757
+ return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
4758
+ "div",
4759
+ {
4760
+ ref,
4761
+ className: classes,
4762
+ "data-testid": "expandable-text",
4763
+ ...otherProps,
4764
+ children: [
4765
+ /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
4766
+ "div",
4767
+ {
4768
+ ref: textRef,
4769
+ className: textContainerClasses,
4770
+ style: textContainerStyle,
4771
+ "data-testid": "expandable-text-content",
4772
+ "aria-describedby": isCollapsed ? expandButtonId : void 0,
4773
+ children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(TextOrHTML, { elementType: "span", textWrapper: true, text, ...textProps })
4774
+ }
4775
+ ),
4776
+ isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
4777
+ Accordion,
4778
+ {
4779
+ showText,
4780
+ hideText,
4781
+ headerPosition: "bottom",
4782
+ onChange: handleAccordionChange,
4783
+ onClick: (e) => {
4784
+ e?.stopPropagation();
4785
+ },
4786
+ id: expandButtonId,
4787
+ ...accordionProps
4788
+ }
4789
+ )
4790
+ ]
4791
+ }
4792
+ );
4793
+ };
4794
+ ExpandableText.displayName = "ExpandableText";
4795
+
4796
+ // src/components/MaskedField/MaskedField.tsx
4797
+ var import_react54 = require("react");
4798
+ var import_react_imask = require("react-imask");
4799
+ var import_jsx_runtime75 = require("react/jsx-runtime");
4800
+ var useAcceptHandler = (onChange, useMaskedValue, name) => {
4801
+ return (0, import_react54.useCallback)(
4802
+ (maskedValue, maskInstance) => {
4803
+ if (!onChange) {
4804
+ return;
4805
+ }
4806
+ const formattedValue = maskedValue;
4807
+ const rawValue = maskInstance.unmaskedValue;
4808
+ const valueToEmit = useMaskedValue ? formattedValue : rawValue;
4809
+ onChange({
4810
+ target: { name, value: valueToEmit }
4811
+ });
4812
+ },
4813
+ [onChange, useMaskedValue, name]
4814
+ );
4815
+ };
4816
+ var useCombinedRef = (imaskRef, forwardedRef) => {
4817
+ return (0, import_react54.useCallback)(
4818
+ (element) => {
4819
+ imaskRef.current = element;
4820
+ if (typeof forwardedRef === "function") {
4821
+ forwardedRef(element);
4822
+ } else if (forwardedRef) {
4823
+ forwardedRef.current = element;
4824
+ }
4825
+ },
4826
+ [imaskRef, forwardedRef]
4827
+ );
4828
+ };
4829
+ var useBlurHandler = (onBlur, maskRef, useMaskedValue, name) => {
4830
+ return (0, import_react54.useCallback)(
4831
+ (event) => {
4832
+ if (!onBlur || !maskRef.current) {
4833
+ return;
4834
+ }
4835
+ const formattedValue = maskRef.current.value;
4836
+ const rawValue = maskRef.current.unmaskedValue;
4837
+ const valueToEmit = useMaskedValue ? formattedValue : rawValue;
4838
+ onBlur({
4839
+ ...event,
4840
+ target: { ...event.target, name, value: valueToEmit }
4841
+ });
4842
+ },
4843
+ [onBlur, maskRef, useMaskedValue, name]
4844
+ );
4845
+ };
4846
+ var ControlledMaskedField = ({
4847
+ mask,
4848
+ useMaskedValue = false,
4849
+ value,
4850
+ onChange,
4851
+ onBlur,
4852
+ name,
4853
+ forwardedRef,
4854
+ ...textFieldProps
4855
+ }) => {
4856
+ const onAccept = useAcceptHandler(onChange, useMaskedValue, name);
4857
+ const { ref: imaskRef, maskRef, setValue } = (0, import_react_imask.useIMask)(mask, { onAccept });
4858
+ const combinedRef = useCombinedRef(imaskRef, forwardedRef);
4859
+ const handleBlur = useBlurHandler(onBlur, maskRef, useMaskedValue, name);
4860
+ (0, import_react54.useEffect)(() => {
4861
+ if (!maskRef.current) {
4862
+ return;
4863
+ }
4864
+ const stringValue = value.toString();
4865
+ const currentMasked = maskRef.current.value;
4866
+ const currentUnmasked = maskRef.current.unmaskedValue;
4867
+ if (currentMasked !== stringValue && currentUnmasked !== stringValue) {
4868
+ setValue(stringValue);
4869
+ }
4870
+ }, [value, maskRef, setValue, imaskRef]);
4871
+ return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
4872
+ TextField,
4873
+ {
4874
+ ...textFieldProps,
4875
+ ref: combinedRef,
4876
+ name,
4877
+ onBlur: handleBlur
4878
+ }
4879
+ );
4880
+ };
4881
+ var UncontrolledMaskedField = ({
4882
+ mask,
4883
+ useMaskedValue = false,
4884
+ defaultValue,
4885
+ onChange,
4886
+ onBlur,
4887
+ name,
4888
+ forwardedRef,
4889
+ ...textFieldProps
4890
+ }) => {
4891
+ const onAccept = useAcceptHandler(onChange, useMaskedValue, name);
4892
+ const { ref: imaskRef, maskRef } = (0, import_react_imask.useIMask)(mask, { onAccept });
4893
+ const combinedRef = useCombinedRef(imaskRef, forwardedRef);
4894
+ const handleBlur = useBlurHandler(onBlur, maskRef, useMaskedValue, name);
4895
+ return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
4896
+ TextField,
4897
+ {
4898
+ ...textFieldProps,
4899
+ ref: combinedRef,
4900
+ name,
4901
+ onBlur: handleBlur,
4902
+ defaultValue: defaultValue?.toString()
4903
+ }
4904
+ );
4905
+ };
4906
+ var MaskedField = ({ ref: forwardedRef, ...props }) => {
4907
+ const { value, defaultValue, ...rest } = props;
4908
+ if ("value" in props) {
4909
+ return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
4910
+ ControlledMaskedField,
4911
+ {
4912
+ ...rest,
4913
+ value: value ?? "",
4914
+ forwardedRef
4915
+ }
4916
+ );
4917
+ } else {
4918
+ return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
4919
+ UncontrolledMaskedField,
4920
+ {
4921
+ ...rest,
4922
+ defaultValue,
4923
+ forwardedRef
4924
+ }
4925
+ );
4926
+ }
4927
+ };
4928
+ MaskedField.displayName = "MaskedField";
4929
+ //# sourceMappingURL=index.js.map