@simplybusiness/mobius 10.4.4 → 10.6.0

package/dist/cjs/index.js

@@ -6,9 +6,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;
 };
@@ -33,10 +30,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({
@@ -1085,7 +1078,7 @@ var MaskedField_exports = {};
 __export(MaskedField_exports, {
   MaskedField: () => MaskedField
 });
-var import_react51, 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";
@@ -1093,7 +1086,7 @@ var init_MaskedField = __esm({
     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_react51.useCallback)(
         (maskedValue, maskInstance) => {
@@ -1165,7 +1158,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,
@@ -1189,7 +1182,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,
@@ -1203,7 +1196,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,
@@ -1212,7 +1205,7 @@ var init_MaskedField = __esm({
           }
         );
       } else {
-        return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
           UncontrolledMaskedField,
           {
             ...rest,
@@ -1277,6 +1270,7 @@ __export(src_exports, {
   Select: () => Select,
   Slider: () => Slider,
   Stack: () => Stack,
+  StickyOnMobile: () => StickyOnMobile,
   Switch: () => Switch,
   Table: () => Table2,
   Text: () => Text,
@@ -2454,39 +2448,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);
       }
@@ -2501,32 +2494,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");
@@ -4944,16 +4933,31 @@ var Slider = (props) => {
   ] });
 };
 
-// src/components/SVG/SVG.tsx
-var import_react46 = 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 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,
@@ -4969,9 +4973,9 @@ SVG.displayName = "SVG";
 
 // src/components/Switch/Switch.tsx
 var import_react47 = require("react");
-var import_dedupe51 = __toESM(require("classnames/dedupe"));
+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,
@@ -4984,7 +4988,7 @@ var Switch = ({ ref, ...props }) => {
   (0, import_react47.useEffect)(() => {
     setEnabled(checked);
   }, [checked]);
-  const classes = (0, import_dedupe51.default)(
+  const classes = (0, import_dedupe52.default)(
     "mobius",
     "mobius-switch",
     {
@@ -4999,9 +5003,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",
@@ -5012,80 +5016,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";
 
@@ -5101,18 +5105,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",
     {
@@ -5122,7 +5126,7 @@ var TextAreaInput = ({ ref, ...props }) => {
     },
     otherProps.className
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
     "textarea",
     {
       ref,
@@ -5137,7 +5141,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,
@@ -5148,18 +5152,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,
@@ -5170,15 +5174,15 @@ 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";
 
 // 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",
@@ -5186,20 +5190,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();
 
@@ -5210,7 +5214,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,
@@ -5223,8 +5227,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,
@@ -5233,15 +5237,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",
@@ -5253,7 +5257,7 @@ var ToastContent = ({
           children: cancel.label
         }
       ),
-      action && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+      action && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
         "button",
         {
           type: "button",
@@ -5267,19 +5271,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,
@@ -5313,7 +5317,7 @@ var toast = {
 // src/components/Toast/Toaster.tsx
 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,
@@ -5325,7 +5329,7 @@ var Toaster = ({
   (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,
@@ -5340,7 +5344,7 @@ var Toaster = ({
 Toaster.displayName = "Toaster";
 
 // src/components/Trust/Trust.tsx
-var import_dedupe63 = __toESM(require("classnames/dedupe"));
+var import_dedupe64 = __toESM(require("classnames/dedupe"));
 var import_react49 = require("react");
 init_utils();
 
@@ -5406,7 +5410,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",
@@ -5436,7 +5440,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,
@@ -5455,15 +5459,15 @@ var Trust = ({ ref, ...props }) => {
   (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,
@@ -5478,12 +5482,12 @@ var Trust = ({ ref, ...props }) => {
 };
 
 // src/components/ExpandableText/ExpandableText.tsx
-var import_dedupe64 = __toESM(require("classnames/dedupe"));
+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,
@@ -5514,20 +5518,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,
@@ -5535,7 +5539,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,
@@ -5543,10 +5547,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,
@@ -5569,7 +5573,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
 });
@@ -5581,11 +5585,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,