@simplybusiness/mobius 10.4.2 → 10.4.4

package/dist/cjs/components/index.js

@@ -945,9 +945,10 @@ var init_adornmentWithClassName = __esm({
     import_react10 = require("react");
     adornmentWithClassName = (component, validationClasses, className) => {
       if (!component) return null;
-      return (0, import_react10.cloneElement)(component, {
+      const typedComponent = component;
+      return (0, import_react10.cloneElement)(typedComponent, {
         className: (0, import_dedupe12.default)(
-          component.props.className,
+          typedComponent.props.className,
           validationClasses,
           className
         )
@@ -957,12 +958,13 @@ var init_adornmentWithClassName = __esm({
 });
 
 // src/components/TextField/TextField.tsx
-var import_dedupe13, import_TextField, import_jsx_runtime12, TextField;
+var import_dedupe13, import_react11, import_TextField, import_jsx_runtime12, TextFieldInner, TextField;
 var init_TextField = __esm({
   "src/components/TextField/TextField.tsx"() {
     "use strict";
     "use client";
     import_dedupe13 = __toESM(require("classnames/dedupe"));
+    import_react11 = require("react");
     init_hooks();
     init_ErrorMessage2();
     init_Label2();
@@ -970,7 +972,7 @@ var init_TextField = __esm({
     init_adornmentWithClassName();
     import_TextField = require("@simplybusiness/mobius/src/components/TextField/TextField.css");
     import_jsx_runtime12 = require("react/jsx-runtime");
-    TextField = ({ ref, ...props }) => {
+    TextFieldInner = ({ ref, ...props }) => {
       const {
         isDisabled,
         type = "text",
@@ -1064,6 +1066,7 @@ var init_TextField = __esm({
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ErrorMessage, { ...errorMessageProps, errorMessage })
       ] });
     };
+    TextField = (0, import_react11.memo)(TextFieldInner);
     TextField.displayName = "TextField";
   }
 });
@@ -1081,17 +1084,17 @@ var MaskedField_exports = {};
 __export(MaskedField_exports, {
   MaskedField: () => MaskedField
 });
-var import_react48, import_react_imask, import_jsx_runtime75, useAcceptHandler, useCombinedRef, useBlurHandler, ControlledMaskedField, UncontrolledMaskedField, MaskedField;
+var import_react51, import_react_imask, import_jsx_runtime76, useAcceptHandler, useCombinedRef, useBlurHandler, ControlledMaskedField, UncontrolledMaskedField, MaskedField;
 var init_MaskedField = __esm({
   "src/components/MaskedField/MaskedField.tsx"() {
     "use strict";
     "use client";
-    import_react48 = require("react");
+    import_react51 = require("react");
     import_react_imask = require("react-imask");
     init_TextField2();
-    import_jsx_runtime75 = require("react/jsx-runtime");
+    import_jsx_runtime76 = require("react/jsx-runtime");
     useAcceptHandler = (onChange, useMaskedValue, name) => {
-      return (0, import_react48.useCallback)(
+      return (0, import_react51.useCallback)(
         (maskedValue, maskInstance) => {
           if (!onChange) {
             return;
@@ -1107,7 +1110,7 @@ var init_MaskedField = __esm({
       );
     };
     useCombinedRef = (imaskRef, forwardedRef) => {
-      return (0, import_react48.useCallback)(
+      return (0, import_react51.useCallback)(
         (element) => {
           imaskRef.current = element;
           if (typeof forwardedRef === "function") {
@@ -1120,7 +1123,7 @@ var init_MaskedField = __esm({
       );
     };
     useBlurHandler = (onBlur, maskRef, useMaskedValue, name) => {
-      return (0, import_react48.useCallback)(
+      return (0, import_react51.useCallback)(
         (event) => {
           if (!onBlur || !maskRef.current) {
             return;
@@ -1150,7 +1153,7 @@ var init_MaskedField = __esm({
       const { ref: imaskRef, maskRef, setValue } = (0, import_react_imask.useIMask)(mask, { onAccept });
       const combinedRef = useCombinedRef(imaskRef, forwardedRef);
       const handleBlur = useBlurHandler(onBlur, maskRef, useMaskedValue, name);
-      (0, import_react48.useEffect)(() => {
+      (0, import_react51.useEffect)(() => {
         if (!maskRef.current) {
           return;
         }
@@ -1161,7 +1164,7 @@ var init_MaskedField = __esm({
           setValue(stringValue);
         }
       }, [value, maskRef, setValue, imaskRef]);
-      return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
         TextField,
         {
           ...textFieldProps,
@@ -1185,7 +1188,7 @@ var init_MaskedField = __esm({
       const { ref: imaskRef, maskRef } = (0, import_react_imask.useIMask)(mask, { onAccept });
       const combinedRef = useCombinedRef(imaskRef, forwardedRef);
       const handleBlur = useBlurHandler(onBlur, maskRef, useMaskedValue, name);
-      return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
         TextField,
         {
           ...textFieldProps,
@@ -1199,7 +1202,7 @@ var init_MaskedField = __esm({
     MaskedField = ({ ref: forwardedRef, ...props }) => {
       const { value, defaultValue, ...rest } = props;
       if ("value" in props) {
-        return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
           ControlledMaskedField,
           {
             ...rest,
@@ -1208,7 +1211,7 @@ var init_MaskedField = __esm({
           }
         );
       } else {
-        return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
           UncontrolledMaskedField,
           {
             ...rest,
@@ -1662,12 +1665,12 @@ AccordionList.displayName = "AccordionList";
 
 // src/components/AddressLookup/AddressLookup.tsx
 var import_icons3 = require("@simplybusiness/icons");
-var import_react15 = require("react");
+var import_react16 = require("react");
 
 // src/components/Combobox/Combobox.tsx
 var import_mobius_hooks5 = require("@simplybusiness/mobius-hooks");
 var import_dedupe16 = __toESM(require("classnames/dedupe"));
-var import_react14 = require("react");
+var import_react15 = require("react");
 init_hooks();
 init_TextField2();
 
@@ -1706,7 +1709,7 @@ function VisuallyHidden(props) {
 var import_dedupe15 = __toESM(require("classnames/dedupe"));
 
 // src/components/Combobox/Option.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_dedupe14 = __toESM(require("classnames/dedupe"));
 
 // src/components/Combobox/utils.tsx
@@ -1741,13 +1744,13 @@ var Option = ({
   optionTestIdPrefix,
   id
 }) => {
-  const optionRef = (0, import_react11.useRef)(null);
+  const optionRef = (0, import_react12.useRef)(null);
   const optionValue = getOptionValue(option) || "";
   const testId = buildOptionTestId(
     optionTestIdPrefix || "combobox-option",
     optionValue
   );
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (isHighlighted && optionRef.current && optionRef.current.scrollIntoView) {
       optionRef.current.scrollIntoView({ block: "nearest" });
     }
@@ -1851,12 +1854,12 @@ var Listbox = ({
 };
 
 // src/components/Combobox/useComboboxHighlight.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 function useComboboxHighlight(options) {
-  const [highlightedIndex, setHighlightedIndex] = (0, import_react12.useState)(
+  const [highlightedIndex, setHighlightedIndex] = (0, import_react13.useState)(
     options && options.length ? 0 : -1
   );
-  const [highlightedGroupIndex, setHighlightedGroupIndex] = (0, import_react12.useState)(0);
+  const [highlightedGroupIndex, setHighlightedGroupIndex] = (0, import_react13.useState)(0);
   function highlightNextOption() {
     const isGroup = isOptionGroup(options);
     if (!options) {
@@ -1935,7 +1938,7 @@ function useComboboxHighlight(options) {
 
 // src/components/Combobox/useComboboxOptions.ts
 var import_mobius_hooks4 = require("@simplybusiness/mobius-hooks");
-var import_react13 = require("react");
+var import_react14 = require("react");
 function useComboboxOptions({
   options,
   asyncOptions,
@@ -1945,19 +1948,19 @@ function useComboboxOptions({
   skipNextDebounceRef,
   onSearched
 }) {
-  const [filteredOptions, setFilteredOptions] = (0, import_react13.useState)(void 0);
+  const [filteredOptions, setFilteredOptions] = (0, import_react14.useState)(void 0);
   const debouncedInputValue = (0, import_mobius_hooks4.useDebouncedValue)(
     inputValue,
     // Don't debounce synchronous options
     options ? 0 : delay
   );
-  const [isLoading, setIsLoading] = (0, import_react13.useState)(false);
-  const [error3, setError] = (0, import_react13.useState)(null);
-  const asyncOptionsRef = (0, import_react13.useRef)(asyncOptions);
+  const [isLoading, setIsLoading] = (0, import_react14.useState)(false);
+  const [error3, setError] = (0, import_react14.useState)(null);
+  const asyncOptionsRef = (0, import_react14.useRef)(asyncOptions);
   asyncOptionsRef.current = asyncOptions;
-  const onSearchedRef = (0, import_react13.useRef)(onSearched);
+  const onSearchedRef = (0, import_react14.useRef)(onSearched);
   onSearchedRef.current = onSearched;
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     const controller = new AbortController();
     const { signal } = controller;
     const fetchOptions = async () => {
@@ -2044,11 +2047,11 @@ var ComboboxInner = ({
     errorMessage,
     ...otherProps
   } = props;
-  const skipNextDebounceRef = (0, import_react14.useRef)(false);
-  const fallbackRef = (0, import_react14.useRef)(null);
-  const [inputValue, setInputValue] = (0, import_react14.useState)(defaultValue || "");
-  const [isOpen, setIsOpen] = (0, import_react14.useState)(false);
-  const [isChanging, setIsChanging] = (0, import_react14.useState)(false);
+  const skipNextDebounceRef = (0, import_react15.useRef)(false);
+  const fallbackRef = (0, import_react15.useRef)(null);
+  const [inputValue, setInputValue] = (0, import_react15.useState)(defaultValue || "");
+  const [isOpen, setIsOpen] = (0, import_react15.useState)(false);
+  const [isChanging, setIsChanging] = (0, import_react15.useState)(false);
   const { filteredOptions, updateFilteredOptions, isLoading, error: error3 } = useComboboxOptions({
     options,
     asyncOptions,
@@ -2057,7 +2060,7 @@ var ComboboxInner = ({
     minSearchLength,
     skipNextDebounceRef
   });
-  const [validationError, setValidationError] = (0, import_react14.useState)(
+  const [validationError, setValidationError] = (0, import_react15.useState)(
     error3?.message || errorMessage
   );
   const {
@@ -2070,14 +2073,14 @@ var ComboboxInner = ({
     clearHighlight
   } = useComboboxHighlight(filteredOptions);
   const inputRef = ref || fallbackRef;
-  const listboxId = (0, import_react14.useId)();
-  const statusId = (0, import_react14.useId)();
-  const blurTimeoutRef = (0, import_react14.useRef)(null);
-  const userInteractedRef = (0, import_react14.useRef)(false);
-  const justSelectedRef = (0, import_react14.useRef)(false);
+  const listboxId = (0, import_react15.useId)();
+  const statusId = (0, import_react15.useId)();
+  const blurTimeoutRef = (0, import_react15.useRef)(null);
+  const userInteractedRef = (0, import_react15.useRef)(false);
+  const justSelectedRef = (0, import_react15.useRef)(false);
   const { down } = useBreakpoint();
   const isMobile = down("md");
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     setValidationError(error3?.message || errorMessage);
   }, [error3, errorMessage]);
   const getEmptyValue = () => {
@@ -2106,7 +2109,7 @@ var ComboboxInner = ({
       justSelectedRef.current = false;
     }
   };
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (!inputRef || typeof inputRef === "function") return;
     const inputElement = inputRef.current;
     if (!inputElement) return;
@@ -2259,12 +2262,12 @@ var ComboboxInner = ({
       default:
     }
   };
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (value) {
       setInputValue(value);
     }
   }, [value]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (asyncOptions && isChanging) {
       setIsOpen(!!filteredOptions && filteredOptions.length > 0);
     }
@@ -2378,15 +2381,15 @@ var AddressLookup = ({
   errorMessage,
   ...otherProps
 }) => {
-  const [error3, _setError] = (0, import_react15.useState)(null);
-  const setError = (0, import_react15.useCallback)(
+  const [error3, _setError] = (0, import_react16.useState)(null);
+  const setError = (0, import_react16.useCallback)(
     (newError) => {
       if (newError != null) onError?.(newError);
       _setError(newError);
     },
     [onError]
   );
-  const asyncOptions = (0, import_react15.useCallback)(
+  const asyncOptions = (0, import_react16.useCallback)(
     async (searchTerm) => {
       try {
         const response = await addressLookupService.search(searchTerm);
@@ -2633,7 +2636,7 @@ var Box = ({ ref, ...props }) => {
 Box.displayName = "Box";
 
 // src/components/Breadcrumbs/Breadcrumbs.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_dedupe19 = __toESM(require("classnames/dedupe"));
 var import_Breadcrumbs = require("@simplybusiness/mobius/src/components/Breadcrumbs/Breadcrumbs.css");
 var import_jsx_runtime20 = require("react/jsx-runtime");
@@ -2641,26 +2644,22 @@ var Breadcrumbs = ({ ref, ...props }) => {
   const { "aria-label": ariaLabel = "Breadcrumbs" } = props;
   const { navProps } = { navProps: { "aria-label": ariaLabel } };
   const { children, ...otherProps } = props;
-  const childArray = import_react16.Children.toArray(children);
+  const childArray = import_react17.Children.toArray(children);
   const classes = (0, import_dedupe19.default)(
     "mobius",
     "mobius-breadcrumb",
     otherProps.className
   );
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("nav", { ref, ...otherProps, ...navProps, className: classes, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("ul", { children: childArray.map(
-    (child, i) => (0, import_react16.cloneElement)(
-      child,
-      {
-        key: i,
-        isCurrent: i === childArray.length - 1
-      }
-    )
+    (child, i) => (0, import_react17.cloneElement)(child, {
+      isCurrent: i === childArray.length - 1
+    })
   ) }) });
 };
 Breadcrumbs.displayName = "Breadcrumbs";
 
 // src/components/Breadcrumbs/BreadcrumbItem.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_dedupe20 = __toESM(require("classnames/dedupe"));
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var BreadcrumbItem = ({ ref, ...props }) => {
@@ -2684,9 +2683,9 @@ var BreadcrumbItem = ({ ref, ...props }) => {
     "mobius-breadcrumb__item",
     props.className
   );
-  const child = typeof children === "string" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { ...itemProps, children }) : import_react17.Children.only(children);
+  const child = typeof children === "string" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { ...itemProps, children }) : import_react18.Children.only(children);
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("li", { className: classes, children: [
-    (0, import_react17.cloneElement)(child, {
+    (0, import_react18.cloneElement)(child, {
       ...child.props,
       ...itemProps,
       ref
@@ -2761,7 +2760,7 @@ var Button = ({ ref, ...props }) => {
 Button.displayName = "Button";
 
 // src/components/Checkbox/Checkbox.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_dedupe22 = __toESM(require("classnames/dedupe"));
 var import_icons7 = require("@simplybusiness/icons");
 init_ErrorMessage2();
@@ -2790,12 +2789,12 @@ var Checkbox = ({ ref, ...props }) => {
     ["aria-describedby"]: ariaDescribedBy,
     ...rest
   } = props;
-  const [checked, setChecked] = (0, import_react18.useState)(defaultSelected);
-  const fallbackRef = (0, import_react18.useRef)(null);
+  const [checked, setChecked] = (0, import_react19.useState)(defaultSelected);
+  const fallbackRef = (0, import_react19.useRef)(null);
   const refObj = ref || fallbackRef;
-  const inputId = (0, import_react18.useId)();
+  const inputId = (0, import_react19.useId)();
   const isControlled = typeof selected === "boolean";
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (isControlled) {
       setChecked(selected);
     }
@@ -2819,13 +2818,13 @@ var Checkbox = ({ ref, ...props }) => {
   const labelClasses = (0, import_dedupe22.default)("mobius-checkbox__label", sharedClasses);
   const inputClasses = (0, import_dedupe22.default)("mobius-checkbox__input", sharedClasses);
   const iconClasses = (0, import_dedupe22.default)("mobius-checkbox__icon", sharedClasses);
-  const errorMessageId = (0, import_react18.useId)();
+  const errorMessageId = (0, import_react19.useId)();
   const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
   const describedBy = spaceDelimitedList([
     shouldErrorMessageShow,
     ariaDescribedBy
   ]);
-  const labelId = (0, import_react18.useId)();
+  const labelId = (0, import_react19.useId)();
   const handleChange = (event) => {
     setChecked(!checked);
     if (onChange) {
@@ -2872,7 +2871,7 @@ Checkbox.displayName = "Checkbox";
 
 // src/components/Checkbox/CheckboxGroup.tsx
 var import_dedupe23 = __toESM(require("classnames/dedupe"));
-var import_react19 = require("react");
+var import_react20 = require("react");
 init_hooks();
 init_spaceDelimitedList();
 init_ErrorMessage2();
@@ -2896,10 +2895,10 @@ var CheckboxGroup = ({ ref, ...props }) => {
     lastItemDisables = false,
     ...rest
   } = props;
-  const [selected, setSelected] = (0, import_react19.useState)(defaultValue);
-  const isInitializedRef = (0, import_react19.useRef)(false);
-  const prevDefaultValueRef = (0, import_react19.useRef)(defaultValue);
-  (0, import_react19.useEffect)(() => {
+  const [selected, setSelected] = (0, import_react20.useState)(defaultValue);
+  const isInitializedRef = (0, import_react20.useRef)(false);
+  const prevDefaultValueRef = (0, import_react20.useRef)(defaultValue);
+  (0, import_react20.useEffect)(() => {
     const hasChanged = defaultValue.length !== prevDefaultValueRef.current.length || defaultValue.some(
       (val, index) => val !== prevDefaultValueRef.current[index]
     );
@@ -2927,13 +2926,13 @@ var CheckboxGroup = ({ ref, ...props }) => {
     },
     validationClasses
   );
-  const errorMessageId = (0, import_react19.useId)();
+  const errorMessageId = (0, import_react20.useId)();
   const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
   const describedBy = spaceDelimitedList([
     shouldErrorMessageShow,
     props["aria-describedby"]
   ]);
-  const labelId = (0, import_react19.useId)();
+  const labelId = (0, import_react20.useId)();
   const handleChange = (event, isLastItem = false) => {
     const {
       target: { value, checked }
@@ -2951,9 +2950,9 @@ var CheckboxGroup = ({ ref, ...props }) => {
     setSelected(newValue);
     onChange?.(newValue);
   };
-  const childrenArray = import_react19.Children.toArray(children);
+  const childrenArray = import_react20.Children.toArray(children);
   const lastCheckbox = childrenArray.filter(
-    (child) => (0, import_react19.isValidElement)(child) && child.type === Checkbox
+    (child) => (0, import_react20.isValidElement)(child) && child.type === Checkbox
   ).pop();
   const lastCheckboxIsChecked = lastCheckbox && selected.includes(lastCheckbox.props.value);
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
@@ -2965,16 +2964,16 @@ var CheckboxGroup = ({ ref, ...props }) => {
       className: checkboxGroupClasses,
       role: "group",
       style: {
-        "--checkbox-items-per-row": itemsPerRow || import_react19.Children.count(children)
+        "--checkbox-items-per-row": itemsPerRow || import_react20.Children.count(children)
       },
       children: [
         label && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Label, { elementType: "span", id: labelId, className: labelClasses, children: label }),
         /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "mobius-checkbox-group__wrapper", children: childrenArray.map((child) => {
-          if ((0, import_react19.isValidElement)(child)) {
+          if ((0, import_react20.isValidElement)(child)) {
             const isLastItem = child === lastCheckbox;
             const isChildDisabled = isDisabled || lastItemDisables && lastCheckboxIsChecked && !isLastItem;
             const childProps = child.props;
-            return (0, import_react19.cloneElement)(
+            return (0, import_react20.cloneElement)(
               child,
               {
                 isDisabled: isChildDisabled,
@@ -3016,7 +3015,7 @@ Container.displayName = "Container";
 
 // src/components/DateField/DateField.tsx
 var import_dedupe25 = __toESM(require("classnames/dedupe"));
-var import_react20 = require("react");
+var import_react21 = require("react");
 init_mergeRefs();
 init_TextField2();
 
@@ -3066,9 +3065,9 @@ var DateField = ({ ref, ...props }) => {
     value,
     ...otherProps
   } = props;
-  const [error3, setError] = (0, import_react20.useState)(errorMessage);
-  const [isInvalid, setIsInvalid] = (0, import_react20.useState)(void 0);
-  const localRef = (0, import_react20.useRef)(null);
+  const [error3, setError] = (0, import_react21.useState)(errorMessage);
+  const [isInvalid, setIsInvalid] = (0, import_react21.useState)(void 0);
+  const localRef = (0, import_react21.useRef)(null);
   const classes = (0, import_dedupe25.default)("mobius-date-field", className);
   const formattedMin = min ? convertToDateFormat(min, format) : void 0;
   const formattedMax = max ? convertToDateFormat(max, format) : void 0;
@@ -3082,7 +3081,7 @@ var DateField = ({ ref, ...props }) => {
     setError(props.errorMessage);
     setIsInvalid(false);
   };
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!isValidDate(min, format)) {
       setInvalidState(`Invalid min date: ${min}`);
       return;
@@ -3141,13 +3140,13 @@ Content.displayName = "Content";
 
 // src/components/Drawer/Drawer.tsx
 var import_dedupe26 = __toESM(require("classnames/dedupe"));
-var import_react22 = require("react");
+var import_react23 = require("react");
 init_hooks();
 init_utils();
 
 // src/components/Drawer/DrawerContext.tsx
-var import_react21 = require("react");
-var DrawerContext = (0, import_react21.createContext)({
+var import_react22 = require("react");
+var DrawerContext = (0, import_react22.createContext)({
   onClose: () => {
   },
   closeLabel: void 0,
@@ -3169,8 +3168,8 @@ var Drawer = ({ ref, ...props }) => {
     onClose,
     children
   } = props;
-  const dialogRef = (0, import_react22.useRef)(null);
-  const [shouldTransition, setShouldTransition] = (0, import_react22.useState)(false);
+  const dialogRef = (0, import_react23.useRef)(null);
+  const [shouldTransition, setShouldTransition] = (0, import_react23.useState)(false);
   const { close } = useDialog({
     ref: dialogRef,
     isOpen,
@@ -3181,8 +3180,8 @@ var Drawer = ({ ref, ...props }) => {
       CSSVariable: TRANSITION_CSS_VARIABLE
     }
   });
-  const hiddenId = `dialog-screen-reader-announce-${(0, import_react22.useId)()}`;
-  const headerId = `dialog-header-${(0, import_react22.useId)()}`;
+  const hiddenId = `dialog-screen-reader-announce-${(0, import_react23.useId)()}`;
+  const headerId = `dialog-header-${(0, import_react23.useId)()}`;
   const dialogClasses = (0, import_dedupe26.default)(
     "mobius",
     "mobius-drawer",
@@ -3192,10 +3191,10 @@ var Drawer = ({ ref, ...props }) => {
       "--should-transition": shouldTransition
     }
   );
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     setShouldTransition(supportsDialog());
   }, []);
-  const contextValue = (0, import_react22.useMemo)(
+  const contextValue = (0, import_react23.useMemo)(
     () => ({
       onClose: close,
       closeLabel,
@@ -3206,7 +3205,7 @@ var Drawer = ({ ref, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
     "dialog",
     {
-      id: (0, import_react22.useId)(),
+      id: (0, import_react23.useId)(),
       ref: mergeRefs([dialogRef, ref]),
       onCancel: close,
       className: dialogClasses,
@@ -3222,9 +3221,9 @@ var Drawer = ({ ref, ...props }) => {
 Drawer.displayName = "Drawer";
 
 // src/components/Drawer/useDrawer.ts
-var import_react23 = require("react");
+var import_react24 = require("react");
 var useDrawer = () => {
-  const { onClose, closeLabel, headerId } = (0, import_react23.useContext)(DrawerContext);
+  const { onClose, closeLabel, headerId } = (0, import_react24.useContext)(DrawerContext);
   return { onClose, closeLabel, headerId };
 };
 
@@ -3263,7 +3262,7 @@ var Drawer2 = Object.assign(Drawer, {
 Drawer2.displayName = "Drawer";
 
 // src/components/DropdownMenu/DropdownMenu.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_react_accessible_dropdown_menu_hook = __toESM(require("react-accessible-dropdown-menu-hook"));
 var import_dedupe27 = __toESM(require("classnames/dedupe"));
 var import_DropdownMenu = require("@simplybusiness/mobius/src/components/DropdownMenu/DropdownMenu.css");
@@ -3276,8 +3275,8 @@ var DropdownMenu = ({ ref, ...props }) => {
     children,
     ...otherProps
   } = props;
-  const [activeId, setActiveId] = (0, import_react24.useState)(null);
-  const numberOfItems = import_react24.Children.count(children);
+  const [activeId, setActiveId] = (0, import_react25.useState)(null);
+  const numberOfItems = import_react25.Children.count(children);
   const {
     buttonProps,
     itemProps,
@@ -3301,15 +3300,15 @@ var DropdownMenu = ({ ref, ...props }) => {
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Element, { ref, ...otherProps, className: classes, children: [
-    trigger ? (0, import_react24.cloneElement)(trigger, {
+    trigger ? (0, import_react25.cloneElement)(trigger, {
       className: triggerClasses,
       open,
       label,
       ...buttonProps
     }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { className: triggerClasses, ...buttonProps, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("ul", { className: listClasses, role: "menu", children: import_react24.Children.map(children, (child, index) => {
-      if ((0, import_react24.isValidElement)(child)) {
-        return (0, import_react24.cloneElement)(child, {
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("ul", { className: listClasses, role: "menu", children: import_react25.Children.map(children, (child, index) => {
+      if ((0, import_react25.isValidElement)(child)) {
+        return (0, import_react25.cloneElement)(child, {
           onClick: () => handleChildClick(child.props, index),
           active: index === activeId,
           ...itemProps[index]
@@ -3322,7 +3321,7 @@ var DropdownMenu = ({ ref, ...props }) => {
 DropdownMenu.displayName = "DropdownMenu";
 
 // src/components/DropdownMenu/Item.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_dedupe28 = __toESM(require("classnames/dedupe"));
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var Item = ({ ref, ...props }) => {
@@ -3339,18 +3338,15 @@ var Item = ({ ref, ...props }) => {
     { "--is-active": active },
     otherProps.className
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Element, { ref, onClick, ...otherProps, children: import_react25.Children.map(children, (child) => {
-    if ((0, import_react25.isValidElement)(child)) {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Element, { ref, onClick, ...otherProps, children: import_react26.Children.map(children, (child) => {
+    if ((0, import_react26.isValidElement)(child)) {
       const childClasses = (0, import_dedupe28.default)(
         child.props.className,
         classes
       );
-      return (0, import_react25.cloneElement)(
-        child,
-        {
-          className: childClasses
-        }
-      );
+      return (0, import_react26.cloneElement)(child, {
+        className: childClasses
+      });
     }
     return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: classes, children: child });
   }) });
@@ -3371,7 +3367,7 @@ init_ErrorMessage2();
 
 // src/components/Fieldset/Fieldset.tsx
 var import_dedupe29 = __toESM(require("classnames/dedupe"));
-var import_react26 = require("react");
+var import_react27 = require("react");
 var import_Fieldset = require("@simplybusiness/mobius/src/components/Fieldset/Fieldset.css");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var useFieldset = (props) => {
@@ -3380,7 +3376,7 @@ var useFieldset = (props) => {
   let containerProps = {
     role: "group"
   };
-  const legendId = (0, import_react26.useId)();
+  const legendId = (0, import_react27.useId)();
   if (legend) {
     legendProps = {
       ...legendProps,
@@ -3407,7 +3403,7 @@ var Fieldset = ({ ref: _ref, ...props }) => {
   const classes = (0, import_dedupe29.default)("mobius", "mobius-fieldset", props.className);
   legendProps.className = "mobius-fieldset__legend";
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Flex, { ...containerProps, ...otherProps, className: classes, children: [
-    legend && (0, import_react26.cloneElement)(legendComponent, { ...legendProps }, [legend]),
+    legend && (0, import_react27.cloneElement)(legendComponent, { ...legendProps }, [legend]),
     children
   ] });
 };
@@ -3450,7 +3446,7 @@ var Grid = ({ ref, ...props }) => {
 Grid.displayName = "Grid";
 
 // src/components/Grid/Item.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 var import_dedupe31 = __toESM(require("classnames/dedupe"));
 init_hooks();
 var import_jsx_runtime36 = require("react/jsx-runtime");
@@ -3488,9 +3484,9 @@ var GridItem = ({ ref, ...props }) => {
     xl,
     xxl
   });
-  const [responsiveSpan, setResponsiveSpan] = (0, import_react27.useState)();
+  const [responsiveSpan, setResponsiveSpan] = (0, import_react28.useState)();
   const classes = (0, import_dedupe31.default)("mobius", "mobius-grid__item", className);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     setResponsiveSpan(breakpointMap[breakpointSize]);
   }, [breakpointSize, breakpointMap]);
   const styles = {
@@ -3586,7 +3582,7 @@ function LinkButton({
 }
 
 // src/components/List/List.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_dedupe35 = __toESM(require("classnames/dedupe"));
 var import_List = require("@simplybusiness/mobius/src/components/List/List.css");
 var import_jsx_runtime40 = require("react/jsx-runtime");
@@ -3613,9 +3609,9 @@ var List = ({ ref, ...props }) => {
       ref,
       ...mappedProps,
       className: classes,
-      children: import_react28.Children.map(children, (child) => {
-        if ((0, import_react28.isValidElement)(child)) {
-          return (0, import_react28.cloneElement)(child, {
+      children: import_react29.Children.map(children, (child) => {
+        if ((0, import_react29.isValidElement)(child)) {
+          return (0, import_react29.cloneElement)(child, {
             parentIcon: icon
           });
         }
@@ -3734,16 +3730,16 @@ var Content2 = ({ ref, children, ...otherProps }) => /* @__PURE__ */ (0, import_
 Content2.displayName = "Content";
 
 // src/components/Modal/Header.tsx
-var import_react31 = require("react");
+var import_react32 = require("react");
 var import_icons10 = require("@simplybusiness/icons");
 init_Icon2();
 
 // src/components/Modal/useModal.ts
-var import_react30 = require("react");
+var import_react31 = require("react");
 
 // src/components/Modal/ModalContext.tsx
-var import_react29 = require("react");
-var ModalContext = (0, import_react29.createContext)({
+var import_react30 = require("react");
+var ModalContext = (0, import_react30.createContext)({
   onClose: () => {
   },
   closeLabel: void 0,
@@ -3754,7 +3750,7 @@ var ModalContext = (0, import_react29.createContext)({
 
 // src/components/Modal/useModal.ts
 var useModal = () => {
-  const { onClose, closeLabel, titleId, setTitleId } = (0, import_react30.useContext)(ModalContext);
+  const { onClose, closeLabel, titleId, setTitleId } = (0, import_react31.useContext)(ModalContext);
   return { onClose, closeLabel, titleId, setTitleId };
 };
 
@@ -3762,8 +3758,8 @@ var useModal = () => {
 var import_jsx_runtime45 = require("react/jsx-runtime");
 var Header2 = ({ ref, children, ...otherProps }) => {
   const { onClose, closeLabel, setTitleId } = useModal();
-  const titleId = (0, import_react31.useId)();
-  (0, import_react31.useEffect)(() => {
+  const titleId = (0, import_react32.useId)();
+  (0, import_react32.useEffect)(() => {
     setTitleId(titleId);
   }, [titleId, setTitleId]);
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
@@ -3797,7 +3793,7 @@ Header2.displayName = "Header";
 
 // src/components/Modal/Modal.tsx
 var import_dedupe39 = __toESM(require("classnames/dedupe"));
-var import_react32 = require("react");
+var import_react33 = require("react");
 init_hooks();
 init_utils();
 init_polyfill_tests();
@@ -3817,11 +3813,11 @@ var Modal = ({ ref, ...props }) => {
     animation,
     ...rest
   } = props;
-  const [shouldTransition, setShouldTransition] = (0, import_react32.useState)(false);
-  (0, import_react32.useEffect)(() => {
+  const [shouldTransition, setShouldTransition] = (0, import_react33.useState)(false);
+  (0, import_react33.useEffect)(() => {
     setShouldTransition(supportsDialog());
   }, []);
-  const dialogRef = (0, import_react32.useRef)(null);
+  const dialogRef = (0, import_react33.useRef)(null);
   const { close } = useDialog({
     ref: dialogRef,
     isOpen,
@@ -3845,11 +3841,11 @@ var Modal = ({ ref, ...props }) => {
     },
     className
   );
-  const [titleId, setTitleId] = (0, import_react32.useState)(void 0);
-  const handleSetTitleId = (0, import_react32.useCallback)((id) => {
+  const [titleId, setTitleId] = (0, import_react33.useState)(void 0);
+  const handleSetTitleId = (0, import_react33.useCallback)((id) => {
     setTitleId(id);
   }, []);
-  const contextValue = (0, import_react32.useMemo)(
+  const contextValue = (0, import_react33.useMemo)(
     () => ({
       onClose: close,
       closeLabel,
@@ -3886,7 +3882,7 @@ Modal2.displayName = "Modal";
 
 // src/components/NumberField/NumberField.tsx
 var import_dedupe40 = __toESM(require("classnames/dedupe"));
-var import_react33 = require("react");
+var import_react34 = require("react");
 init_TextField2();
 var import_NumberField = require("@simplybusiness/mobius/src/components/NumberField/NumberField.css");
 var import_jsx_runtime47 = require("react/jsx-runtime");
@@ -3905,9 +3901,9 @@ var NumberField = ({ ref, ...props }) => {
     onBlur: customOnBlur,
     ...rest
   } = otherProps;
-  const focusedInputRef = (0, import_react33.useRef)(null);
-  const wheelHandler = (0, import_react33.useCallback)((ev) => ev.preventDefault(), []);
-  (0, import_react33.useEffect)(() => {
+  const focusedInputRef = (0, import_react34.useRef)(null);
+  const wheelHandler = (0, import_react34.useCallback)((ev) => ev.preventDefault(), []);
+  (0, import_react34.useEffect)(() => {
     return () => {
       focusedInputRef.current?.removeEventListener("wheel", wheelHandler);
       focusedInputRef.current = null;
@@ -3988,7 +3984,7 @@ Option2.displayName = "Option";
 
 // src/components/PasswordField/PasswordField.tsx
 var import_dedupe41 = __toESM(require("classnames/dedupe"));
-var import_react34 = require("react");
+var import_react35 = require("react");
 init_mergeRefs();
 init_TextField2();
 
@@ -4023,10 +4019,10 @@ var PasswordField = ({
   autoComplete = "current-password",
   ...props
 }) => {
-  const [show, setShow] = (0, import_react34.useState)(false);
+  const [show, setShow] = (0, import_react35.useState)(false);
   const type = show ? "text" : "password";
   const classes = (0, import_dedupe41.default)("mobius-password-field", className);
-  const localRef = (0, import_react34.useRef)(null);
+  const localRef = (0, import_react35.useRef)(null);
   const handleShowHideButtonClick = () => {
     const selectionStart = localRef.current?.selectionStart;
     const selectionEnd = localRef.current?.selectionEnd;
@@ -4053,59 +4049,231 @@ var PasswordField = ({
 PasswordField.displayName = "PasswordField";
 
 // src/components/Popover/Popover.tsx
-var import_react35 = require("@floating-ui/react");
 var import_icons12 = require("@simplybusiness/icons");
 var import_dedupe42 = __toESM(require("classnames/dedupe"));
-var import_react36 = require("react");
+var import_react39 = require("react");
+var import_react_dom = require("react-dom");
 var import_mobius_hooks6 = require("@simplybusiness/mobius-hooks");
 init_Icon2();
-var import_Popover = require("@simplybusiness/mobius/src/components/Popover/Popover.css");
+
+// src/components/Popover/Arrow.tsx
 var import_jsx_runtime51 = require("react/jsx-runtime");
+var Arrow = ({ ref, width = 20, className, style }) => {
+  const height = width / 2;
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+    "svg",
+    {
+      ref,
+      className,
+      "aria-hidden": "true",
+      width,
+      height,
+      viewBox: `0 0 ${width} ${height}`,
+      style,
+      children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("path", { d: `M0,0 H${width} L${width / 2},${height} Z` })
+    }
+  );
+};
+
+// src/components/Popover/useAutoUpdate.ts
+var import_react36 = require("react");
+var useAutoUpdate = ({
+  referenceRef,
+  floatingRef,
+  onUpdate,
+  enabled
+}) => {
+  (0, import_react36.useEffect)(() => {
+    if (!enabled) return;
+    const reference = referenceRef.current;
+    const floating = floatingRef.current;
+    const scrollOpts = {
+      capture: true,
+      passive: true
+    };
+    window.addEventListener("scroll", onUpdate, scrollOpts);
+    window.addEventListener("resize", onUpdate, { passive: true });
+    const observer = typeof ResizeObserver === "function" ? new ResizeObserver(onUpdate) : null;
+    if (observer && reference) observer.observe(reference);
+    if (observer && floating) observer.observe(floating);
+    return () => {
+      window.removeEventListener("scroll", onUpdate, scrollOpts);
+      window.removeEventListener("resize", onUpdate);
+      observer?.disconnect();
+    };
+  }, [enabled, onUpdate, referenceRef, floatingRef]);
+};
+
+// src/components/Popover/useFloatingPosition.ts
+var import_react37 = require("react");
+var ABSOLUTE_FLOATING_STYLES = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  width: "max-content"
+};
+var FIXED_FLOATING_STYLES = {
+  position: "fixed",
+  top: 0,
+  left: 0,
+  width: "max-content"
+};
+var INITIAL_ARROW_STYLES = {
+  position: "absolute"
+};
+var VIEWPORT_PADDING = 0;
+var createsFixedContainingBlock = (el) => {
+  const style = window.getComputedStyle(el);
+  return style.transform !== "none" || style.filter !== "none" || style.backdropFilter !== "none" || style.perspective !== "none" || /\b(transform|filter|perspective)\b/.test(style.willChange);
+};
+var useFloatingPosition = ({
+  referenceRef,
+  floatingRef,
+  arrowRef,
+  isOpen,
+  offsetPx,
+  arrowWidth,
+  useFixedStrategy
+}) => {
+  const update = (0, import_react37.useCallback)(() => {
+    const reference = referenceRef.current;
+    const floating = floatingRef.current;
+    if (!reference || !floating) return;
+    const refRect = reference.getBoundingClientRect();
+    const floatingWidth = floating.offsetWidth;
+    const floatingHeight = floating.offsetHeight;
+    const scrollX = useFixedStrategy ? 0 : window.scrollX;
+    const scrollY = useFixedStrategy ? 0 : window.scrollY;
+    const parent = floating.parentElement;
+    const parentIsCb = useFixedStrategy && !!parent && createsFixedContainingBlock(parent);
+    const boundsRect = parentIsCb ? parent.getBoundingClientRect() : {
+      left: 0,
+      top: 0,
+      right: window.innerWidth,
+      bottom: window.innerHeight
+    };
+    const bottomTopViewport = refRect.bottom + offsetPx;
+    const topTopViewport = refRect.top - floatingHeight - offsetPx;
+    const overflowsBottom = bottomTopViewport + floatingHeight > boundsRect.bottom;
+    const fitsTop = topTopViewport >= boundsRect.top;
+    const nextPlacement = overflowsBottom && fitsTop ? "top" : "bottom";
+    const topViewport = nextPlacement === "bottom" ? bottomTopViewport : topTopViewport;
+    const rawLeftViewport = refRect.left + refRect.width / 2 - floatingWidth / 2;
+    const minLeftViewport = boundsRect.left + VIEWPORT_PADDING;
+    const maxLeftViewport = Math.max(
+      minLeftViewport,
+      boundsRect.right - floatingWidth - VIEWPORT_PADDING
+    );
+    const leftViewport = Math.min(
+      Math.max(minLeftViewport, rawLeftViewport),
+      maxLeftViewport
+    );
+    const cbOffsetLeft = parentIsCb ? boundsRect.left : 0;
+    const cbOffsetTop = parentIsCb ? boundsRect.top : 0;
+    floating.style.top = `${topViewport + scrollY - cbOffsetTop}px`;
+    floating.style.left = `${leftViewport + scrollX - cbOffsetLeft}px`;
+    const arrow = arrowRef.current;
+    if (!arrow) return;
+    const arrowHalf = arrowWidth / 2;
+    const refCenterX = refRect.left + refRect.width / 2;
+    const rawArrowLeft = refCenterX - leftViewport - arrowHalf;
+    const maxArrowLeft = Math.max(0, floatingWidth - arrowWidth);
+    const arrowLeft = Math.min(Math.max(0, rawArrowLeft), maxArrowLeft);
+    arrow.style.left = `${arrowLeft}px`;
+    if (nextPlacement === "bottom") {
+      arrow.style.bottom = "100%";
+      arrow.style.top = "";
+      arrow.style.transform = "rotate(180deg)";
+    } else {
+      arrow.style.top = "100%";
+      arrow.style.bottom = "";
+      arrow.style.transform = "";
+    }
+  }, [
+    referenceRef,
+    floatingRef,
+    arrowRef,
+    offsetPx,
+    arrowWidth,
+    useFixedStrategy
+  ]);
+  (0, import_react37.useLayoutEffect)(() => {
+    if (!isOpen) return;
+    update();
+  }, [isOpen, update]);
+  return {
+    initialFloatingStyles: useFixedStrategy ? FIXED_FLOATING_STYLES : ABSOLUTE_FLOATING_STYLES,
+    initialArrowStyles: INITIAL_ARROW_STYLES,
+    update
+  };
+};
+
+// src/components/Popover/useOutsidePress.ts
+var import_react38 = require("react");
+var useOutsidePress = ({
+  referenceRef,
+  floatingRef,
+  enabled,
+  onOutsidePress
+}) => {
+  (0, import_react38.useEffect)(() => {
+    if (!enabled) return;
+    const handler = (event) => {
+      const target = event.target;
+      if (!target) return;
+      if (referenceRef.current?.contains(target)) return;
+      if (floatingRef.current?.contains(target)) return;
+      onOutsidePress(event);
+    };
+    document.addEventListener("pointerdown", handler);
+    return () => document.removeEventListener("pointerdown", handler);
+  }, [enabled, onOutsidePress, referenceRef, floatingRef]);
+};
+
+// src/components/Popover/Popover.tsx
+var import_Popover = require("@simplybusiness/mobius/src/components/Popover/Popover.css");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var OFFSET_FROM_CONTENT_DEFAULT = 10;
+var ARROW_WIDTH = 20;
 var Popover = (props) => {
   const { trigger, children, onOpen, onClose, className } = props;
-  const arrowRef = (0, import_react36.useRef)(null);
-  const floatingContainerRef = (0, import_react36.useRef)(null);
-  const [isOpen, setIsOpen] = (0, import_react36.useState)(false);
-  const { refs, floatingStyles, context } = (0, import_react35.useFloating)({
-    open: isOpen,
-    onOpenChange: setIsOpen,
-    whileElementsMounted: import_react35.autoUpdate,
-    middleware: [
-      (0, import_react35.arrow)({
-        element: arrowRef
-      }),
-      (0, import_react35.offset)(OFFSET_FROM_CONTENT_DEFAULT),
-      (0, import_react35.shift)(),
-      (0, import_react35.flip)()
-    ]
+  const referenceRef = (0, import_react39.useRef)(null);
+  const floatingRef = (0, import_react39.useRef)(null);
+  const arrowRef = (0, import_react39.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react39.useState)(false);
+  const [portalTarget, setPortalTarget] = (0, import_react39.useState)(null);
+  const isInsideDialog = portalTarget !== null && portalTarget.tagName === "DIALOG";
+  const { initialFloatingStyles, initialArrowStyles, update } = useFloatingPosition({
+    referenceRef,
+    floatingRef,
+    arrowRef,
+    isOpen,
+    offsetPx: OFFSET_FROM_CONTENT_DEFAULT,
+    arrowWidth: ARROW_WIDTH,
+    useFixedStrategy: isInsideDialog
   });
-  const dismiss = (0, import_react35.useDismiss)(context, {
-    bubbles: true,
-    outsidePress: (event) => {
-      const toggle = refs.reference.current;
-      const isToggleClick = !toggle?.contains(event.target);
-      if (isToggleClick) {
-        onClose?.();
-      }
-      return true;
+  useAutoUpdate({
+    referenceRef,
+    floatingRef,
+    onUpdate: update,
+    enabled: isOpen
+  });
+  useOutsidePress({
+    referenceRef,
+    floatingRef,
+    enabled: isOpen,
+    onOutsidePress: () => {
+      onClose?.();
+      setIsOpen(false);
     }
   });
-  const { getReferenceProps, getFloatingProps } = (0, import_react35.useInteractions)([dismiss]);
   const containerClasses = (0, import_dedupe42.default)(
     "mobius",
     "mobius-popover__container",
     className
   );
-  const setFloatingRef = (0, import_react36.useCallback)(
-    (node) => {
-      refs.setFloating(node);
-      floatingContainerRef.current = node;
-    },
-    [refs]
-  );
-  (0, import_react36.useEffect)(() => {
-    const el = floatingContainerRef.current;
+  (0, import_react39.useEffect)(() => {
+    const el = floatingRef.current;
     if (!el) return;
     const preventLabelActivation = (e) => {
       const target = e.target;
@@ -4122,77 +4290,82 @@ var Popover = (props) => {
       onClose?.();
       return;
     }
+    const dialog = referenceRef.current?.closest("dialog");
+    setPortalTarget(dialog ?? document.body);
     setIsOpen(true);
     onOpen?.();
   };
-  const triggerComponent = (0, import_react36.cloneElement)(trigger, {
-    ref: refs.setReference,
+  const setReferenceRef = (0, import_react39.useCallback)((node) => {
+    referenceRef.current = node;
+  }, []);
+  const triggerComponent = (0, import_react39.cloneElement)(trigger, {
+    ref: setReferenceRef,
     className: (0, import_dedupe42.default)(
       trigger.props.className,
       "mobius-popover__toggle"
     ),
-    onClick: toggleVisibility,
-    ...getReferenceProps()
+    onClick: toggleVisibility
   });
   (0, import_mobius_hooks6.useWindowEvent)("keydown", (e) => {
-    if (e.key === "Escape") {
+    if (e.key === "Escape" && isOpen) {
+      setIsOpen(false);
       onClose?.();
       e.preventDefault();
       e.stopPropagation();
     }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
-    triggerComponent,
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
-      "div",
-      {
-        className: containerClasses,
-        ref: setFloatingRef,
-        style: floatingStyles,
-        ...getFloatingProps(),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "mobius-popover", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("header", { className: "mobius-popover__header", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-              Button,
-              {
-                type: "button",
-                className: "mobius-popover__close-button",
-                onClick: toggleVisibility,
-                "aria-label": "Close",
-                variant: "ghost",
-                children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-                  Icon,
-                  {
-                    icon: import_icons12.cross,
-                    size: "md",
-                    className: "mobius-popover__close-icon"
-                  }
-                )
-              }
-            ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "mobius-popover__body", children })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-            import_react35.FloatingArrow,
+  const floatingElement = isOpen ? /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+    "div",
+    {
+      className: containerClasses,
+      ref: floatingRef,
+      style: initialFloatingStyles,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "mobius-popover", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("header", { className: "mobius-popover__header", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+            Button,
             {
-              ref: arrowRef,
-              context,
-              width: 20,
-              className: "mobius-popover__arrow-icon"
+              type: "button",
+              className: "mobius-popover__close-button",
+              onClick: toggleVisibility,
+              "aria-label": "Close",
+              variant: "ghost",
+              children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+                Icon,
+                {
+                  icon: import_icons12.cross,
+                  size: "md",
+                  className: "mobius-popover__close-icon"
+                }
+              )
             }
-          )
-        ]
-      }
-    )
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "mobius-popover__body", children })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+          Arrow,
+          {
+            ref: arrowRef,
+            style: initialArrowStyles,
+            className: "mobius-popover__arrow-icon",
+            width: ARROW_WIDTH
+          }
+        )
+      ]
+    }
+  ) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
+    triggerComponent,
+    floatingElement && portalTarget ? (0, import_react_dom.createPortal)(floatingElement, portalTarget) : null
   ] });
 };
 
 // src/components/Progress/Progress.tsx
 var import_dedupe43 = __toESM(require("classnames/dedupe"));
-var import_react37 = require("react");
+var import_react40 = require("react");
 init_Label2();
 var import_Progress = require("@simplybusiness/mobius/src/components/Progress/Progress.css");
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 function warnAboutInvalidValues(value, minValue, maxValue) {
   if (minValue > maxValue) {
     console.warn("minValue is greater than maxValue");
@@ -4212,7 +4385,7 @@ var sanitizedValue = (value, defaultValue) => {
 };
 var getLabelComponent = (label, progressLabelId, showLabel) => {
   if (showLabel) {
-    return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       Label,
       {
         id: progressLabelId,
@@ -4222,7 +4395,7 @@ var getLabelComponent = (label, progressLabelId, showLabel) => {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     Label,
     {
       id: progressLabelId,
@@ -4236,8 +4409,8 @@ var DEFAULT_VALUE = 0;
 var DEFAULT_MIN_VALUE = 0;
 var DEFAULT_MAX_VALUE = 100;
 var Progress = ({ ref, ...props }) => {
-  const progressId = (0, import_react37.useId)();
-  const progressLabelId = (0, import_react37.useId)();
+  const progressId = (0, import_react40.useId)();
+  const progressLabelId = (0, import_react40.useId)();
   const {
     id,
     label,
@@ -4272,7 +4445,7 @@ var Progress = ({ ref, ...props }) => {
   progressBarProps["aria-valuenow"] = value.toString();
   progressBarProps["aria-valuetext"] = valueFormatter instanceof Function ? valueFormatter(value, minValue, maxValue) : barWidth;
   const labelComponent = getLabelComponent(label, progressLabelId, showLabel);
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
     "div",
     {
       id: id || progressId,
@@ -4283,8 +4456,8 @@ var Progress = ({ ref, ...props }) => {
       "aria-labelledby": progressLabelId,
       children: [
         labelComponent,
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "mobius-progress__track", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "mobius-progress__bar", style: { width: barWidth } }) }),
-        showValueLabel && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Label, { "data-testid": "value-label", elementType: "span", children: progressBarProps["aria-valuetext"] })
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "mobius-progress__track", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "mobius-progress__bar", style: { width: barWidth } }) }),
+        showValueLabel && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Label, { "data-testid": "value-label", elementType: "span", children: progressBarProps["aria-valuetext"] })
       ]
     }
   );
@@ -4293,11 +4466,11 @@ Progress.displayName = "Progress";
 
 // src/components/Radio/Radio.tsx
 var import_dedupe44 = __toESM(require("classnames/dedupe"));
-var import_react38 = require("react");
+var import_react41 = require("react");
 init_ErrorMessage2();
 init_Label2();
 var import_Radio = require("@simplybusiness/mobius/src/components/Radio/Radio.css");
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var Radio = ({ ref, ...props }) => {
   const {
     children,
@@ -4321,19 +4494,19 @@ var Radio = ({ ref, ...props }) => {
   const isMultiline = label && children;
   const isControlled = selected !== void 0;
   const isChecked = isControlled ? selected === value : defaultChecked;
-  const contentRef = (0, import_react38.useRef)(null);
-  const prevOverflowRef = (0, import_react38.useRef)({
+  const contentRef = (0, import_react41.useRef)(null);
+  const prevOverflowRef = (0, import_react41.useRef)({
     vertical: false,
     horizontal: false
   });
-  const hasIconFirst = (0, import_react38.useMemo)(() => {
-    if (!children || import_react38.Children.count(children) === 0) return false;
-    const firstChild = import_react38.Children.toArray(children)[0];
-    if (!(0, import_react38.isValidElement)(firstChild)) return false;
+  const hasIconFirst = (0, import_react41.useMemo)(() => {
+    if (!children || import_react41.Children.count(children) === 0) return false;
+    const firstChild = import_react41.Children.toArray(children)[0];
+    if (!(0, import_react41.isValidElement)(firstChild)) return false;
     const props2 = firstChild.props;
     return "icon" in props2 && props2.icon !== void 0;
   }, [children]);
-  (0, import_react38.useLayoutEffect)(() => {
+  (0, import_react41.useLayoutEffect)(() => {
     if (!contentRef.current || !onOverflow) return;
     if (orientation === "vertical") {
       return;
@@ -4382,9 +4555,9 @@ var Radio = ({ ref, ...props }) => {
       onChange(adaptedEvent);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Label, { className: containerClasses, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Label, { className: containerClasses, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
         "input",
         {
           "aria-describedby": otherProps["aria-describedby"],
@@ -4401,25 +4574,25 @@ var Radio = ({ ref, ...props }) => {
           ...rest
         }
       ),
-      isMultiline ? /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { ref: contentRef, className: "mobius-radio__content--multiline", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "mobius-radio__content-first-line", children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "mobius-radio__extra-content", children })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { ref: contentRef, className: "mobius-radio__content", children: label || children })
+      isMultiline ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { ref: contentRef, className: "mobius-radio__content--multiline", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "mobius-radio__content-first-line", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "mobius-radio__extra-content", children })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { ref: contentRef, className: "mobius-radio__content", children: label || children })
     ] }),
-    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ErrorMessage, { errorMessage })
+    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ErrorMessage, { errorMessage })
   ] });
 };
 Radio.displayName = "Radio";
 
 // src/components/Radio/RadioGroup.tsx
 var import_dedupe45 = __toESM(require("classnames/dedupe"));
-var import_react39 = require("react");
+var import_react42 = require("react");
 init_hooks();
 init_spaceDelimitedList();
 init_ErrorMessage2();
 init_Label2();
 init_Stack2();
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var getDefaultVal = (children, defaultValue) => {
   if (Array.isArray(children) && defaultValue) {
     const option = children?.find((item) => item.props.value === defaultValue);
@@ -4447,15 +4620,15 @@ var RadioGroup = ({ ref, ...props }) => {
     ...rest
   } = props;
   const defaultSelected = getDefaultVal(children, value || defaultValue);
-  const [selected, setSelected] = (0, import_react39.useState)(defaultSelected);
-  const overflowsRef = (0, import_react39.useRef)({});
-  const [hasOverflow, setHasOverflow] = (0, import_react39.useState)(false);
-  (0, import_react39.useEffect)(() => {
+  const [selected, setSelected] = (0, import_react42.useState)(defaultSelected);
+  const overflowsRef = (0, import_react42.useRef)({});
+  const [hasOverflow, setHasOverflow] = (0, import_react42.useState)(false);
+  (0, import_react42.useEffect)(() => {
     if (value !== void 0) {
       setSelected(value);
     }
   }, [value]);
-  const handleOverflow = (0, import_react39.useCallback)(
+  const handleOverflow = (0, import_react42.useCallback)(
     (radioValue, overflow) => {
       overflowsRef.current = {
         ...overflowsRef.current,
@@ -4489,16 +4662,16 @@ var RadioGroup = ({ ref, ...props }) => {
     [`--is-${effectiveOrientation}`]: true
   });
   const labelClasses = (0, import_dedupe45.default)(radioClasses, validationClasses);
-  const errorMessageId = (0, import_react39.useId)();
-  const defaultNameAttrId = (0, import_react39.useId)();
+  const errorMessageId = (0, import_react42.useId)();
+  const defaultNameAttrId = (0, import_react42.useId)();
   const nameAttribute = name || defaultNameAttrId;
   const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
   const describedBy = spaceDelimitedList([
     shouldErrorMessageShow,
     props["aria-describedby"]
   ]);
-  const labelId = (0, import_react39.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  const labelId = (0, import_react42.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     "div",
     {
       ...rest,
@@ -4514,12 +4687,12 @@ var RadioGroup = ({ ref, ...props }) => {
       ref,
       className: radioGroupClasses,
       role: "radiogroup",
-      children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Stack, { gap: "xs", children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Label, { htmlFor: name, id: labelId, className: labelClasses, children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: radioWrapperClasses, children: import_react39.Children.map(children, (child) => {
-          if ((0, import_react39.isValidElement)(child)) {
+      children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Stack, { gap: "xs", children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Label, { htmlFor: name, id: labelId, className: labelClasses, children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: radioWrapperClasses, children: import_react42.Children.map(children, (child) => {
+          if ((0, import_react42.isValidElement)(child)) {
             const childValue = child.props.value;
-            return (0, import_react39.cloneElement)(
+            return (0, import_react42.cloneElement)(
               child,
               {
                 orientation: effectiveOrientation,
@@ -4537,7 +4710,7 @@ var RadioGroup = ({ ref, ...props }) => {
           }
           return child;
         }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ErrorMessage, { id: errorMessageId, errorMessage })
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ErrorMessage, { id: errorMessageId, errorMessage })
       ] })
     }
   );
@@ -4546,7 +4719,7 @@ RadioGroup.displayName = "RadioGroup";
 
 // src/components/Segment/SegmentGroup.tsx
 var import_dedupe46 = __toESM(require("classnames/dedupe"));
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var SegmentGroup = (props) => {
   const { children, horizontal, gap, className, ...rest } = props;
   const gapClass = gap ? `gap-${gap}` : "";
@@ -4557,14 +4730,14 @@ var SegmentGroup = (props) => {
     { "--is-horizontal": horizontal },
     gapClass
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: classes, ...rest, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: classes, ...rest, children });
 };
 SegmentGroup.displayName = "SegmentGroup";
 
 // src/components/Segment/Segment.tsx
 var import_dedupe47 = __toESM(require("classnames/dedupe"));
 var import_Segment = require("@simplybusiness/mobius/src/components/Segment/Segment.css");
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var Segment = ({ ref, ...props }) => {
   const { heading, children, colour, inverted, className, ...rest } = props;
   const classes = (0, import_dedupe47.default)(
@@ -4574,8 +4747,8 @@ var Segment = ({ ref, ...props }) => {
     { inverted },
     className
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { ref, className: classes, ...rest, children: [
-    heading && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "mobius-segment__heading", children: heading }),
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { ref, className: classes, ...rest, children: [
+    heading && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "mobius-segment__heading", children: heading }),
     children
   ] });
 };
@@ -4584,7 +4757,7 @@ Segment.displayName = "Segment";
 // src/components/Select/Select.tsx
 var import_icons13 = require("@simplybusiness/icons");
 var import_dedupe48 = __toESM(require("classnames/dedupe"));
-var import_react40 = require("react");
+var import_react43 = require("react");
 init_hooks();
 init_useLabel2();
 init_spaceDelimitedList();
@@ -4593,7 +4766,7 @@ init_Icon2();
 init_Label2();
 init_Stack2();
 var import_Select = require("@simplybusiness/mobius/src/components/Select/Select.css");
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var Select = ({ ref, ...props }) => {
   const {
     label,
@@ -4631,7 +4804,7 @@ var Select = ({ ref, ...props }) => {
     otherProps.className
   );
   const iconClasses = (0, import_dedupe48.default)("mobius-select__icon", sharedClasses);
-  const errorMessageId = (0, import_react40.useId)();
+  const errorMessageId = (0, import_react43.useId)();
   const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
   const describedBy = spaceDelimitedList([
     shouldErrorMessageShow,
@@ -4642,10 +4815,10 @@ var Select = ({ ref, ...props }) => {
       onChange(e);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Stack, { className: "mobius mobius-select__outer", gap: "xs", children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Label, { ...labelProps, className: labelClasses, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: wrapperClasses, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Stack, { className: "mobius mobius-select__outer", gap: "xs", children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Label, { ...labelProps, className: labelClasses, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: wrapperClasses, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
         "select",
         {
           ...otherProps,
@@ -4661,21 +4834,21 @@ var Select = ({ ref, ...props }) => {
           onChange: handleChange
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: iconClasses, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Icon, { icon: import_icons13.chevronDown }) })
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: iconClasses, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Icon, { icon: import_icons13.chevronDown }) })
     ] }),
-    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(ErrorMessage, { id: errorMessageId, errorMessage })
+    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ErrorMessage, { id: errorMessageId, errorMessage })
   ] });
 };
 Select.displayName = "Select";
 
 // src/components/Slider/Slider.tsx
 var import_dedupe49 = __toESM(require("classnames/dedupe"));
-var import_react42 = require("react");
+var import_react45 = require("react");
 init_hooks();
 init_Label2();
 
 // src/components/Slider/helpers.ts
-var import_react41 = require("react");
+var import_react44 = require("react");
 function numberFormatter(value, formatOptions, locale = navigator.languages?.[0] || "en-GB") {
   if (!formatOptions) {
     return value?.toString() || "";
@@ -4685,7 +4858,7 @@ function numberFormatter(value, formatOptions, locale = navigator.languages?.[0]
 
 // src/components/Slider/Slider.tsx
 var import_Slider = require("@simplybusiness/mobius/src/components/Slider/Slider.css");
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var Slider = (props) => {
   const {
     id,
@@ -4706,11 +4879,11 @@ var Slider = (props) => {
     formatOptions,
     isDisabled = false
   } = props;
-  const trackRef = (0, import_react42.useRef)(null);
-  const [currentValue, setCurrentValue] = (0, import_react42.useState)(
+  const trackRef = (0, import_react45.useRef)(null);
+  const [currentValue, setCurrentValue] = (0, import_react45.useState)(
     value || defaultValue || 0
   );
-  const [isDragging, setIsDraggging] = (0, import_react42.useState)(false);
+  const [isDragging, setIsDraggging] = (0, import_react45.useState)(false);
   const { labelProps, fieldProps } = useLabel({
     id,
     label,
@@ -4740,12 +4913,12 @@ var Slider = (props) => {
       onChangeEnd(currentValue);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: classes, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "mobius-slider__label-wrapper", children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Label, { ...labelProps, children: label }),
-      label && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("output", { style: { flex: "1 0 auto", textAlign: "end" }, children: formattedValue })
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: classes, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "mobius-slider__label-wrapper", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Label, { ...labelProps, children: label }),
+      label && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("output", { style: { flex: "1 0 auto", textAlign: "end" }, children: formattedValue })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { ref: trackRef, className: "mobius-slider__track-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { ref: trackRef, className: "mobius-slider__track-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
       "input",
       {
         className: "mobius-slider__track",
@@ -4764,9 +4937,9 @@ var Slider = (props) => {
         ...fieldProps
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "mobius-slider__labels", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "mobius-slider__min-label", "data-testid": "min-label", children: minLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "mobius-slider__max-label", "data-testid": "max-label", children: maxLabel })
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "mobius-slider__labels", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "mobius-slider__min-label", "data-testid": "min-label", children: minLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "mobius-slider__max-label", "data-testid": "max-label", children: maxLabel })
     ] })
   ] });
 };
@@ -4775,15 +4948,15 @@ var Slider = (props) => {
 init_Stack2();
 
 // src/components/SVG/SVG.tsx
-var import_react43 = require("react");
+var import_react46 = require("react");
 var import_dedupe50 = __toESM(require("classnames/dedupe"));
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var SVG = ({ ref, ...props }) => {
   const { children, className, ...otherProps } = props;
   const classes = (0, import_dedupe50.default)("mobius", "mobius-svg", className);
-  const svgNode = import_react43.Children.only(children);
+  const svgNode = import_react46.Children.only(children);
   const { children: svgChildren, viewBox, xmlns } = svgNode.props;
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     "svg",
     {
       viewBox,
@@ -4798,10 +4971,10 @@ var SVG = ({ ref, ...props }) => {
 SVG.displayName = "SVG";
 
 // src/components/Switch/Switch.tsx
-var import_react44 = require("react");
+var import_react47 = require("react");
 var import_dedupe51 = __toESM(require("classnames/dedupe"));
 var import_Switch = require("@simplybusiness/mobius/src/components/Switch/Switch.css");
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var Switch = ({ ref, ...props }) => {
   const {
     checked = false,
@@ -4810,8 +4983,8 @@ var Switch = ({ ref, ...props }) => {
     isDisabled = false,
     ...otherProps
   } = props;
-  const [enabled, setEnabled] = (0, import_react44.useState)(checked);
-  (0, import_react44.useEffect)(() => {
+  const [enabled, setEnabled] = (0, import_react47.useState)(checked);
+  (0, import_react47.useEffect)(() => {
     setEnabled(checked);
   }, [checked]);
   const classes = (0, import_dedupe51.default)(
@@ -4829,9 +5002,9 @@ var Switch = ({ ref, ...props }) => {
       onChange(event);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("label", { ref, className: classes, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { children: enabled ? "On" : "Off" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("label", { ref, className: classes, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { children: enabled ? "On" : "Off" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       "input",
       {
         type: "checkbox",
@@ -4842,7 +5015,7 @@ var Switch = ({ ref, ...props }) => {
         ...otherProps
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "mobius-switch__slider" })
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "mobius-switch__slider" })
   ] });
 };
 Switch.displayName = "Switch";
@@ -4850,72 +5023,72 @@ Switch.displayName = "Switch";
 // src/components/Table/Table.tsx
 var import_dedupe52 = __toESM(require("classnames/dedupe"));
 var import_Table = require("@simplybusiness/mobius/src/components/Table/Table.css");
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var Table = ({ ref, ...props }) => {
   const classes = (0, import_dedupe52.default)("mobius", "mobius-table", props.className);
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("table", { ref, ...props, className: classes });
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("table", { ref, ...props, className: classes });
 };
 Table.displayName = "Table";
 
 // src/components/Table/Head.tsx
 var import_dedupe53 = __toESM(require("classnames/dedupe"));
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var Head = ({ ref, ...props }) => {
   const classes = (0, import_dedupe53.default)("mobius", "mobius-table__head", props.className);
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("thead", { ref, ...props, className: classes });
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("thead", { ref, ...props, className: classes });
 };
 Head.displayName = "Table.Head";
 
 // src/components/Table/Body.tsx
 var import_dedupe54 = __toESM(require("classnames/dedupe"));
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var Body = ({ ref, ...props }) => {
   const classes = (0, import_dedupe54.default)("mobius", "mobius-table__body", props.className);
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("tbody", { ref, ...props, className: classes });
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("tbody", { ref, ...props, className: classes });
 };
 Body.displayName = "Table.Body";
 
 // src/components/Table/Foot.tsx
 var import_dedupe55 = __toESM(require("classnames/dedupe"));
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 var Foot = ({ ref, ...props }) => {
   const classes = (0, import_dedupe55.default)("mobius", "mobius-table__foot", props.className);
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("tfoot", { ref, ...props, className: classes });
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("tfoot", { ref, ...props, className: classes });
 };
 Foot.displayName = "Table.Foot";
 
 // src/components/Table/Row.tsx
 var import_dedupe56 = __toESM(require("classnames/dedupe"));
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 var Row = ({ ref, ...props }) => {
   const classes = (0, import_dedupe56.default)("mobius", "mobius-table__row", props.className);
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("tr", { ref, ...props, className: classes });
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("tr", { ref, ...props, className: classes });
 };
 Row.displayName = "Table.Row";
 
 // src/components/Table/HeaderCell.tsx
 var import_dedupe57 = __toESM(require("classnames/dedupe"));
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 var HeaderCell = ({ ref, scope = "col", ...props }) => {
   const classes = (0, import_dedupe57.default)(
     "mobius",
     "mobius-table__head-cell",
     props.className
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("th", { ...props, ref, scope, className: classes });
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("th", { ...props, ref, scope, className: classes });
 };
 HeaderCell.displayName = "Table.HeaderCell";
 
 // src/components/Table/Cell.tsx
 var import_dedupe58 = __toESM(require("classnames/dedupe"));
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 var Cell = ({ ref, ...props }) => {
   const classes = (0, import_dedupe58.default)(
     "mobius",
     "mobius-table__body-cell",
     props.className
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("td", { ref, ...props, className: classes });
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("td", { ref, ...props, className: classes });
 };
 Cell.displayName = "Table.Cell";
 
@@ -4939,7 +5112,7 @@ init_Stack2();
 
 // src/components/TextAreaInput/TextAreaInput.tsx
 var import_dedupe59 = __toESM(require("classnames/dedupe"));
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 var TextAreaInput = ({ ref, ...props }) => {
   const { isSelected, isDisabled, isReadOnly, isRequired, ...otherProps } = props;
   const classes = (0, import_dedupe59.default)(
@@ -4952,7 +5125,7 @@ var TextAreaInput = ({ ref, ...props }) => {
     },
     otherProps.className
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
     "textarea",
     {
       ref,
@@ -4967,7 +5140,7 @@ TextAreaInput.displayName = "TextAreaInput";
 
 // src/components/TextArea/TextArea.tsx
 var import_TextArea = require("@simplybusiness/mobius/src/components/TextArea/TextArea.css");
-var import_jsx_runtime69 = require("react/jsx-runtime");
+var import_jsx_runtime70 = require("react/jsx-runtime");
 var TextArea = ({ ref, ...props }) => {
   const {
     isDisabled,
@@ -4987,9 +5160,9 @@ var TextArea = ({ ref, ...props }) => {
     },
     validationClasses
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(Stack, { className: classes, gap: "xs", children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Label, { ...labelProps, className: labelClasses, children: props.label }),
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(Stack, { className: classes, gap: "xs", children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Label, { ...labelProps, className: labelClasses, children: props.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
       TextAreaInput,
       {
         ...otherProps,
@@ -5000,7 +5173,7 @@ var TextArea = ({ ref, ...props }) => {
         "aria-invalid": errorMessage != null
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(ErrorMessage, { ...errorMessageProps, errorMessage })
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ErrorMessage, { ...errorMessageProps, errorMessage })
   ] });
 };
 TextArea.displayName = "TextArea";
@@ -5012,7 +5185,7 @@ init_TextOrHTML2();
 // src/components/Title/Title.tsx
 var import_dedupe61 = __toESM(require("classnames/dedupe"));
 var import_Title = require("@simplybusiness/mobius/src/components/Title/Title.css");
-var import_jsx_runtime70 = require("react/jsx-runtime");
+var import_jsx_runtime71 = require("react/jsx-runtime");
 var Title = ({ ref, ...props }) => {
   const {
     elementType: Element = "div",
@@ -5024,9 +5197,9 @@ var Title = ({ ref, ...props }) => {
   const headerClasses = (0, import_dedupe61.default)("mobius", "mobius-title__header");
   const contentClasses = (0, import_dedupe61.default)("mobius", "mobius-title__description");
   const containerClasses = (0, import_dedupe61.default)("mobius", "mobius-title__container");
-  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: [
-    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("p", { className: headerClasses, children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("p", { className: contentClasses, children: description })
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Element, { ref, ...otherProps, className: classes, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(Flex, { flexDirection: "column", className: containerClasses, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("p", { className: headerClasses, children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("p", { className: contentClasses, children: description })
   ] }) });
 };
 Title.displayName = "Title";
@@ -5044,7 +5217,7 @@ var toastState = {
 
 // src/components/Toast/Toast.tsx
 var import_Toast = require("@simplybusiness/mobius/src/components/Toast/Toast.css");
-var import_jsx_runtime71 = require("react/jsx-runtime");
+var import_jsx_runtime72 = require("react/jsx-runtime");
 var variantIcons = {
   info: import_icons14.circleInfo,
   success: import_icons14.circleCheck,
@@ -5057,8 +5230,8 @@ var variantColors = {
   warning: "var(--color-warning)",
   error: "var(--color-error)"
 };
-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] }) });
-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 }) });
+var ToastIcon = ({ variant }) => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { className: "mobius-toast__icon", children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Icon, { icon: variantIcons[variant], color: variantColors[variant] }) });
+var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { className: "mobius-toast__close-icon", children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Icon, { icon: import_icons14.cross }) });
 var ToastContent = ({
   toastId,
   variant,
@@ -5067,15 +5240,15 @@ var ToastContent = ({
   action,
   cancel,
   showCloseButton = toastState.showCloseButton
-}) => /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: (0, import_dedupe62.default)("mobius", "mobius-toast", `--${variant}`), children: [
-  /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ToastIcon, { variant }),
-  /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "mobius-toast__body", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "mobius-toast__content", children: [
-      title && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "mobius-toast__title", children: title }),
-      description && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "mobius-toast__description", children: description })
+}) => /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: (0, import_dedupe62.default)("mobius", "mobius-toast", `--${variant}`), children: [
+  /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ToastIcon, { variant }),
+  /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "mobius-toast__body", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "mobius-toast__content", children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "mobius-toast__title", children: title }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "mobius-toast__description", children: description })
     ] }),
-    (action || cancel) && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "mobius-toast__actions", children: [
-      cancel && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+    (action || cancel) && /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "mobius-toast__actions", children: [
+      cancel && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
         "button",
         {
           type: "button",
@@ -5087,7 +5260,7 @@ var ToastContent = ({
           children: cancel.label
         }
       ),
-      action && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+      action && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
         "button",
         {
           type: "button",
@@ -5101,19 +5274,19 @@ var ToastContent = ({
       )
     ] })
   ] }),
-  showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+  showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
     "button",
     {
       type: "button",
       className: "mobius-toast__close",
       onClick: () => import_sonner.toast.dismiss(toastId),
       "aria-label": "Close",
-      children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(CloseIcon, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(CloseIcon, {})
     }
   )
 ] });
 var createCustomToast = (message, variant, options) => import_sonner.toast.custom(
-  (id) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+  (id) => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
     ToastContent,
     {
       toastId: id,
@@ -5145,9 +5318,9 @@ var toast = {
 };
 
 // src/components/Toast/Toaster.tsx
-var import_react45 = require("react");
+var import_react48 = require("react");
 var import_sonner2 = require("sonner");
-var import_jsx_runtime72 = require("react/jsx-runtime");
+var import_jsx_runtime73 = require("react/jsx-runtime");
 var Toaster = ({
   position = "top-right",
   closeButton = true,
@@ -5156,10 +5329,10 @@ var Toaster = ({
   visibleToasts = 3,
   gap = 8
 }) => {
-  (0, import_react45.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     toastState.showCloseButton = closeButton;
   }, [closeButton]);
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
     import_sonner2.Toaster,
     {
       position,
@@ -5175,7 +5348,7 @@ Toaster.displayName = "Toaster";
 
 // src/components/Trust/Trust.tsx
 var import_dedupe63 = __toESM(require("classnames/dedupe"));
-var import_react46 = require("react");
+var import_react49 = require("react");
 init_utils();
 
 // src/components/Trust/constants.ts
@@ -5240,7 +5413,7 @@ var TRUSTPILOT_WIDGET = {
 };
 
 // src/components/Trust/Trust.tsx
-var import_jsx_runtime73 = require("react/jsx-runtime");
+var import_jsx_runtime74 = require("react/jsx-runtime");
 var Trust = ({ ref, ...props }) => {
   const {
     elementType: Element = "div",
@@ -5252,8 +5425,8 @@ var Trust = ({ ref, ...props }) => {
     stars,
     className
   } = props;
-  const [isMounted, setIsMounted] = (0, import_react46.useState)(false);
-  const trustRef = (0, import_react46.useRef)(null);
+  const [isMounted, setIsMounted] = (0, import_react49.useState)(false);
+  const trustRef = (0, import_react49.useRef)(null);
   const {
     templateId,
     className: variantClassName,
@@ -5280,24 +5453,24 @@ var Trust = ({ ref, ...props }) => {
     },
     className
   );
-  (0, import_react46.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     const hasTrustpilotLoaded = trustRef.current && window?.Trustpilot && window?.Trustpilot.loadFromElement;
     if (isMounted && hasTrustpilotLoaded) {
       window.Trustpilot.loadFromElement(trustRef.current, true);
     }
   }, [isMounted]);
-  (0, import_react46.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     setIsMounted(true);
   }, []);
-  if (!isMounted) return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { style: styles });
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+  if (!isMounted) return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { style: styles });
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
     Element,
     {
       ref: mergeRefs([trustRef, ref]),
       className: classes,
       style: styles,
       ...dataProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
         "a",
         {
           href: link,
@@ -5313,11 +5486,11 @@ var Trust = ({ ref, ...props }) => {
 
 // src/components/ExpandableText/ExpandableText.tsx
 var import_dedupe64 = __toESM(require("classnames/dedupe"));
-var import_react47 = require("react");
+var import_react50 = require("react");
 init_hooks();
 init_TextOrHTML2();
 var import_ExpandableText = require("@simplybusiness/mobius/src/components/ExpandableText/ExpandableText.css");
-var import_jsx_runtime74 = require("react/jsx-runtime");
+var import_jsx_runtime75 = require("react/jsx-runtime");
 var ExpandableText = ({ ref, ...props }) => {
   const {
     text,
@@ -5331,14 +5504,14 @@ var ExpandableText = ({ ref, ...props }) => {
     onToggle,
     ...otherProps
   } = props;
-  const [isExpanded, setIsExpanded] = (0, import_react47.useState)(false);
-  const [isCollapsed, setIsCollapsed] = (0, import_react47.useState)(false);
-  const textRef = (0, import_react47.useRef)(null);
+  const [isExpanded, setIsExpanded] = (0, import_react50.useState)(false);
+  const [isCollapsed, setIsCollapsed] = (0, import_react50.useState)(false);
+  const textRef = (0, import_react50.useRef)(null);
   const { down } = useBreakpoint();
-  const baseId = (0, import_react47.useId)();
+  const baseId = (0, import_react50.useId)();
   const expandButtonId = `expandable-text-expand-${baseId}`;
   const shouldCollapse = breakpoint ? down(breakpoint) : true;
-  (0, import_react47.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     if (!shouldCollapse || !textRef.current) {
       setIsCollapsed(false);
       return;
@@ -5348,7 +5521,7 @@ var ExpandableText = ({ ref, ...props }) => {
     setIsCollapsed(isOverflowing);
   }, [text, shouldCollapse, maxLines]);
   if (breakpoint && !shouldCollapse) {
-    return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { ref, className, ...otherProps, children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(TextOrHTML, { text, textWrapper: true, ...textProps }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { ref, className, ...otherProps, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(TextOrHTML, { text, textWrapper: true, ...textProps }) });
   }
   const handleAccordionChange = (expanded) => {
     setIsExpanded(expanded);
@@ -5361,7 +5534,7 @@ var ExpandableText = ({ ref, ...props }) => {
   const textContainerStyle = {
     "--line-clamp": maxLines
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
     "div",
     {
       ref,
@@ -5369,7 +5542,7 @@ var ExpandableText = ({ ref, ...props }) => {
       "data-testid": "expandable-text",
       ...otherProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
           "div",
           {
             ref: textRef,
@@ -5377,10 +5550,10 @@ var ExpandableText = ({ ref, ...props }) => {
             style: textContainerStyle,
             "data-testid": "expandable-text-content",
             "aria-describedby": isCollapsed ? expandButtonId : void 0,
-            children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(TextOrHTML, { elementType: "span", textWrapper: true, text, ...textProps })
+            children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(TextOrHTML, { elementType: "span", textWrapper: true, text, ...textProps })
           }
         ),
-        isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+        isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
           Accordion,
           {
             showText,
@@ -5403,7 +5576,7 @@ ExpandableText.displayName = "ExpandableText";
 // src/components/MaskedField/index.tsx
 var import_component = __toESM(require("@loadable/component"));
 init_TextField2();
-var import_jsx_runtime76 = require("react/jsx-runtime");
+var import_jsx_runtime77 = require("react/jsx-runtime");
 var LoadableMaskedField = (0, import_component.default)(() => Promise.resolve().then(() => (init_MaskedField(), MaskedField_exports)), {
   resolveComponent: (mod) => mod.MaskedField
 });
@@ -5415,11 +5588,11 @@ function MaskedField2(props) {
     ref: forwardedRef,
     ...textFieldProps
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
     LoadableMaskedField,
     {
       ...props,
-      fallback: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+      fallback: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
         TextField,
         {
           ...textFieldProps,