@simplybusiness/mobius 10.4.3 → 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_react50, import_react_imask, import_jsx_runtime76, 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_react50 = require("react");
+    import_react51 = require("react");
     import_react_imask = require("react-imask");
     init_TextField2();
     import_jsx_runtime76 = require("react/jsx-runtime");
     useAcceptHandler = (onChange, useMaskedValue, name) => {
-      return (0, import_react50.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_react50.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_react50.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_react50.useEffect)(() => {
+      (0, import_react51.useEffect)(() => {
         if (!maskRef.current) {
           return;
         }
@@ -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;
@@ -4055,7 +4051,7 @@ PasswordField.displayName = "PasswordField";
 // src/components/Popover/Popover.tsx
 var import_icons12 = require("@simplybusiness/icons");
 var import_dedupe42 = __toESM(require("classnames/dedupe"));
-var import_react38 = require("react");
+var import_react39 = require("react");
 var import_react_dom = require("react-dom");
 var import_mobius_hooks6 = require("@simplybusiness/mobius-hooks");
 init_Icon2();
@@ -4080,14 +4076,14 @@ var Arrow = ({ ref, width = 20, className, style }) => {
 };
 
 // src/components/Popover/useAutoUpdate.ts
-var import_react35 = require("react");
+var import_react36 = require("react");
 var useAutoUpdate = ({
   referenceRef,
   floatingRef,
   onUpdate,
   enabled
 }) => {
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (!enabled) return;
     const reference = referenceRef.current;
     const floating = floatingRef.current;
@@ -4109,7 +4105,7 @@ var useAutoUpdate = ({
 };
 
 // src/components/Popover/useFloatingPosition.ts
-var import_react36 = require("react");
+var import_react37 = require("react");
 var ABSOLUTE_FLOATING_STYLES = {
   position: "absolute",
   top: 0,
@@ -4139,7 +4135,7 @@ var useFloatingPosition = ({
   arrowWidth,
   useFixedStrategy
 }) => {
-  const update = (0, import_react36.useCallback)(() => {
+  const update = (0, import_react37.useCallback)(() => {
     const reference = referenceRef.current;
     const floating = floatingRef.current;
     if (!reference || !floating) return;
@@ -4201,7 +4197,7 @@ var useFloatingPosition = ({
     arrowWidth,
     useFixedStrategy
   ]);
-  (0, import_react36.useLayoutEffect)(() => {
+  (0, import_react37.useLayoutEffect)(() => {
     if (!isOpen) return;
     update();
   }, [isOpen, update]);
@@ -4213,14 +4209,14 @@ var useFloatingPosition = ({
 };
 
 // src/components/Popover/useOutsidePress.ts
-var import_react37 = require("react");
+var import_react38 = require("react");
 var useOutsidePress = ({
   referenceRef,
   floatingRef,
   enabled,
   onOutsidePress
 }) => {
-  (0, import_react37.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     if (!enabled) return;
     const handler = (event) => {
       const target = event.target;
@@ -4241,11 +4237,11 @@ var OFFSET_FROM_CONTENT_DEFAULT = 10;
 var ARROW_WIDTH = 20;
 var Popover = (props) => {
   const { trigger, children, onOpen, onClose, className } = props;
-  const referenceRef = (0, import_react38.useRef)(null);
-  const floatingRef = (0, import_react38.useRef)(null);
-  const arrowRef = (0, import_react38.useRef)(null);
-  const [isOpen, setIsOpen] = (0, import_react38.useState)(false);
-  const [portalTarget, setPortalTarget] = (0, import_react38.useState)(null);
+  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,
@@ -4276,7 +4272,7 @@ var Popover = (props) => {
     "mobius-popover__container",
     className
   );
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     const el = floatingRef.current;
     if (!el) return;
     const preventLabelActivation = (e) => {
@@ -4299,10 +4295,10 @@ var Popover = (props) => {
     setIsOpen(true);
     onOpen?.();
   };
-  const setReferenceRef = (0, import_react38.useCallback)((node) => {
+  const setReferenceRef = (0, import_react39.useCallback)((node) => {
     referenceRef.current = node;
   }, []);
-  const triggerComponent = (0, import_react38.cloneElement)(trigger, {
+  const triggerComponent = (0, import_react39.cloneElement)(trigger, {
     ref: setReferenceRef,
     className: (0, import_dedupe42.default)(
       trigger.props.className,
@@ -4366,7 +4362,7 @@ var Popover = (props) => {
 
 // src/components/Progress/Progress.tsx
 var import_dedupe43 = __toESM(require("classnames/dedupe"));
-var import_react39 = require("react");
+var import_react40 = require("react");
 init_Label2();
 var import_Progress = require("@simplybusiness/mobius/src/components/Progress/Progress.css");
 var import_jsx_runtime53 = require("react/jsx-runtime");
@@ -4413,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_react39.useId)();
-  const progressLabelId = (0, import_react39.useId)();
+  const progressId = (0, import_react40.useId)();
+  const progressLabelId = (0, import_react40.useId)();
   const {
     id,
     label,
@@ -4470,7 +4466,7 @@ Progress.displayName = "Progress";
 
 // src/components/Radio/Radio.tsx
 var import_dedupe44 = __toESM(require("classnames/dedupe"));
-var import_react40 = require("react");
+var import_react41 = require("react");
 init_ErrorMessage2();
 init_Label2();
 var import_Radio = require("@simplybusiness/mobius/src/components/Radio/Radio.css");
@@ -4498,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_react40.useRef)(null);
-  const prevOverflowRef = (0, import_react40.useRef)({
+  const contentRef = (0, import_react41.useRef)(null);
+  const prevOverflowRef = (0, import_react41.useRef)({
     vertical: false,
     horizontal: false
   });
-  const hasIconFirst = (0, import_react40.useMemo)(() => {
-    if (!children || import_react40.Children.count(children) === 0) return false;
-    const firstChild = import_react40.Children.toArray(children)[0];
-    if (!(0, import_react40.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_react40.useLayoutEffect)(() => {
+  (0, import_react41.useLayoutEffect)(() => {
     if (!contentRef.current || !onOverflow) return;
     if (orientation === "vertical") {
       return;
@@ -4590,7 +4586,7 @@ Radio.displayName = "Radio";
 
 // src/components/Radio/RadioGroup.tsx
 var import_dedupe45 = __toESM(require("classnames/dedupe"));
-var import_react41 = require("react");
+var import_react42 = require("react");
 init_hooks();
 init_spaceDelimitedList();
 init_ErrorMessage2();
@@ -4624,15 +4620,15 @@ var RadioGroup = ({ ref, ...props }) => {
     ...rest
   } = props;
   const defaultSelected = getDefaultVal(children, value || defaultValue);
-  const [selected, setSelected] = (0, import_react41.useState)(defaultSelected);
-  const overflowsRef = (0, import_react41.useRef)({});
-  const [hasOverflow, setHasOverflow] = (0, import_react41.useState)(false);
-  (0, import_react41.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_react41.useCallback)(
+  const handleOverflow = (0, import_react42.useCallback)(
     (radioValue, overflow) => {
       overflowsRef.current = {
         ...overflowsRef.current,
@@ -4666,15 +4662,15 @@ var RadioGroup = ({ ref, ...props }) => {
     [`--is-${effectiveOrientation}`]: true
   });
   const labelClasses = (0, import_dedupe45.default)(radioClasses, validationClasses);
-  const errorMessageId = (0, import_react41.useId)();
-  const defaultNameAttrId = (0, import_react41.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_react41.useId)();
+  const labelId = (0, import_react42.useId)();
   return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     "div",
     {
@@ -4693,10 +4689,10 @@ var RadioGroup = ({ ref, ...props }) => {
       role: "radiogroup",
       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_react41.Children.map(children, (child) => {
-          if ((0, import_react41.isValidElement)(child)) {
+        /* @__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_react41.cloneElement)(
+            return (0, import_react42.cloneElement)(
               child,
               {
                 orientation: effectiveOrientation,
@@ -4761,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_react42 = require("react");
+var import_react43 = require("react");
 init_hooks();
 init_useLabel2();
 init_spaceDelimitedList();
@@ -4808,7 +4804,7 @@ var Select = ({ ref, ...props }) => {
     otherProps.className
   );
   const iconClasses = (0, import_dedupe48.default)("mobius-select__icon", sharedClasses);
-  const errorMessageId = (0, import_react42.useId)();
+  const errorMessageId = (0, import_react43.useId)();
   const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
   const describedBy = spaceDelimitedList([
     shouldErrorMessageShow,
@@ -4847,12 +4843,12 @@ Select.displayName = "Select";
 
 // src/components/Slider/Slider.tsx
 var import_dedupe49 = __toESM(require("classnames/dedupe"));
-var import_react44 = require("react");
+var import_react45 = require("react");
 init_hooks();
 init_Label2();
 
 // src/components/Slider/helpers.ts
-var import_react43 = require("react");
+var import_react44 = require("react");
 function numberFormatter(value, formatOptions, locale = navigator.languages?.[0] || "en-GB") {
   if (!formatOptions) {
     return value?.toString() || "";
@@ -4883,11 +4879,11 @@ var Slider = (props) => {
     formatOptions,
     isDisabled = false
   } = props;
-  const trackRef = (0, import_react44.useRef)(null);
-  const [currentValue, setCurrentValue] = (0, import_react44.useState)(
+  const trackRef = (0, import_react45.useRef)(null);
+  const [currentValue, setCurrentValue] = (0, import_react45.useState)(
     value || defaultValue || 0
   );
-  const [isDragging, setIsDraggging] = (0, import_react44.useState)(false);
+  const [isDragging, setIsDraggging] = (0, import_react45.useState)(false);
   const { labelProps, fieldProps } = useLabel({
     id,
     label,
@@ -4952,13 +4948,13 @@ var Slider = (props) => {
 init_Stack2();
 
 // src/components/SVG/SVG.tsx
-var import_react45 = require("react");
+var import_react46 = require("react");
 var import_dedupe50 = __toESM(require("classnames/dedupe"));
 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_react45.Children.only(children);
+  const svgNode = import_react46.Children.only(children);
   const { children: svgChildren, viewBox, xmlns } = svgNode.props;
   return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     "svg",
@@ -4975,7 +4971,7 @@ var SVG = ({ ref, ...props }) => {
 SVG.displayName = "SVG";
 
 // src/components/Switch/Switch.tsx
-var import_react46 = 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_runtime61 = require("react/jsx-runtime");
@@ -4987,8 +4983,8 @@ var Switch = ({ ref, ...props }) => {
     isDisabled = false,
     ...otherProps
   } = props;
-  const [enabled, setEnabled] = (0, import_react46.useState)(checked);
-  (0, import_react46.useEffect)(() => {
+  const [enabled, setEnabled] = (0, import_react47.useState)(checked);
+  (0, import_react47.useEffect)(() => {
     setEnabled(checked);
   }, [checked]);
   const classes = (0, import_dedupe51.default)(
@@ -5322,7 +5318,7 @@ var toast = {
 };
 
 // src/components/Toast/Toaster.tsx
-var import_react47 = require("react");
+var import_react48 = require("react");
 var import_sonner2 = require("sonner");
 var import_jsx_runtime73 = require("react/jsx-runtime");
 var Toaster = ({
@@ -5333,7 +5329,7 @@ var Toaster = ({
   visibleToasts = 3,
   gap = 8
 }) => {
-  (0, import_react47.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     toastState.showCloseButton = closeButton;
   }, [closeButton]);
   return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
@@ -5352,7 +5348,7 @@ Toaster.displayName = "Toaster";
 
 // src/components/Trust/Trust.tsx
 var import_dedupe63 = __toESM(require("classnames/dedupe"));
-var import_react48 = require("react");
+var import_react49 = require("react");
 init_utils();
 
 // src/components/Trust/constants.ts
@@ -5429,8 +5425,8 @@ var Trust = ({ ref, ...props }) => {
     stars,
     className
   } = props;
-  const [isMounted, setIsMounted] = (0, import_react48.useState)(false);
-  const trustRef = (0, import_react48.useRef)(null);
+  const [isMounted, setIsMounted] = (0, import_react49.useState)(false);
+  const trustRef = (0, import_react49.useRef)(null);
   const {
     templateId,
     className: variantClassName,
@@ -5457,13 +5453,13 @@ var Trust = ({ ref, ...props }) => {
     },
     className
   );
-  (0, import_react48.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_react48.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     setIsMounted(true);
   }, []);
   if (!isMounted) return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { style: styles });
@@ -5490,7 +5486,7 @@ var Trust = ({ ref, ...props }) => {
 
 // src/components/ExpandableText/ExpandableText.tsx
 var import_dedupe64 = __toESM(require("classnames/dedupe"));
-var import_react49 = require("react");
+var import_react50 = require("react");
 init_hooks();
 init_TextOrHTML2();
 var import_ExpandableText = require("@simplybusiness/mobius/src/components/ExpandableText/ExpandableText.css");
@@ -5508,14 +5504,14 @@ var ExpandableText = ({ ref, ...props }) => {
     onToggle,
     ...otherProps
   } = props;
-  const [isExpanded, setIsExpanded] = (0, import_react49.useState)(false);
-  const [isCollapsed, setIsCollapsed] = (0, import_react49.useState)(false);
-  const textRef = (0, import_react49.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_react49.useId)();
+  const baseId = (0, import_react50.useId)();
   const expandButtonId = `expandable-text-expand-${baseId}`;
   const shouldCollapse = breakpoint ? down(breakpoint) : true;
-  (0, import_react49.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     if (!shouldCollapse || !textRef.current) {
       setIsCollapsed(false);
       return;