@simplybusiness/mobius 10.4.3 → 10.5.0

package/dist/cjs/components/index.js

@@ -5,9 +5,6 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
 var __esm = (fn, res) => function __init() {
   return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
 };
@@ -32,10 +29,6 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 
 // src/utils/changeCSS.ts
 var init_changeCSS = __esm({
@@ -945,9 +938,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 +951,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 +965,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 +1059,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 +1077,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_runtime77, 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");
+    import_jsx_runtime77 = 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 +1103,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 +1116,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 +1146,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;
         }
@@ -1161,7 +1157,7 @@ var init_MaskedField = __esm({
           setValue(stringValue);
         }
       }, [value, maskRef, setValue, imaskRef]);
-      return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
         TextField,
         {
           ...textFieldProps,
@@ -1185,7 +1181,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_runtime76.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
         TextField,
         {
           ...textFieldProps,
@@ -1199,7 +1195,7 @@ var init_MaskedField = __esm({
     MaskedField = ({ ref: forwardedRef, ...props }) => {
       const { value, defaultValue, ...rest } = props;
       if ("value" in props) {
-        return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
           ControlledMaskedField,
           {
             ...rest,
@@ -1208,7 +1204,7 @@ var init_MaskedField = __esm({
           }
         );
       } else {
-        return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
           UncontrolledMaskedField,
           {
             ...rest,
@@ -1272,6 +1268,7 @@ __export(components_exports, {
   Select: () => Select,
   Slider: () => Slider,
   Stack: () => Stack,
+  StickyOnMobile: () => StickyOnMobile,
   Switch: () => Switch,
   Table: () => Table2,
   Text: () => Text,
@@ -1662,12 +1659,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 +1703,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 +1738,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 +1848,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 +1932,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 +1942,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 +2041,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 +2054,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 +2067,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 +2103,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 +2256,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 +2375,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);
@@ -2442,39 +2439,38 @@ var LOQATE_BASE_URL = "https://api.addressy.com/Capture/Interactive";
 var LOQATE_FIND_URL = "/Find/v1.00/json3.ws";
 var LOQATE_RETRIEVE_URL = "/Retrieve/v1.2/json3.ws";
 var DEFAULT_COUNTRIES = ["GB"];
-var _baseUrl, _apiKey, _countries, _filters;
 var LoqateAddressLookupService = class {
+  /**
+   * Base URL for the Loqate API
+   */
+  #baseUrl;
+  /**
+   * API key for the Loqate API
+   */
+  #apiKey;
+  /**
+   * List of allowed country codes for the Loqate API
+   * 2 or 3 character ISO country codes
+   */
+  #countries;
+  /**
+   * Optional filters for the Loqate API
+   * E.g., { AdministrativeArea: "CA", PostalCode: "90210" }
+   */
+  #filters;
   constructor({
     baseUrl,
     apiKey,
     countries,
     filters
   }) {
-    /**
-     * Base URL for the Loqate API
-     */
-    __privateAdd(this, _baseUrl);
-    /**
-     * API key for the Loqate API
-     */
-    __privateAdd(this, _apiKey);
-    /**
-     * List of allowed country codes for the Loqate API
-     * 2 or 3 character ISO country codes
-     */
-    __privateAdd(this, _countries);
-    /**
-     * Optional filters for the Loqate API
-     * E.g., { AdministrativeArea: "CA", PostalCode: "90210" }
-     */
-    __privateAdd(this, _filters);
-    __privateSet(this, _apiKey, apiKey);
-    __privateSet(this, _baseUrl, baseUrl || LOQATE_BASE_URL);
-    __privateSet(this, _countries, countries || DEFAULT_COUNTRIES);
-    __privateSet(this, _filters, filters);
+    this.#apiKey = apiKey;
+    this.#baseUrl = baseUrl || LOQATE_BASE_URL;
+    this.#countries = countries || DEFAULT_COUNTRIES;
+    this.#filters = filters;
   }
   fetchFromApi(url) {
-    return fetch(`${__privateGet(this, _baseUrl)}${url}`).then((response) => response.json()).then((json) => {
+    return fetch(`${this.#baseUrl}${url}`).then((response) => response.json()).then((json) => {
       if (json.Items?.some((item) => item.Error)) {
         throw new LoqateAddressLookupError(json);
       }
@@ -2489,32 +2485,28 @@ var LoqateAddressLookupService = class {
    * @returns Empty string if no filters, otherwise "&Filters=key1:value1&key2:value2" (Loqate's expected format for Filters)
    */
   buildFiltersQuery() {
-    if (!__privateGet(this, _filters) || Object.keys(__privateGet(this, _filters)).length === 0) {
+    if (!this.#filters || Object.keys(this.#filters).length === 0) {
       return "";
     }
-    const encodedFilters = Object.entries(__privateGet(this, _filters)).map(([key, value]) => `${key}:${encodeURIComponent(value)}`).join("&");
+    const encodedFilters = Object.entries(this.#filters).map(([key, value]) => `${key}:${encodeURIComponent(value)}`).join("&");
     return `&Filters=${encodedFilters}`;
   }
   search(searchTerm) {
-    let url = `${LOQATE_FIND_URL}?Key=${__privateGet(this, _apiKey)}&Text=${searchTerm}&Countries=${__privateGet(this, _countries)?.join(",")}`;
+    let url = `${LOQATE_FIND_URL}?Key=${this.#apiKey}&Text=${searchTerm}&Countries=${this.#countries?.join(",")}`;
     url += this.buildFiltersQuery();
     return this.fetchFromApi(url);
   }
   findById(id) {
-    let url = `${LOQATE_FIND_URL}?Key=${__privateGet(this, _apiKey)}&Container=${id}&Countries=${__privateGet(this, _countries)?.join(",")}`;
+    let url = `${LOQATE_FIND_URL}?Key=${this.#apiKey}&Container=${id}&Countries=${this.#countries?.join(",")}`;
     url += this.buildFiltersQuery();
     return this.fetchFromApi(url);
   }
   async get(id) {
-    const url = `${LOQATE_RETRIEVE_URL}?Key=${__privateGet(this, _apiKey)}&Id=${id}`;
+    const url = `${LOQATE_RETRIEVE_URL}?Key=${this.#apiKey}&Id=${id}`;
     const response = await this.fetchFromApi(url);
     return response.Items[0];
   }
 };
-_baseUrl = new WeakMap();
-_apiKey = new WeakMap();
-_countries = new WeakMap();
-_filters = new WeakMap();
 
 // src/components/Alert/Alert.tsx
 var import_icons4 = require("@simplybusiness/icons");
@@ -2633,7 +2625,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 +2633,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 +2672,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 +2749,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 +2778,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 +2807,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 +2860,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 +2884,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 +2915,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 +2939,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 +2953,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 +3004,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 +3054,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 +3070,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 +3129,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 +3157,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 +3169,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 +3180,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 +3194,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 +3210,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 +3251,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 +3264,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 +3289,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 +3310,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 +3327,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 +3356,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 +3365,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 +3392,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 +3435,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 +3473,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 +3571,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 +3598,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 +3719,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 +3739,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 +3747,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 +3782,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 +3802,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 +3830,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 +3871,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 +3890,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 +3973,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 +4008,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 +4040,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 +4065,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 +4094,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 +4124,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 +4186,7 @@ var useFloatingPosition = ({
     arrowWidth,
     useFixedStrategy
   ]);
-  (0, import_react36.useLayoutEffect)(() => {
+  (0, import_react37.useLayoutEffect)(() => {
     if (!isOpen) return;
     update();
   }, [isOpen, update]);
@@ -4213,14 +4198,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 +4226,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 +4261,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 +4284,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 +4351,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 +4398,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 +4455,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 +4483,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 +4575,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 +4609,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 +4651,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 +4678,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 +4746,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 +4793,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 +4832,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 +4868,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,
@@ -4951,16 +4936,31 @@ var Slider = (props) => {
 // src/components/index.tsx
 init_Stack2();
 
-// src/components/SVG/SVG.tsx
-var import_react45 = require("react");
+// src/components/StickyOnMobile/StickyOnMobile.tsx
 var import_dedupe50 = __toESM(require("classnames/dedupe"));
+var import_StickyOnMobile = require("@simplybusiness/mobius/src/components/StickyOnMobile/StickyOnMobile.css");
 var import_jsx_runtime60 = require("react/jsx-runtime");
+var StickyOnMobile = ({ ref, ...props }) => {
+  const { elementType: Element = "div", ...otherProps } = props;
+  const classes = (0, import_dedupe50.default)(
+    "mobius",
+    "mobius-sticky-on-mobile",
+    otherProps.className
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Element, { ref, ...otherProps, className: classes });
+};
+StickyOnMobile.displayName = "StickyOnMobile";
+
+// src/components/SVG/SVG.tsx
+var import_react46 = require("react");
+var import_dedupe51 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime61 = 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 classes = (0, import_dedupe51.default)("mobius", "mobius-svg", className);
+  const svgNode = import_react46.Children.only(children);
   const { children: svgChildren, viewBox, xmlns } = svgNode.props;
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
     "svg",
     {
       viewBox,
@@ -4975,10 +4975,10 @@ var SVG = ({ ref, ...props }) => {
 SVG.displayName = "SVG";
 
 // src/components/Switch/Switch.tsx
-var import_react46 = require("react");
-var import_dedupe51 = __toESM(require("classnames/dedupe"));
+var import_react47 = require("react");
+var import_dedupe52 = __toESM(require("classnames/dedupe"));
 var import_Switch = require("@simplybusiness/mobius/src/components/Switch/Switch.css");
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var Switch = ({ ref, ...props }) => {
   const {
     checked = false,
@@ -4987,11 +4987,11 @@ 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)(
+  const classes = (0, import_dedupe52.default)(
     "mobius",
     "mobius-switch",
     {
@@ -5006,9 +5006,9 @@ var Switch = ({ ref, ...props }) => {
       onChange(event);
     }
   };
-  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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("label", { ref, className: classes, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { children: enabled ? "On" : "Off" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
       "input",
       {
         type: "checkbox",
@@ -5019,80 +5019,80 @@ var Switch = ({ ref, ...props }) => {
         ...otherProps
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "mobius-switch__slider" })
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "mobius-switch__slider" })
   ] });
 };
 Switch.displayName = "Switch";
 
 // src/components/Table/Table.tsx
-var import_dedupe52 = __toESM(require("classnames/dedupe"));
+var import_dedupe53 = __toESM(require("classnames/dedupe"));
 var import_Table = require("@simplybusiness/mobius/src/components/Table/Table.css");
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var Table = ({ ref, ...props }) => {
-  const classes = (0, import_dedupe52.default)("mobius", "mobius-table", props.className);
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("table", { ref, ...props, className: classes });
+  const classes = (0, import_dedupe53.default)("mobius", "mobius-table", props.className);
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("table", { ref, ...props, className: classes });
 };
 Table.displayName = "Table";
 
 // src/components/Table/Head.tsx
-var import_dedupe53 = __toESM(require("classnames/dedupe"));
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_dedupe54 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime64 = 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_runtime63.jsx)("thead", { ref, ...props, className: classes });
+  const classes = (0, import_dedupe54.default)("mobius", "mobius-table__head", props.className);
+  return /* @__PURE__ */ (0, import_jsx_runtime64.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_runtime64 = require("react/jsx-runtime");
+var import_dedupe55 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime65 = 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_runtime64.jsx)("tbody", { ref, ...props, className: classes });
+  const classes = (0, import_dedupe55.default)("mobius", "mobius-table__body", props.className);
+  return /* @__PURE__ */ (0, import_jsx_runtime65.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_runtime65 = require("react/jsx-runtime");
+var import_dedupe56 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime66 = 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_runtime65.jsx)("tfoot", { ref, ...props, className: classes });
+  const classes = (0, import_dedupe56.default)("mobius", "mobius-table__foot", props.className);
+  return /* @__PURE__ */ (0, import_jsx_runtime66.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_runtime66 = require("react/jsx-runtime");
+var import_dedupe57 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime67 = 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_runtime66.jsx)("tr", { ref, ...props, className: classes });
+  const classes = (0, import_dedupe57.default)("mobius", "mobius-table__row", props.className);
+  return /* @__PURE__ */ (0, import_jsx_runtime67.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_runtime67 = require("react/jsx-runtime");
+var import_dedupe58 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime68 = require("react/jsx-runtime");
 var HeaderCell = ({ ref, scope = "col", ...props }) => {
-  const classes = (0, import_dedupe57.default)(
+  const classes = (0, import_dedupe58.default)(
     "mobius",
     "mobius-table__head-cell",
     props.className
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("th", { ...props, ref, scope, className: classes });
+  return /* @__PURE__ */ (0, import_jsx_runtime68.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_runtime68 = require("react/jsx-runtime");
+var import_dedupe59 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime69 = require("react/jsx-runtime");
 var Cell = ({ ref, ...props }) => {
-  const classes = (0, import_dedupe58.default)(
+  const classes = (0, import_dedupe59.default)(
     "mobius",
     "mobius-table__body-cell",
     props.className
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("td", { ref, ...props, className: classes });
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("td", { ref, ...props, className: classes });
 };
 Cell.displayName = "Table.Cell";
 
@@ -5108,18 +5108,18 @@ var Table2 = Object.assign(Table, {
 Table2.displayName = "Table";
 
 // src/components/TextArea/TextArea.tsx
-var import_dedupe60 = __toESM(require("classnames/dedupe"));
+var import_dedupe61 = __toESM(require("classnames/dedupe"));
 init_hooks();
 init_ErrorMessage2();
 init_Label2();
 init_Stack2();
 
 // src/components/TextAreaInput/TextAreaInput.tsx
-var import_dedupe59 = __toESM(require("classnames/dedupe"));
-var import_jsx_runtime69 = require("react/jsx-runtime");
+var import_dedupe60 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime70 = require("react/jsx-runtime");
 var TextAreaInput = ({ ref, ...props }) => {
   const { isSelected, isDisabled, isReadOnly, isRequired, ...otherProps } = props;
-  const classes = (0, import_dedupe59.default)(
+  const classes = (0, import_dedupe60.default)(
     "mobius",
     "mobius-text-area__input",
     {
@@ -5129,7 +5129,7 @@ var TextAreaInput = ({ ref, ...props }) => {
     },
     otherProps.className
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
     "textarea",
     {
       ref,
@@ -5144,7 +5144,7 @@ TextAreaInput.displayName = "TextAreaInput";
 
 // src/components/TextArea/TextArea.tsx
 var import_TextArea = require("@simplybusiness/mobius/src/components/TextArea/TextArea.css");
-var import_jsx_runtime70 = require("react/jsx-runtime");
+var import_jsx_runtime71 = require("react/jsx-runtime");
 var TextArea = ({ ref, ...props }) => {
   const {
     isDisabled,
@@ -5155,18 +5155,18 @@ var TextArea = ({ ref, ...props }) => {
     ...otherProps
   } = props;
   const { inputProps, labelProps, errorMessageProps } = useTextField(props);
-  const classes = (0, import_dedupe60.default)("mobius", "mobius-text-area", className);
+  const classes = (0, import_dedupe61.default)("mobius", "mobius-text-area", className);
   const validationClasses = useValidationClasses({ isInvalid });
-  const inputClasses = (0, import_dedupe60.default)("mobius-text-area__input", validationClasses);
-  const labelClasses = (0, import_dedupe60.default)(
+  const inputClasses = (0, import_dedupe61.default)("mobius-text-area__input", validationClasses);
+  const labelClasses = (0, import_dedupe61.default)(
     {
       "--is-disabled": isDisabled
     },
     validationClasses
   );
-  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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(Stack, { className: classes, gap: "xs", children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Label, { ...labelProps, className: labelClasses, children: props.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
       TextAreaInput,
       {
         ...otherProps,
@@ -5177,7 +5177,7 @@ var TextArea = ({ ref, ...props }) => {
         "aria-invalid": errorMessage != null
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ErrorMessage, { ...errorMessageProps, errorMessage })
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ErrorMessage, { ...errorMessageProps, errorMessage })
   ] });
 };
 TextArea.displayName = "TextArea";
@@ -5187,9 +5187,9 @@ init_TextField2();
 init_TextOrHTML2();
 
 // src/components/Title/Title.tsx
-var import_dedupe61 = __toESM(require("classnames/dedupe"));
+var import_dedupe62 = __toESM(require("classnames/dedupe"));
 var import_Title = require("@simplybusiness/mobius/src/components/Title/Title.css");
-var import_jsx_runtime71 = require("react/jsx-runtime");
+var import_jsx_runtime72 = require("react/jsx-runtime");
 var Title = ({ ref, ...props }) => {
   const {
     elementType: Element = "div",
@@ -5197,20 +5197,20 @@ var Title = ({ ref, ...props }) => {
     description,
     ...otherProps
   } = props;
-  const classes = (0, import_dedupe61.default)("mobius", "mobius-title", otherProps.className);
-  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_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 })
+  const classes = (0, import_dedupe62.default)("mobius", "mobius-title", otherProps.className);
+  const headerClasses = (0, import_dedupe62.default)("mobius", "mobius-title__header");
+  const contentClasses = (0, import_dedupe62.default)("mobius", "mobius-title__description");
+  const containerClasses = (0, import_dedupe62.default)("mobius", "mobius-title__container");
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Element, { ref, ...otherProps, className: classes, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(Flex, { flexDirection: "column", className: containerClasses, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("p", { className: headerClasses, children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("p", { className: contentClasses, children: description })
   ] }) });
 };
 Title.displayName = "Title";
 
 // src/components/Toast/Toast.tsx
 var import_icons14 = require("@simplybusiness/icons");
-var import_dedupe62 = __toESM(require("classnames/dedupe"));
+var import_dedupe63 = __toESM(require("classnames/dedupe"));
 var import_sonner = require("sonner");
 init_Icon2();
 
@@ -5221,7 +5221,7 @@ var toastState = {
 
 // src/components/Toast/Toast.tsx
 var import_Toast = require("@simplybusiness/mobius/src/components/Toast/Toast.css");
-var import_jsx_runtime72 = require("react/jsx-runtime");
+var import_jsx_runtime73 = require("react/jsx-runtime");
 var variantIcons = {
   info: import_icons14.circleInfo,
   success: import_icons14.circleCheck,
@@ -5234,8 +5234,8 @@ var variantColors = {
   warning: "var(--color-warning)",
   error: "var(--color-error)"
 };
-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 ToastIcon = ({ variant }) => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "mobius-toast__icon", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Icon, { icon: variantIcons[variant], color: variantColors[variant] }) });
+var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "mobius-toast__close-icon", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Icon, { icon: import_icons14.cross }) });
 var ToastContent = ({
   toastId,
   variant,
@@ -5244,15 +5244,15 @@ var ToastContent = ({
   action,
   cancel,
   showCloseButton = toastState.showCloseButton
-}) => /* @__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 })
+}) => /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: (0, import_dedupe63.default)("mobius", "mobius-toast", `--${variant}`), children: [
+  /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(ToastIcon, { variant }),
+  /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "mobius-toast__body", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "mobius-toast__content", children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "mobius-toast__title", children: title }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "mobius-toast__description", children: description })
     ] }),
-    (action || cancel) && /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "mobius-toast__actions", children: [
-      cancel && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+    (action || cancel) && /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "mobius-toast__actions", children: [
+      cancel && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
         "button",
         {
           type: "button",
@@ -5264,7 +5264,7 @@ var ToastContent = ({
           children: cancel.label
         }
       ),
-      action && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+      action && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
         "button",
         {
           type: "button",
@@ -5278,19 +5278,19 @@ var ToastContent = ({
       )
     ] })
   ] }),
-  showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+  showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
     "button",
     {
       type: "button",
       className: "mobius-toast__close",
       onClick: () => import_sonner.toast.dismiss(toastId),
       "aria-label": "Close",
-      children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(CloseIcon, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(CloseIcon, {})
     }
   )
 ] });
 var createCustomToast = (message, variant, options) => import_sonner.toast.custom(
-  (id) => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+  (id) => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
     ToastContent,
     {
       toastId: id,
@@ -5322,9 +5322,9 @@ 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 import_jsx_runtime74 = require("react/jsx-runtime");
 var Toaster = ({
   position = "top-right",
   closeButton = true,
@@ -5333,10 +5333,10 @@ 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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
     import_sonner2.Toaster,
     {
       position,
@@ -5351,8 +5351,8 @@ var Toaster = ({
 Toaster.displayName = "Toaster";
 
 // src/components/Trust/Trust.tsx
-var import_dedupe63 = __toESM(require("classnames/dedupe"));
-var import_react48 = require("react");
+var import_dedupe64 = __toESM(require("classnames/dedupe"));
+var import_react49 = require("react");
 init_utils();
 
 // src/components/Trust/constants.ts
@@ -5417,7 +5417,7 @@ var TRUSTPILOT_WIDGET = {
 };
 
 // src/components/Trust/Trust.tsx
-var import_jsx_runtime74 = require("react/jsx-runtime");
+var import_jsx_runtime75 = require("react/jsx-runtime");
 var Trust = ({ ref, ...props }) => {
   const {
     elementType: Element = "div",
@@ -5429,8 +5429,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,
@@ -5447,7 +5447,7 @@ var Trust = ({ ref, ...props }) => {
     "data-style-height": height,
     "data-stars": stars
   };
-  const classes = (0, import_dedupe63.default)(
+  const classes = (0, import_dedupe64.default)(
     "mobius",
     "mobius-trust",
     REQUIRED_TRUSTPILOT_CLASS_NAME,
@@ -5457,24 +5457,24 @@ 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 });
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+  if (!isMounted) return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { style: styles });
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
     Element,
     {
       ref: mergeRefs([trustRef, ref]),
       className: classes,
       style: styles,
       ...dataProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
         "a",
         {
           href: link,
@@ -5489,12 +5489,12 @@ var Trust = ({ ref, ...props }) => {
 };
 
 // src/components/ExpandableText/ExpandableText.tsx
-var import_dedupe64 = __toESM(require("classnames/dedupe"));
-var import_react49 = require("react");
+var import_dedupe65 = __toESM(require("classnames/dedupe"));
+var import_react50 = require("react");
 init_hooks();
 init_TextOrHTML2();
 var import_ExpandableText = require("@simplybusiness/mobius/src/components/ExpandableText/ExpandableText.css");
-var import_jsx_runtime75 = require("react/jsx-runtime");
+var import_jsx_runtime76 = require("react/jsx-runtime");
 var ExpandableText = ({ ref, ...props }) => {
   const {
     text,
@@ -5508,14 +5508,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;
@@ -5525,20 +5525,20 @@ var ExpandableText = ({ ref, ...props }) => {
     setIsCollapsed(isOverflowing);
   }, [text, shouldCollapse, maxLines]);
   if (breakpoint && !shouldCollapse) {
-    return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { ref, className, ...otherProps, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(TextOrHTML, { text, textWrapper: true, ...textProps }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { ref, className, ...otherProps, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(TextOrHTML, { text, textWrapper: true, ...textProps }) });
   }
   const handleAccordionChange = (expanded) => {
     setIsExpanded(expanded);
     onToggle?.(expanded);
   };
-  const classes = (0, import_dedupe64.default)("mobius-expandable-text", className);
-  const textContainerClasses = (0, import_dedupe64.default)("mobius-expandable-text__content", {
+  const classes = (0, import_dedupe65.default)("mobius-expandable-text", className);
+  const textContainerClasses = (0, import_dedupe65.default)("mobius-expandable-text__content", {
     "mobius-expandable-text__content--collapsed": !isExpanded
   });
   const textContainerStyle = {
     "--line-clamp": maxLines
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
     "div",
     {
       ref,
@@ -5546,7 +5546,7 @@ var ExpandableText = ({ ref, ...props }) => {
       "data-testid": "expandable-text",
       ...otherProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
           "div",
           {
             ref: textRef,
@@ -5554,10 +5554,10 @@ var ExpandableText = ({ ref, ...props }) => {
             style: textContainerStyle,
             "data-testid": "expandable-text-content",
             "aria-describedby": isCollapsed ? expandButtonId : void 0,
-            children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(TextOrHTML, { elementType: "span", textWrapper: true, text, ...textProps })
+            children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(TextOrHTML, { elementType: "span", textWrapper: true, text, ...textProps })
           }
         ),
-        isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+        isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
           Accordion,
           {
             showText,
@@ -5580,7 +5580,7 @@ ExpandableText.displayName = "ExpandableText";
 // src/components/MaskedField/index.tsx
 var import_component = __toESM(require("@loadable/component"));
 init_TextField2();
-var import_jsx_runtime77 = require("react/jsx-runtime");
+var import_jsx_runtime78 = require("react/jsx-runtime");
 var LoadableMaskedField = (0, import_component.default)(() => Promise.resolve().then(() => (init_MaskedField(), MaskedField_exports)), {
   resolveComponent: (mod) => mod.MaskedField
 });
@@ -5592,11 +5592,11 @@ function MaskedField2(props) {
     ref: forwardedRef,
     ...textFieldProps
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
     LoadableMaskedField,
     {
       ...props,
-      fallback: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+      fallback: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
         TextField,
         {
           ...textFieldProps,