@simplybusiness/mobius 9.0.1 → 9.1.0

package/dist/esm/index.js

@@ -1,18 +1,27 @@
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-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);
+import {
+  ErrorMessage,
+  Icon,
+  Label,
+  Stack,
+  Text,
+  TextField,
+  TextOrHTML,
+  __privateAdd,
+  __privateGet,
+  __privateSet,
+  spaceDelimitedList,
+  useLabel,
+  useTextField,
+  useValidationClasses
+} from "./chunk-XUNHMVIS.js";
 
 // src/components/Accordion/Accordion.tsx
-import classNames4 from "classnames/dedupe";
+import classNames3 from "classnames/dedupe";
 import { useEffect, useState, useId } from "react";
 import { usePrefersReducedMotion } from "@simplybusiness/mobius-hooks";
 
 // src/components/Accordion/AccordionLink.tsx
-import classNames3 from "classnames/dedupe";
+import classNames2 from "classnames/dedupe";
 
 // src/components/Flex/Flex.tsx
 import classNames from "classnames/dedupe";
@@ -71,11 +80,6 @@ var sizeClasses = (size) => {
   };
 };
 
-// src/utils/spaceDelimitedList.ts
-function spaceDelimitedList(list) {
-  return list.filter(Boolean).join(" ") || void 0;
-}
-
 // src/components/Flex/propUtils.ts
 var buildFlexStyles = (props) => {
   const {
@@ -162,65 +166,9 @@ var Flex = ({ ref, ...props }) => {
 };
 Flex.displayName = "Flex";
 
-// src/components/Icon/Icon.tsx
-import classNames2 from "classnames/dedupe";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var ICON_PREFIX = "mobius-icon";
-var capitaliseFirstLetter = (str) => str.charAt(0).toUpperCase() + str.slice(1);
-function Icon({
-  ref,
-  icon,
-  className,
-  size = "xs",
-  color,
-  fixedWidth,
-  spin,
-  spinReverse,
-  title,
-  ...otherProps
-}) {
-  if (!icon) {
-    throw new Error("Must specify icon object");
-  }
-  const classes = classNames2(
-    "mobius",
-    "mobius-icon",
-    `svg-inline--${ICON_PREFIX}`,
-    `--size-${size}`,
-    className,
-    {
-      [`${ICON_PREFIX}-fw`]: fixedWidth,
-      [`${ICON_PREFIX}-spin`]: spin || spinReverse,
-      [`${ICON_PREFIX}-spin-reverse`]: spinReverse
-    }
-  );
-  const { iconName, width, height, svgPathData } = icon;
-  const formattedIconName = iconName.split("-").join(" ");
-  const defaultTitle = `${capitaliseFirstLetter(formattedIconName)} icon`;
-  const titleText = title || defaultTitle;
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      ref,
-      focusable: "false",
-      "data-icon": iconName,
-      className: classes,
-      role: "img",
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: `0 0 ${width} ${height}`,
-      style: { color },
-      ...otherProps,
-      children: [
-        /* @__PURE__ */ jsx2("title", { children: titleText }),
-        /* @__PURE__ */ jsx2("path", { fill: "currentColor", d: svgPathData })
-      ]
-    }
-  );
-}
-
 // src/components/Accordion/AccordionLink.tsx
 import { chevronDown } from "@simplybusiness/icons";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var AccordionLink = ({
   text,
   elementType: LinkElement = "span",
@@ -231,10 +179,10 @@ var AccordionLink = ({
   accordionId,
   contentId
 }) => {
-  const linkClasses = classNames3("mobius-accordion__link", {
+  const linkClasses = classNames2("mobius-accordion__link", {
     "--is-open": ariaExpanded
   });
-  const iconClasses = classNames3("mobius-accordion__link-icon", {
+  const iconClasses = classNames2("mobius-accordion__link-icon", {
     "--is-open": ariaExpanded
   });
   const handleOnClick = (e) => {
@@ -249,14 +197,14 @@ var AccordionLink = ({
     }
   };
   if (headerChildren) {
-    return /* @__PURE__ */ jsxs2(
+    return /* @__PURE__ */ jsxs(
       Flex,
       {
         justifyContent: "space-between",
         alignItems: "center",
         className: "mobius-accordion__header",
         children: [
-          /* @__PURE__ */ jsxs2(
+          /* @__PURE__ */ jsxs(
             "div",
             {
               id: accordionId,
@@ -268,8 +216,8 @@ var AccordionLink = ({
               "aria-expanded": !!ariaExpanded,
               "aria-controls": contentId,
               children: [
-                /* @__PURE__ */ jsx3(LinkElement, { className: "mobius-accordion__link-text", children: text }),
-                /* @__PURE__ */ jsx3(Icon, { icon: chevronDown, className: iconClasses })
+                /* @__PURE__ */ jsx2(LinkElement, { className: "mobius-accordion__link-text", children: text }),
+                /* @__PURE__ */ jsx2(Icon, { icon: chevronDown, className: iconClasses })
               ]
             }
           ),
@@ -278,7 +226,7 @@ var AccordionLink = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       id: accordionId,
@@ -290,15 +238,15 @@ var AccordionLink = ({
       "aria-expanded": !!ariaExpanded,
       "aria-controls": contentId,
       children: [
-        /* @__PURE__ */ jsx3(LinkElement, { className: "mobius-accordion__link-text", children: text }),
-        /* @__PURE__ */ jsx3(Icon, { icon: chevronDown, className: iconClasses })
+        /* @__PURE__ */ jsx2(LinkElement, { className: "mobius-accordion__link-text", children: text }),
+        /* @__PURE__ */ jsx2(Icon, { icon: chevronDown, className: iconClasses })
       ]
     }
   );
 };
 
 // src/components/Accordion/Accordion.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var Accordion = ({ ref, ...props }) => {
   const {
     showText = "See more",
@@ -319,7 +267,7 @@ var Accordion = ({ ref, ...props }) => {
     withAnimation: false
   });
   const prefersReducedMotion = usePrefersReducedMotion();
-  const containerClasses = classNames4(
+  const containerClasses = classNames3(
     "mobius",
     "mobius-accordion",
     props.className,
@@ -328,13 +276,13 @@ var Accordion = ({ ref, ...props }) => {
       "--is-open": accordionState.open
     }
   );
-  const contentContainerClasses = classNames4(
+  const contentContainerClasses = classNames3(
     "mobius-accordion__content-container",
     {
       "--is-open": accordionState.open
     }
   );
-  const contentClasses = classNames4("mobius-accordion__content", {
+  const contentClasses = classNames3("mobius-accordion__content", {
     "--is-open": accordionState.open
   });
   const linkText = accordionState.open ? hideText : showText;
@@ -362,8 +310,8 @@ var Accordion = ({ ref, ...props }) => {
   const baseId = useId();
   const accordionId = `accordion-header-${baseId}`;
   const contentId = `accordion-panel-${baseId}`;
-  return /* @__PURE__ */ jsxs3("div", { ref, ...rest, className: containerClasses, children: [
-    headerPosition === "top" && /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs2("div", { ref, ...rest, className: containerClasses, children: [
+    headerPosition === "top" && /* @__PURE__ */ jsx3(
       AccordionLink,
       {
         text: linkText,
@@ -376,7 +324,7 @@ var Accordion = ({ ref, ...props }) => {
         contentId
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx3(
       "div",
       {
         id: contentId,
@@ -384,10 +332,10 @@ var Accordion = ({ ref, ...props }) => {
         "aria-hidden": !accordionState.open,
         "aria-labelledby": accordionId,
         role: "region",
-        children: /* @__PURE__ */ jsx4("div", { className: contentClasses, children: props.children })
+        children: /* @__PURE__ */ jsx3("div", { className: contentClasses, children: props.children })
       }
     ),
-    headerPosition === "bottom" && /* @__PURE__ */ jsx4(
+    headerPosition === "bottom" && /* @__PURE__ */ jsx3(
       AccordionLink,
       {
         text: linkText,
@@ -405,32 +353,32 @@ Accordion.displayName = "Accordion";
 
 // src/components/Accordion/AccordionList.tsx
 import { useState as useState2, Fragment } from "react";
-import classNames6 from "classnames/dedupe";
+import classNames5 from "classnames/dedupe";
 
 // src/components/Divider/Divider.tsx
-import classNames5 from "classnames/dedupe";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import classNames4 from "classnames/dedupe";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var Divider = ({
   "aria-orientation": ariaOrientation = "horizontal",
   className,
   ...rest
 }) => {
-  const classes = classNames5("mobius", "mobius-divider", className);
-  return /* @__PURE__ */ jsx5(
+  const classes = classNames4("mobius", "mobius-divider", className);
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       className: classes,
       role: "separator",
       "aria-orientation": ariaOrientation,
       ...rest,
-      children: /* @__PURE__ */ jsx5("div", { className: "mobius-divider__inner" })
+      children: /* @__PURE__ */ jsx4("div", { className: "mobius-divider__inner" })
     }
   );
 };
 Divider.displayName = "Divider";
 
 // src/components/Accordion/AccordionList.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var AccordionList = (props) => {
   const {
     className,
@@ -441,7 +389,7 @@ var AccordionList = (props) => {
     ...rest
   } = props;
   const [openIds, setOpenIds] = useState2(/* @__PURE__ */ new Set());
-  const classes = classNames6("mobius", "mobius-accordion-list", className);
+  const classes = classNames5("mobius", "mobius-accordion-list", className);
   const handleAccordionChange = (id, isOpen) => {
     setOpenIds((prev) => {
       const newSet = new Set(prev);
@@ -461,11 +409,11 @@ var AccordionList = (props) => {
       onClose?.(id);
     }
   };
-  return /* @__PURE__ */ jsx6("div", { className: classes, ...rest, children: content.map((item, index) => {
+  return /* @__PURE__ */ jsx5("div", { className: classes, ...rest, children: content.map((item, index) => {
     const { id, header, details } = item;
     const isOpen = openIds.has(id);
-    return /* @__PURE__ */ jsxs4(Fragment, { children: [
-      /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsxs3(Fragment, { children: [
+      /* @__PURE__ */ jsx5(
         Accordion,
         {
           startOpen: isOpen,
@@ -475,7 +423,7 @@ var AccordionList = (props) => {
           children: details
         }
       ),
-      index < content.length - 1 && /* @__PURE__ */ jsx6(Divider, {})
+      index < content.length - 1 && /* @__PURE__ */ jsx5(Divider, {})
     ] }, id);
   }) });
 };
@@ -486,8 +434,8 @@ import { search } from "@simplybusiness/icons";
 import { useCallback as useCallback4, useState as useState9 } from "react";
 
 // src/components/Combobox/Combobox.tsx
-import classNames14 from "classnames/dedupe";
-import { useEffect as useEffect6, useId as useId4, useRef as useRef4, useState as useState8 } from "react";
+import classNames8 from "classnames/dedupe";
+import { useEffect as useEffect6, useId as useId2, useRef as useRef3, useState as useState8 } from "react";
 import { useOnUnmount } from "@simplybusiness/mobius-hooks";
 
 // src/hooks/useBreakpoint/useBreakpoint.tsx
@@ -636,8 +584,8 @@ var useDialogPolyfill = () => {
         if (ref.current) {
           dialogPolyfill.registerDialog(ref.current);
         }
-      } catch (error3) {
-        console.error("Failed to load dialog-polyfill", error3);
+      } catch (error2) {
+        console.error("Failed to load dialog-polyfill", error2);
       }
     }
   };
@@ -704,294 +652,8 @@ var useDialog = (props) => {
   };
 };
 
-// src/hooks/useLabel/useLabel.tsx
-import { useId as useId2, useRef as useRef2 } from "react";
-function useLabel({
-  id: providedId,
-  label,
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledby,
-  labelElementType = "label"
-}) {
-  let labelProps = {};
-  let fieldProps = {};
-  const hasWarnedAboutMissingLabels = useRef2(false);
-  const fallbackId = useId2();
-  const id = providedId || fallbackId;
-  const labelId = useId2();
-  if (label) {
-    ariaLabelledby = ariaLabelledby ? `${labelId} ${ariaLabelledby}` : labelId;
-    labelProps = {
-      id: labelId,
-      htmlFor: labelElementType === "label" ? id : void 0
-    };
-  } else if (!ariaLabelledby && !ariaLabel && !hasWarnedAboutMissingLabels.current) {
-    hasWarnedAboutMissingLabels.current = true;
-    console.warn(
-      "If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility"
-    );
-  }
-  fieldProps = {
-    id,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledby
-  };
-  return {
-    labelProps,
-    fieldProps
-  };
-}
-
-// src/hooks/useTextField/useTextField.tsx
-import { useId as useId3 } from "react";
-function useTextField(props) {
-  const {
-    isDisabled = false,
-    isReadOnly = false,
-    isRequired = false,
-    inputElementType = "input"
-  } = props;
-  const { labelProps, fieldProps } = useLabel(props);
-  const descriptionId = useId3();
-  const descriptionProps = { id: descriptionId };
-  const errorMessageId = useId3();
-  const errorMessageProps = { id: errorMessageId };
-  const ariaDescribedBy = spaceDelimitedList([
-    props.description && descriptionId,
-    props.errorMessage && errorMessageId,
-    props["aria-describedby"]
-  ]);
-  return {
-    descriptionProps,
-    errorMessageProps,
-    labelProps,
-    inputProps: {
-      defaultValue: props.defaultValue,
-      value: props.value,
-      onChange: props.onChange,
-      disabled: isDisabled,
-      readOnly: isReadOnly,
-      required: isRequired,
-      "aria-required": isRequired === true ? true : void 0,
-      "aria-invalid": props.isInvalid,
-      "aria-describedby": ariaDescribedBy,
-      "aria-errormessage": props["aria-errormessage"],
-      role: props.role,
-      type: inputElementType === "input" ? props.type : void 0,
-      pattern: inputElementType === "input" ? props.pattern : void 0,
-      autoComplete: props.autoComplete,
-      maxLength: props.maxLength,
-      minLength: props.minLength,
-      name: props.name,
-      placeholder: props.placeholder,
-      inputMode: props.inputMode,
-      // Clipboard events
-      onCopy: props.onCopy,
-      onCut: props.onCut,
-      onPaste: props.onPaste,
-      // Composition events
-      onCompositionEnd: props.onCompositionEnd,
-      onCompositionStart: props.onCompositionStart,
-      onCompositionUpdate: props.onCompositionUpdate,
-      // Selection events
-      onSelect: props.onSelect,
-      // Input events
-      onBeforeInput: props.onBeforeInput,
-      onInput: props.onInput,
-      // Focus events
-      onFocus: props.onFocus,
-      onBlur: props.onBlur,
-      ...fieldProps
-    }
-  };
-}
-
-// src/hooks/useValidationClasses/useValidationClasses.ts
-var useValidationClasses = (props) => {
-  const { isInvalid } = props;
-  if (isInvalid) {
-    return "--is-invalid";
-  }
-  if (isInvalid === false) {
-    return "--is-valid";
-  }
-  return "";
-};
-
-// src/components/TextField/TextField.tsx
-import classNames11 from "classnames/dedupe";
-
-// src/components/ErrorMessage/ErrorMessage.tsx
-import { error } from "@simplybusiness/icons";
-import classNames7 from "classnames/dedupe";
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
-var ErrorMessage = ({
-  id,
-  errorMessage,
-  className
-}) => {
-  const classes = classNames7("mobius", "mobius-error-message", className);
-  if (!errorMessage) return null;
-  return /* @__PURE__ */ jsxs5("div", { id, className: classes, "data-testid": "ErrorMessage", role: "alert", children: [
-    /* @__PURE__ */ jsx7(
-      Icon,
-      {
-        icon: error,
-        className: "mobius-error-message__icon",
-        "aria-hidden": "true"
-      }
-    ),
-    /* @__PURE__ */ jsx7(
-      TextOrHTML,
-      {
-        elementType: "span",
-        className: "mobius-error-message__text",
-        text: errorMessage
-      }
-    )
-  ] });
-};
-ErrorMessage.displayName = "ErrorMessage";
-
-// src/components/Label/Label.tsx
-import classNames8 from "classnames/dedupe";
-import { jsx as jsx8 } from "react/jsx-runtime";
-var Label = ({ ref, ...props }) => {
-  const { elementType: Element = "label", children, ...otherProps } = props;
-  const classes = classNames8("mobius", "mobius-label", props.className);
-  otherProps.className = classes;
-  return /* @__PURE__ */ jsx8(Element, { ref, ...otherProps, className: classes, children });
-};
-Label.displayName = "Label";
-
-// src/components/Stack/Stack.tsx
-import classNames9 from "classnames/dedupe";
-import { jsx as jsx9 } from "react/jsx-runtime";
-var Stack = ({ ref, ...props }) => {
-  const { elementType: Element = "div", gap, ...otherProps } = props;
-  const classes = classNames9(
-    "mobius",
-    "mobius-stack",
-    {
-      [`--gap-${gap}`]: gap
-    },
-    otherProps.className
-  );
-  return /* @__PURE__ */ jsx9(Element, { ref, ...otherProps, className: classes });
-};
-Stack.displayName = "Stack";
-
-// src/components/TextField/adornmentWithClassName.ts
-import classNames10 from "classnames/dedupe";
-import { cloneElement } from "react";
-var adornmentWithClassName = (component, validationClasses, className) => {
-  if (!component) return null;
-  return cloneElement(component, {
-    className: classNames10(
-      component.props.className,
-      validationClasses,
-      className
-    )
-  });
-};
-
-// src/components/TextField/TextField.tsx
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
-var TextField = ({ ref, ...props }) => {
-  const {
-    isDisabled,
-    type = "text",
-    isInvalid,
-    className,
-    label,
-    errorMessage,
-    children,
-    isRequired,
-    prefixInside,
-    prefixOutside,
-    suffixInside,
-    suffixOutside,
-    isReadOnly,
-    ...otherProps
-  } = props;
-  const { inputProps, labelProps, errorMessageProps } = useTextField({
-    ...props,
-    "aria-errormessage": errorMessage
-  });
-  const hidden = type === "hidden";
-  const validationClasses = useValidationClasses({ isInvalid });
-  const textfieldClasses = {
-    "--is-disabled": isDisabled,
-    "--is-required": typeof isRequired === "boolean" && isRequired,
-    "--is-optional": typeof isRequired === "boolean" && !isRequired,
-    "--is-hidden": hidden,
-    [className || ""]: true
-  };
-  const sharedClasses = classNames11(validationClasses, textfieldClasses);
-  const labelClasses = classNames11(
-    {
-      "--is-disabled": isDisabled
-    },
-    validationClasses
-  );
-  const containerClasses = classNames11(
-    "mobius",
-    "mobius-text-field",
-    sharedClasses
-  );
-  const inputClasses = classNames11(
-    "mobius",
-    "mobius-text-field__input",
-    sharedClasses
-  );
-  const inputWrapperClasses = classNames11(
-    "mobius-text-field__input-wrapper",
-    sharedClasses
-  );
-  return /* @__PURE__ */ jsxs6(Stack, { gap: "xs", className: containerClasses, children: [
-    label && !hidden && /* @__PURE__ */ jsx10(Label, { ...labelProps, className: labelClasses, children: label }),
-    /* @__PURE__ */ jsxs6("div", { className: "mobius-text-field__inner-container", children: [
-      adornmentWithClassName(
-        prefixOutside,
-        labelClasses,
-        "mobius-text-field__prefix-outside"
-      ),
-      /* @__PURE__ */ jsxs6("div", { className: inputWrapperClasses, children: [
-        adornmentWithClassName(
-          prefixInside,
-          labelClasses,
-          "mobius-text-field__prefix-inside"
-        ),
-        /* @__PURE__ */ jsx10(
-          "input",
-          {
-            ...otherProps,
-            ...inputProps,
-            ref,
-            type,
-            className: inputClasses
-          }
-        ),
-        adornmentWithClassName(
-          suffixInside,
-          labelClasses,
-          "mobius-text-field__suffix-inside"
-        )
-      ] }),
-      adornmentWithClassName(
-        suffixOutside,
-        labelClasses,
-        "mobius-text-field__suffix-outside"
-      )
-    ] }),
-    children && /* @__PURE__ */ jsx10("div", { className: "mobius-text-field__children", children }),
-    /* @__PURE__ */ jsx10(ErrorMessage, { ...errorMessageProps, errorMessage })
-  ] });
-};
-TextField.displayName = "TextField";
-
 // src/components/VisuallyHidden/VisuallyHidden.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function VisuallyHidden(props) {
   const {
     className,
@@ -999,7 +661,7 @@ function VisuallyHidden(props) {
     elementType: Component = "div",
     ...otherProps
   } = props;
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx6(
     Component,
     {
       className,
@@ -1022,11 +684,11 @@ function VisuallyHidden(props) {
 }
 
 // src/components/Combobox/Listbox.tsx
-import classNames13 from "classnames/dedupe";
+import classNames7 from "classnames/dedupe";
 
 // src/components/Combobox/Option.tsx
-import { useEffect as useEffect4, useRef as useRef3 } from "react";
-import classNames12 from "classnames/dedupe";
+import { useEffect as useEffect4, useRef as useRef2 } from "react";
+import classNames6 from "classnames/dedupe";
 
 // src/components/Combobox/utils.tsx
 function isOptionGroup(options) {
@@ -1048,41 +710,49 @@ function filterOptions(options, inputValue) {
     (option) => getOptionLabel(option).toLowerCase().includes(inputValue.toLowerCase())
   );
 }
+var buildOptionTestId = (prefix, value) => `${prefix}-${value.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "")}`;
 
 // src/components/Combobox/Option.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var Option = ({
   option,
   isHighlighted,
   onOptionSelect,
   optionComponent: OptionComponent,
+  optionTestIdPrefix,
   id
 }) => {
-  const optionRef = useRef3(null);
+  const optionRef = useRef2(null);
+  const optionValue = getOptionValue(option) || "";
+  const testId = buildOptionTestId(
+    optionTestIdPrefix || "combobox-option",
+    optionValue
+  );
   useEffect4(() => {
     if (isHighlighted && optionRef.current && optionRef.current.scrollIntoView) {
       optionRef.current.scrollIntoView({ block: "nearest" });
     }
   }, [isHighlighted]);
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx7(
     "li",
     {
       ref: optionRef,
       role: "option",
+      "data-testid": testId,
       id,
       "aria-selected": isHighlighted,
       onMouseDown: () => onOptionSelect(option),
-      className: classNames12("mobius-combobox__option", "has-pii", {
+      className: classNames6("mobius-combobox__option", "has-pii", {
         "mobius-combobox__option--is-highlighted": isHighlighted
       }),
-      children: OptionComponent ? /* @__PURE__ */ jsx12(OptionComponent, { option, isHighlighted }) : getOptionLabel(option)
+      children: OptionComponent ? /* @__PURE__ */ jsx7(OptionComponent, { option, isHighlighted }) : getOptionLabel(option)
     },
     getOptionValue(option)
   );
 };
 
 // src/components/Combobox/Listbox.tsx
-import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var getOptionKey = (option, index, groupIndex) => {
   let key;
   if (typeof option === "object" && option.id) key = option.id;
@@ -1098,9 +768,10 @@ var Listbox = ({
   highlightedIndex,
   highlightedGroupIndex,
   onOptionSelect,
-  optionComponent
+  optionComponent,
+  optionTestIdPrefix
 }) => {
-  const classes = classNames13("mobius-combobox__list", {
+  const classes = classNames7("mobius-combobox__list", {
     "mobius-combobox__list--hidden": !isOpen
   });
   function getOptionId(option, groupIndex, index) {
@@ -1110,19 +781,19 @@ var Listbox = ({
     return isOptionGroup(options) ? `${id}-option-${groupIndex}-${index}` : `${id}-option-${index}`;
   }
   if (!isOpen) {
-    return /* @__PURE__ */ jsx13("div", { role: "listbox", id, className: classes });
+    return /* @__PURE__ */ jsx8("div", { role: "listbox", id, className: classes });
   }
   if (options && options.length === 0) {
-    return /* @__PURE__ */ jsx13("div", { role: "listbox", id, className: classes, children: /* @__PURE__ */ jsx13("div", { className: "mobius-combobox__no-options", children: "No options" }) });
+    return /* @__PURE__ */ jsx8("div", { role: "listbox", id, className: classes, children: /* @__PURE__ */ jsx8("div", { className: "mobius-combobox__no-options", children: "No options" }) });
   }
-  return /* @__PURE__ */ jsx13("div", { role: "listbox", id, className: classes, children: isOptionGroup(options) ? options.map((option, groupIndex) => /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsx8("div", { role: "listbox", id, className: classes, children: isOptionGroup(options) ? options.map((option, groupIndex) => /* @__PURE__ */ jsxs4(
     "ul",
     {
       role: "group",
       "aria-labelledby": `${id}-group-${groupIndex}`,
       className: "mobius-combobox__group",
       children: [
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx8(
           "li",
           {
             role: "presentation",
@@ -1131,13 +802,14 @@ var Listbox = ({
             children: option.heading
           }
         ),
-        option.options.map((groupOption, index) => /* @__PURE__ */ jsx13(
+        option.options.map((groupOption, index) => /* @__PURE__ */ jsx8(
           Option,
           {
             option: groupOption,
             isHighlighted: highlightedIndex === index && highlightedGroupIndex === groupIndex,
             onOptionSelect,
             optionComponent,
+            optionTestIdPrefix,
             id: getOptionId(groupOption, groupIndex, index)
           },
           getOptionKey(groupOption, index, groupIndex)
@@ -1145,13 +817,14 @@ var Listbox = ({
       ]
     },
     option.heading
-  )) : typeof options !== "undefined" ? options.map((option, index) => /* @__PURE__ */ jsx13(
+  )) : typeof options !== "undefined" ? options.map((option, index) => /* @__PURE__ */ jsx8(
     Option,
     {
       option,
       isHighlighted: highlightedIndex === index,
       onOptionSelect,
       optionComponent,
+      optionTestIdPrefix,
       id: getOptionId(option, 0, index)
     },
     getOptionKey(option, index)
@@ -1260,7 +933,7 @@ function useComboboxOptions({
     options ? 0 : delay
   );
   const [isLoading, setIsLoading] = useState7(false);
-  const [error3, setError] = useState7(null);
+  const [error2, setError] = useState7(null);
   useEffect5(() => {
     const controller = new AbortController();
     const { signal } = controller;
@@ -1315,13 +988,13 @@ function useComboboxOptions({
     filteredOptions,
     updateFilteredOptions,
     isLoading,
-    error: error3,
-    isError: error3 != null
+    error: error2,
+    isError: error2 != null
   };
 }
 
 // src/components/Combobox/Combobox.tsx
-import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var ComboboxInner = ({
   ref,
   ...props
@@ -1343,15 +1016,16 @@ var ComboboxInner = ({
     onChange,
     // onSearched, // unused prop, consider removing
     optionComponent,
+    optionTestIdPrefix,
     errorMessage,
     ...otherProps
   } = props;
-  const skipNextDebounceRef = useRef4(false);
-  const fallbackRef = useRef4(null);
+  const skipNextDebounceRef = useRef3(false);
+  const fallbackRef = useRef3(null);
   const [inputValue, setInputValue] = useState8(defaultValue || "");
   const [isOpen, setIsOpen] = useState8(false);
   const [isChanging, setIsChanging] = useState8(false);
-  const { filteredOptions, updateFilteredOptions, isLoading, error: error3 } = useComboboxOptions({
+  const { filteredOptions, updateFilteredOptions, isLoading, error: error2 } = useComboboxOptions({
     options,
     asyncOptions,
     inputValue,
@@ -1359,6 +1033,9 @@ var ComboboxInner = ({
     minSearchLength,
     skipNextDebounceRef
   });
+  const [validationError, setValidationError] = useState8(
+    error2?.message || errorMessage
+  );
   const {
     highlightedIndex,
     highlightedGroupIndex,
@@ -1369,13 +1046,23 @@ var ComboboxInner = ({
     clearHighlight
   } = useComboboxHighlight(filteredOptions);
   const inputRef = ref || fallbackRef;
-  const listboxId = useId4();
-  const statusId = useId4();
-  const blurTimeoutRef = useRef4(null);
-  const userInteractedRef = useRef4(false);
-  const justSelectedRef = useRef4(false);
+  const listboxId = useId2();
+  const statusId = useId2();
+  const blurTimeoutRef = useRef3(null);
+  const userInteractedRef = useRef3(false);
+  const justSelectedRef = useRef3(false);
   const { down } = useBreakpoint();
   const isMobile = down("md");
+  useEffect6(() => {
+    setValidationError(error2?.message || errorMessage);
+  }, [error2, errorMessage]);
+  const getEmptyValue = () => {
+    const firstOption = filteredOptions ? isOptionGroup(filteredOptions) ? filteredOptions[0]?.options[0] : filteredOptions[0] : options ? isOptionGroup(options) ? options[0]?.options[0] : options[0] : void 0;
+    if (typeof firstOption === "string") {
+      return "";
+    }
+    return { label: "", value: "" };
+  };
   const handleFocus = (e) => {
     onFocus?.(e);
     if (!filteredOptions || filteredOptions.length === 0) return;
@@ -1415,6 +1102,7 @@ var ComboboxInner = ({
   const handleInputChange = (e) => {
     const newValue = e.target.value;
     setInputValue(newValue);
+    setValidationError(void 0);
     justSelectedRef.current = false;
     setIsChanging(true);
     if (!asyncOptions) {
@@ -1425,7 +1113,7 @@ var ComboboxInner = ({
   };
   const handleOptionSelect = (option) => {
     const val = getOptionValue(option);
-    if (!val) return;
+    if (!val && val !== "") return;
     if (typeof option === "object" && "callback" in option && option.callback && typeof option.callback === "function") {
       setTimeout(() => {
         if (inputRef && typeof inputRef !== "function" && inputRef.current) {
@@ -1438,6 +1126,7 @@ var ComboboxInner = ({
     skipNextDebounceRef.current = true;
     justSelectedRef.current = true;
     setIsChanging(false);
+    setValidationError(void 0);
     setIsOpen(false);
     setInputValue(val);
     onSelected?.(option);
@@ -1468,13 +1157,25 @@ var ComboboxInner = ({
   };
   const handleBlur = (e) => {
     if (!justSelectedRef.current) {
-      const typedText = inputValue.trim().toLowerCase();
+      const typedText = inputValue.trim();
+      const typedTextLower = typedText.toLowerCase();
       const highlightedOption = getHighlightedOption();
       const label = getOptionLabel(highlightedOption);
-      if (typedText === label?.toLowerCase()) {
+      if (typedTextLower === label?.toLowerCase()) {
         setTimeout(() => {
           handleOptionSelect(highlightedOption);
         }, 0);
+      } else if (typedText === "") {
+        setTimeout(() => {
+          handleOptionSelect(getEmptyValue());
+        }, 0);
+      } else {
+        setValidationError(
+          errorMessage || "Please select an option from the list"
+        );
+        setTimeout(() => {
+          setInputValue("");
+        }, 0);
       }
     }
     blurTimeoutRef.current = setTimeout(() => {
@@ -1537,7 +1238,7 @@ var ComboboxInner = ({
       setIsOpen(!!filteredOptions && filteredOptions.length > 0);
     }
   }, [filteredOptions, asyncOptions, isChanging]);
-  const classes = classNames14(
+  const classes = classNames8(
     "mobius mobius-combobox",
     {
       "mobius-combobox--is-expanded": isOpen,
@@ -1554,8 +1255,8 @@ var ComboboxInner = ({
     const count = isOptionGroup(filteredOptions) ? filteredOptions.reduce((sum, group) => sum + group.options.length, 0) : filteredOptions.length;
     return isOpen && isChanging ? `${count} option${count === 1 ? "" : "s"} available` : "";
   };
-  return /* @__PURE__ */ jsxs8("div", { id, "data-testid": "mobius-combobox__wrapper", className: classes, children: [
-    /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs5("div", { id, "data-testid": "mobius-combobox__wrapper", className: classes, children: [
+    /* @__PURE__ */ jsx9(
       VisuallyHidden,
       {
         role: "status",
@@ -1566,7 +1267,7 @@ var ComboboxInner = ({
         children: getStatusMessage()
       }
     ),
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx9(
       TextField,
       {
         ...otherProps,
@@ -1588,10 +1289,10 @@ var ComboboxInner = ({
         "aria-activedescendant": highlightedIndex === -1 ? void 0 : getHighlightedOptionId(),
         prefixInside: icon,
         ref: inputRef,
-        errorMessage: errorMessage || error3?.message || void 0
+        errorMessage: errorMessage || validationError || error2?.message
       }
     ),
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx9(
       Listbox,
       {
         id: listboxId,
@@ -1601,7 +1302,8 @@ var ComboboxInner = ({
         highlightedIndex,
         highlightedGroupIndex,
         onOptionSelect: handleOptionSelect,
-        optionComponent
+        optionComponent,
+        optionTestIdPrefix
       }
     )
   ] });
@@ -1614,7 +1316,7 @@ function isLoqateErrorResponse(response) {
 }
 
 // src/components/AddressLookup/AddressLookup.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function optionsFromResponse({ Items }, addressLookupService) {
   if (!Items || !Array.isArray(Items)) {
     throw Error("No address found");
@@ -1643,7 +1345,7 @@ var AddressLookup = ({
   errorMessage,
   ...otherProps
 }) => {
-  const [error3, _setError] = useState9(null);
+  const [error2, _setError] = useState9(null);
   const setError = useCallback4(
     (newError) => {
       if (newError != null) onError?.(newError);
@@ -1674,8 +1376,8 @@ var AddressLookup = ({
     }
     return addressLookupService.get(selected.id).then(onAddressSelected).catch(setError);
   };
-  const realErrorMessage = error3 && "An error occurred" || errorMessage;
-  return /* @__PURE__ */ jsx15(
+  const realErrorMessage = error2 && "An error occurred" || errorMessage;
+  return /* @__PURE__ */ jsx10(
     Combobox,
     {
       ...otherProps,
@@ -1683,7 +1385,7 @@ var AddressLookup = ({
       onSelected: handleSelected,
       asyncOptions,
       errorMessage: realErrorMessage,
-      icon: /* @__PURE__ */ jsx15(Icon, { icon: search })
+      icon: /* @__PURE__ */ jsx10(Icon, { icon: search })
     }
   );
 };
@@ -1778,9 +1480,9 @@ _countries = new WeakMap();
 _filters = new WeakMap();
 
 // src/components/Alert/Alert.tsx
-import { circleInfo, circleTick, error as error2, warning } from "@simplybusiness/icons";
-import classNames15 from "classnames/dedupe";
-import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+import { circleInfo, circleTick, error, warning } from "@simplybusiness/icons";
+import classNames9 from "classnames/dedupe";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 function isAlertVariant(value) {
   return value === "info" || value === "success" || value === "warning" || value === "error";
 }
@@ -1796,7 +1498,7 @@ var Alert = ({ ref, ...props }) => {
   if (!show) return null;
   const variant = variantProp && isAlertVariant(variantProp) ? variantProp : "info";
   const colorValue = variant === "success" ? `var(--color-valid)` : `var(--color-${variant})`;
-  const classes = classNames15(
+  const classes = classNames9(
     "mobius",
     "mobius-alert",
     {
@@ -1812,24 +1514,24 @@ var Alert = ({ ref, ...props }) => {
     info: circleInfo,
     success: circleTick,
     warning,
-    error: error2
+    error
   };
-  const headerClasses = classNames15("mobius", "mobius-alert__header");
-  const iconClasses = classNames15("mobius", "mobius-alert__icon");
-  const contentClasses = classNames15("mobius", "mobius-alert__content");
-  return /* @__PURE__ */ jsxs9(Element, { ref, role: "alert", ...otherProps, className: classes, children: [
-    /* @__PURE__ */ jsx16("span", { className: iconClasses, children: /* @__PURE__ */ jsx16(Icon, { icon: icon[variant], color: colorValue }) }),
-    /* @__PURE__ */ jsxs9("div", { children: [
-      header && /* @__PURE__ */ jsx16("p", { className: headerClasses, children: header }),
-      /* @__PURE__ */ jsx16("div", { className: contentClasses, children })
+  const headerClasses = classNames9("mobius", "mobius-alert__header");
+  const iconClasses = classNames9("mobius", "mobius-alert__icon");
+  const contentClasses = classNames9("mobius", "mobius-alert__content");
+  return /* @__PURE__ */ jsxs6(Element, { ref, role: "alert", ...otherProps, className: classes, children: [
+    /* @__PURE__ */ jsx11("span", { className: iconClasses, children: /* @__PURE__ */ jsx11(Icon, { icon: icon[variant], color: colorValue }) }),
+    /* @__PURE__ */ jsxs6("div", { children: [
+      header && /* @__PURE__ */ jsx11("p", { className: headerClasses, children: header }),
+      /* @__PURE__ */ jsx11("div", { className: contentClasses, children })
     ] })
   ] });
 };
 Alert.displayName = "Alert";
 
 // src/components/Box/Box.tsx
-import classNames16 from "classnames/dedupe";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import classNames10 from "classnames/dedupe";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var Box = ({ ref, ...props }) => {
   const {
     elementType: Element = "div",
@@ -1855,7 +1557,7 @@ var Box = ({ ref, ...props }) => {
     style,
     ...otherProps
   } = props;
-  const classes = classNames16("mobius", "mobius-box", otherProps.className);
+  const classes = classNames10("mobius", "mobius-box", otherProps.className);
   const styleProps = filterUndefinedProps({
     padding: getSpacingValue(padding),
     paddingInline: getSpacingValue(paddingInline || paddingX),
@@ -1872,26 +1574,26 @@ var Box = ({ ref, ...props }) => {
     height,
     ...style
   });
-  return /* @__PURE__ */ jsx17(Element, { ref, style: styleProps, ...otherProps, className: classes });
+  return /* @__PURE__ */ jsx12(Element, { ref, style: styleProps, ...otherProps, className: classes });
 };
 Box.displayName = "Box";
 
 // src/components/Breadcrumbs/Breadcrumbs.tsx
-import { Children, cloneElement as cloneElement2 } from "react";
-import classNames17 from "classnames/dedupe";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { Children, cloneElement } from "react";
+import classNames11 from "classnames/dedupe";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var Breadcrumbs = ({ ref, ...props }) => {
   const { "aria-label": ariaLabel = "Breadcrumbs" } = props;
   const { navProps } = { navProps: { "aria-label": ariaLabel } };
   const { children, ...otherProps } = props;
   const childArray = Children.toArray(children);
-  const classes = classNames17(
+  const classes = classNames11(
     "mobius",
     "mobius-breadcrumb",
     otherProps.className
   );
-  return /* @__PURE__ */ jsx18("nav", { ref, ...otherProps, ...navProps, className: classes, children: /* @__PURE__ */ jsx18("ul", { children: childArray.map(
-    (child, i) => cloneElement2(
+  return /* @__PURE__ */ jsx13("nav", { ref, ...otherProps, ...navProps, className: classes, children: /* @__PURE__ */ jsx13("ul", { children: childArray.map(
+    (child, i) => cloneElement(
       child,
       {
         key: i,
@@ -1903,16 +1605,16 @@ var Breadcrumbs = ({ ref, ...props }) => {
 Breadcrumbs.displayName = "Breadcrumbs";
 
 // src/components/Breadcrumbs/BreadcrumbItem.tsx
-import { cloneElement as cloneElement3, Children as Children2 } from "react";
-import classNames18 from "classnames/dedupe";
-import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
+import { cloneElement as cloneElement2, Children as Children2 } from "react";
+import classNames12 from "classnames/dedupe";
+import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
 var BreadcrumbItem = ({ ref, ...props }) => {
   const {
     isDisabled = false,
     isCurrent = false,
     "aria-current": ariaCurrent = "page",
     children,
-    separator = /* @__PURE__ */ jsx19(Box, { className: "mobius-breadcrumb__separator", "aria-hidden": "true", children: ">" }),
+    separator = /* @__PURE__ */ jsx14(Box, { className: "mobius-breadcrumb__separator", "aria-hidden": "true", children: ">" }),
     ...otherProps
   } = props;
   const { itemProps } = {
@@ -1922,14 +1624,14 @@ var BreadcrumbItem = ({ ref, ...props }) => {
       ...otherProps
     }
   };
-  const classes = classNames18(
+  const classes = classNames12(
     "mobius",
     "mobius-breadcrumb__item",
     props.className
   );
-  const child = typeof children === "string" ? /* @__PURE__ */ jsx19("span", { ...itemProps, children }) : Children2.only(children);
-  return /* @__PURE__ */ jsxs10("li", { className: classes, children: [
-    cloneElement3(child, {
+  const child = typeof children === "string" ? /* @__PURE__ */ jsx14("span", { ...itemProps, children }) : Children2.only(children);
+  return /* @__PURE__ */ jsxs7("li", { className: classes, children: [
+    cloneElement2(child, {
       ...child.props,
       ...itemProps,
       ref
@@ -1940,30 +1642,30 @@ var BreadcrumbItem = ({ ref, ...props }) => {
 BreadcrumbItem.displayName = "BreadcrumbItem";
 
 // src/components/Button/Button.tsx
-import classNames19 from "classnames/dedupe";
+import classNames13 from "classnames/dedupe";
 
 // src/components/Button/Loading.tsx
 import { loading } from "@simplybusiness/icons";
-import { Fragment as Fragment2, jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
 var Loading = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ jsxs11(Fragment2, { children: [
-    /* @__PURE__ */ jsx20("div", { className: "mobius-button__icon-wrapper", children: /* @__PURE__ */ jsx20(Icon, { icon: loading, spin: true, size: "md" }) }),
-    /* @__PURE__ */ jsx20(VisuallyHidden, { className: "mobius-button__loading-text", children: "Loading" }),
+  return /* @__PURE__ */ jsxs8(Fragment2, { children: [
+    /* @__PURE__ */ jsx15("div", { className: "mobius-button__icon-wrapper", children: /* @__PURE__ */ jsx15(Icon, { icon: loading, spin: true, size: "md" }) }),
+    /* @__PURE__ */ jsx15(VisuallyHidden, { className: "mobius-button__loading-text", children: "Loading" }),
     children
   ] });
 };
 
 // src/components/Button/Success.tsx
 import { tick } from "@simplybusiness/icons";
-import { Fragment as Fragment3, jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
-var Success = () => /* @__PURE__ */ jsxs12(Fragment3, { children: [
-  /* @__PURE__ */ jsx21("div", { className: "mobius-button__icon-wrapper", children: /* @__PURE__ */ jsx21(Icon, { icon: tick, size: "md" }) }),
-  /* @__PURE__ */ jsx21(VisuallyHidden, { className: "mobius-button__success-text", children: "Success" })
+import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+var Success = () => /* @__PURE__ */ jsxs9(Fragment3, { children: [
+  /* @__PURE__ */ jsx16("div", { className: "mobius-button__icon-wrapper", children: /* @__PURE__ */ jsx16(Icon, { icon: tick, size: "md" }) }),
+  /* @__PURE__ */ jsx16(VisuallyHidden, { className: "mobius-button__success-text", children: "Success" })
 ] });
 
 // src/components/Button/Button.tsx
-import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
 var Button = ({ ref, ...props }) => {
   const {
     children,
@@ -1978,7 +1680,7 @@ var Button = ({ ref, ...props }) => {
     ...otherProps
   } = props;
   const { buttonProps } = useButton(props);
-  otherProps.className = classNames19(
+  otherProps.className = classNames13(
     "mobius",
     "mobius-button",
     `--variant-${variant}`,
@@ -1990,18 +1692,18 @@ var Button = ({ ref, ...props }) => {
     },
     otherProps.className
   );
-  return /* @__PURE__ */ jsxs13(Component, { ref, ...buttonProps, ...otherProps, children: [
-    isLoading ? /* @__PURE__ */ jsx22(Loading, { children }) : children,
-    isSuccess && !isLoading && /* @__PURE__ */ jsx22(Success, {})
+  return /* @__PURE__ */ jsxs10(Component, { ref, ...buttonProps, ...otherProps, children: [
+    isLoading ? /* @__PURE__ */ jsx17(Loading, { children }) : children,
+    isSuccess && !isLoading && /* @__PURE__ */ jsx17(Success, {})
   ] });
 };
 Button.displayName = "Button";
 
 // src/components/Checkbox/Checkbox.tsx
-import { useRef as useRef5, useId as useId5, useState as useState10, useEffect as useEffect7 } from "react";
-import classNames20 from "classnames/dedupe";
+import { useRef as useRef4, useId as useId3, useState as useState10, useEffect as useEffect7 } from "react";
+import classNames14 from "classnames/dedupe";
 import { squareTick, square } from "@simplybusiness/icons";
-import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
 var Checkbox = ({ ref, ...props }) => {
   const {
     id,
@@ -2022,9 +1724,9 @@ var Checkbox = ({ ref, ...props }) => {
     ...rest
   } = props;
   const [checked, setChecked] = useState10(defaultSelected);
-  const fallbackRef = useRef5(null);
+  const fallbackRef = useRef4(null);
   const refObj = ref || fallbackRef;
-  const inputId = useId5();
+  const inputId = useId3();
   const isControlled = typeof selected === "boolean";
   useEffect7(() => {
     if (isControlled) {
@@ -2032,7 +1734,7 @@ var Checkbox = ({ ref, ...props }) => {
     }
   }, [selected, isControlled]);
   const validationClasses = useValidationClasses({ isInvalid });
-  const sharedClasses = classNames20(
+  const sharedClasses = classNames14(
     {
       "--is-disabled": isDisabled,
       "--is-selected": checked,
@@ -2041,31 +1743,31 @@ var Checkbox = ({ ref, ...props }) => {
     },
     validationClasses
   );
-  const wrapperClasses = classNames20(
+  const wrapperClasses = classNames14(
     "mobius",
     "mobius-checkbox",
     sharedClasses,
     className
   );
-  const labelClasses = classNames20("mobius-checkbox__label", sharedClasses);
-  const inputClasses = classNames20("mobius-checkbox__input", sharedClasses);
-  const iconClasses = classNames20("mobius-checkbox__icon", sharedClasses);
-  const errorMessageId = useId5();
+  const labelClasses = classNames14("mobius-checkbox__label", sharedClasses);
+  const inputClasses = classNames14("mobius-checkbox__input", sharedClasses);
+  const iconClasses = classNames14("mobius-checkbox__icon", sharedClasses);
+  const errorMessageId = useId3();
   const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
   const describedBy = spaceDelimitedList([
     shouldErrorMessageShow,
     ariaDescribedBy
   ]);
-  const labelId = useId5();
+  const labelId = useId3();
   const handleChange = (event) => {
     setChecked(!checked);
     if (onChange) {
       onChange(event, isLastItem);
     }
   };
-  return /* @__PURE__ */ jsxs14(Stack, { gap: "xs", className: wrapperClasses, children: [
-    /* @__PURE__ */ jsxs14("label", { className: labelClasses, children: [
-      /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsxs11(Stack, { gap: "xs", className: wrapperClasses, children: [
+    /* @__PURE__ */ jsxs11("label", { className: labelClasses, children: [
+      /* @__PURE__ */ jsx18(
         "input",
         {
           "aria-describedby": describedBy,
@@ -2086,7 +1788,7 @@ var Checkbox = ({ ref, ...props }) => {
           ...rest
         }
       ),
-      /* @__PURE__ */ jsx23(
+      /* @__PURE__ */ jsx18(
         Icon,
         {
           icon: checked ? squareTick : square,
@@ -2094,25 +1796,25 @@ var Checkbox = ({ ref, ...props }) => {
           className: iconClasses
         }
       ),
-      /* @__PURE__ */ jsx23("span", { id: labelId, className: "mobius-checkbox__visible-label", children: label })
+      /* @__PURE__ */ jsx18("span", { id: labelId, className: "mobius-checkbox__visible-label", children: label })
     ] }),
-    /* @__PURE__ */ jsx23(ErrorMessage, { id: errorMessageId, errorMessage })
+    /* @__PURE__ */ jsx18(ErrorMessage, { id: errorMessageId, errorMessage })
   ] });
 };
 Checkbox.displayName = "Checkbox";
 
 // src/components/Checkbox/CheckboxGroup.tsx
-import classNames21 from "classnames/dedupe";
+import classNames15 from "classnames/dedupe";
 import {
   Children as Children3,
-  cloneElement as cloneElement4,
+  cloneElement as cloneElement3,
   isValidElement,
   useEffect as useEffect8,
-  useId as useId6,
-  useRef as useRef6,
+  useId as useId4,
+  useRef as useRef5,
   useState as useState11
 } from "react";
-import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
 var CheckboxGroup = ({ ref, ...props }) => {
   const {
     label,
@@ -2131,8 +1833,8 @@ var CheckboxGroup = ({ ref, ...props }) => {
     ...rest
   } = props;
   const [selected, setSelected] = useState11(defaultValue);
-  const isInitializedRef = useRef6(false);
-  const prevDefaultValueRef = useRef6(defaultValue);
+  const isInitializedRef = useRef5(false);
+  const prevDefaultValueRef = useRef5(defaultValue);
   useEffect8(() => {
     const hasChanged = defaultValue.length !== prevDefaultValueRef.current.length || defaultValue.some(
       (val, index) => val !== prevDefaultValueRef.current[index]
@@ -2143,7 +1845,7 @@ var CheckboxGroup = ({ ref, ...props }) => {
       isInitializedRef.current = true;
     }
   }, [defaultValue]);
-  const checkboxGroupClasses = classNames21(
+  const checkboxGroupClasses = classNames15(
     "mobius",
     "mobius-checkbox-group",
     className,
@@ -2155,19 +1857,19 @@ var CheckboxGroup = ({ ref, ...props }) => {
     }
   );
   const validationClasses = useValidationClasses({ isInvalid });
-  const labelClasses = classNames21(
+  const labelClasses = classNames15(
     {
       "--is-disabled": isDisabled
     },
     validationClasses
   );
-  const errorMessageId = useId6();
+  const errorMessageId = useId4();
   const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
   const describedBy = spaceDelimitedList([
     shouldErrorMessageShow,
     props["aria-describedby"]
   ]);
-  const labelId = useId6();
+  const labelId = useId4();
   const handleChange = (event, isLastItem = false) => {
     const {
       target: { value, checked }
@@ -2190,7 +1892,7 @@ var CheckboxGroup = ({ ref, ...props }) => {
     (child) => isValidElement(child) && child.type === Checkbox
   ).pop();
   const lastCheckboxIsChecked = lastCheckbox && selected.includes(lastCheckbox.props.value);
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs12(
     "div",
     {
       ...rest,
@@ -2202,13 +1904,13 @@ var CheckboxGroup = ({ ref, ...props }) => {
         "--checkbox-items-per-row": itemsPerRow || Children3.count(children)
       },
       children: [
-        label && /* @__PURE__ */ jsx24(Label, { elementType: "span", id: labelId, className: labelClasses, children: label }),
-        /* @__PURE__ */ jsx24("div", { className: "mobius-checkbox-group__wrapper", children: childrenArray.map((child) => {
+        label && /* @__PURE__ */ jsx19(Label, { elementType: "span", id: labelId, className: labelClasses, children: label }),
+        /* @__PURE__ */ jsx19("div", { className: "mobius-checkbox-group__wrapper", children: childrenArray.map((child) => {
           if (isValidElement(child)) {
             const isLastItem = child === lastCheckbox;
             const isChildDisabled = isDisabled || lastItemDisables && lastCheckboxIsChecked && !isLastItem;
             const childProps = child.props;
-            return cloneElement4(
+            return cloneElement3(
               child,
               {
                 isDisabled: isChildDisabled,
@@ -2224,7 +1926,7 @@ var CheckboxGroup = ({ ref, ...props }) => {
           }
           return child;
         }) }),
-        errorMessage && /* @__PURE__ */ jsx24(ErrorMessage, { id: errorMessageId, errorMessage })
+        errorMessage && /* @__PURE__ */ jsx19(ErrorMessage, { id: errorMessageId, errorMessage })
       ]
     }
   );
@@ -2232,23 +1934,23 @@ var CheckboxGroup = ({ ref, ...props }) => {
 CheckboxGroup.displayName = "CheckboxGroup";
 
 // src/components/Container/Container.tsx
-import classNames22 from "classnames/dedupe";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import classNames16 from "classnames/dedupe";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var Container = ({ ref, ...props }) => {
   const { elementType: Element = "div", size = "md", ...otherProps } = props;
-  const classes = classNames22(
+  const classes = classNames16(
     "mobius",
     "mobius-container",
     sizeClasses(size),
     otherProps.className
   );
-  return /* @__PURE__ */ jsx25(Element, { ref, ...otherProps, className: classes });
+  return /* @__PURE__ */ jsx20(Element, { ref, ...otherProps, className: classes });
 };
 Container.displayName = "Container";
 
 // src/components/DateField/DateField.tsx
-import classNames23 from "classnames/dedupe";
-import { useEffect as useEffect9, useRef as useRef7, useState as useState12 } from "react";
+import classNames17 from "classnames/dedupe";
+import { useEffect as useEffect9, useRef as useRef6, useState as useState12 } from "react";
 
 // src/components/DateField/validation.ts
 var convertToDateFormat = (date, format) => {
@@ -2283,7 +1985,7 @@ var isValidDate = (date, format = "yyyy-mm-dd") => {
 };
 
 // src/components/DateField/DateField.tsx
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var MIN_MAX_ERROR = '"min" value should not be greater than "max" value.';
 var DateField = ({ ref, ...props }) => {
   const {
@@ -2296,16 +1998,16 @@ var DateField = ({ ref, ...props }) => {
     value,
     ...otherProps
   } = props;
-  const [error3, setError] = useState12(errorMessage);
+  const [error2, setError] = useState12(errorMessage);
   const [isInvalid, setIsInvalid] = useState12(void 0);
-  const localRef = useRef7(null);
-  const classes = classNames23("mobius-date-field", className);
+  const localRef = useRef6(null);
+  const classes = classNames17("mobius-date-field", className);
   const formattedMin = min ? convertToDateFormat(min, format) : void 0;
   const formattedMax = max ? convertToDateFormat(max, format) : void 0;
   const formattedDefaultValue = defaultValue ? convertToDateFormat(defaultValue, format) : void 0;
   const formattedValue = value ? convertToDateFormat(value, format) : void 0;
-  const setInvalidState = (error4) => {
-    setError(error4);
+  const setInvalidState = (error3) => {
+    setError(error3);
     setIsInvalid(true);
   };
   const setValidState = () => {
@@ -2345,7 +2047,7 @@ var DateField = ({ ref, ...props }) => {
     validate();
     otherProps.onBlur?.(event);
   };
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx21(
     TextField,
     {
       ref: mergeRefs([localRef, ref]),
@@ -2353,7 +2055,7 @@ var DateField = ({ ref, ...props }) => {
       type: "date",
       min: formattedMin,
       max: formattedMax,
-      errorMessage: errorMessage ?? error3,
+      errorMessage: errorMessage ?? error2,
       isInvalid,
       defaultValue: formattedDefaultValue,
       value: formattedValue,
@@ -2365,13 +2067,13 @@ var DateField = ({ ref, ...props }) => {
 DateField.displayName = "DateField";
 
 // src/components/Drawer/Content.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
-var Content = ({ ref, children, ...otherProps }) => /* @__PURE__ */ jsx27("div", { ref, ...otherProps, className: "mobius-drawer__content", children });
+import { jsx as jsx22 } from "react/jsx-runtime";
+var Content = ({ ref, children, ...otherProps }) => /* @__PURE__ */ jsx22("div", { ref, ...otherProps, className: "mobius-drawer__content", children });
 Content.displayName = "Content";
 
 // src/components/Drawer/Drawer.tsx
-import classNames24 from "classnames/dedupe";
-import { useEffect as useEffect10, useId as useId7, useMemo as useMemo2, useRef as useRef8, useState as useState13 } from "react";
+import classNames18 from "classnames/dedupe";
+import { useEffect as useEffect10, useId as useId5, useMemo as useMemo2, useRef as useRef7, useState as useState13 } from "react";
 
 // src/components/Drawer/DrawerContext.tsx
 import { createContext } from "react";
@@ -2383,7 +2085,7 @@ var DrawerContext = createContext({
 });
 
 // src/components/Drawer/Drawer.tsx
-import { jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
 var TRANSITION_CSS_VARIABLE = "--drawer-transition-duration";
 var Drawer = ({ ref, ...props }) => {
   const {
@@ -2396,7 +2098,7 @@ var Drawer = ({ ref, ...props }) => {
     onClose,
     children
   } = props;
-  const dialogRef = useRef8(null);
+  const dialogRef = useRef7(null);
   const [shouldTransition, setShouldTransition] = useState13(false);
   const { close } = useDialog({
     ref: dialogRef,
@@ -2408,9 +2110,9 @@ var Drawer = ({ ref, ...props }) => {
       CSSVariable: TRANSITION_CSS_VARIABLE
     }
   });
-  const hiddenId = `dialog-screen-reader-announce-${useId7()}`;
-  const headerId = `dialog-header-${useId7()}`;
-  const dialogClasses = classNames24(
+  const hiddenId = `dialog-screen-reader-announce-${useId5()}`;
+  const headerId = `dialog-header-${useId5()}`;
+  const dialogClasses = classNames18(
     "mobius",
     "mobius-drawer",
     `--${direction}`,
@@ -2430,18 +2132,18 @@ var Drawer = ({ ref, ...props }) => {
     }),
     [close, closeLabel, headerId]
   );
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs13(
     "dialog",
     {
-      id: useId7(),
+      id: useId5(),
       ref: mergeRefs([dialogRef, ref]),
       onCancel: close,
       className: dialogClasses,
       "aria-describedby": hiddenId,
       "aria-labelledby": headerId,
       children: [
-        /* @__PURE__ */ jsx28(VisuallyHidden, { children: /* @__PURE__ */ jsx28("div", { id: hiddenId, children: announce }) }),
-        /* @__PURE__ */ jsx28(DrawerContext.Provider, { value: contextValue, children })
+        /* @__PURE__ */ jsx23(VisuallyHidden, { children: /* @__PURE__ */ jsx23("div", { id: hiddenId, children: announce }) }),
+        /* @__PURE__ */ jsx23(DrawerContext.Provider, { value: contextValue, children })
       ]
     }
   );
@@ -2457,12 +2159,12 @@ var useDrawer = () => {
 
 // src/components/Drawer/Header.tsx
 import { cross } from "@simplybusiness/icons";
-import { jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
 var Header = ({ ref, children, ...otherProps }) => {
   const { onClose, closeLabel, headerId } = useDrawer();
-  return /* @__PURE__ */ jsxs17("header", { ref, ...otherProps, className: "mobius-drawer__header", children: [
-    /* @__PURE__ */ jsx29("h2", { id: headerId, children }),
-    /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs14("header", { ref, ...otherProps, className: "mobius-drawer__header", children: [
+    /* @__PURE__ */ jsx24("h2", { id: headerId, children }),
+    /* @__PURE__ */ jsxs14(
       Button,
       {
         "aria-label": "Close",
@@ -2471,7 +2173,7 @@ var Header = ({ ref, children, ...otherProps }) => {
         className: "mobius-drawer__close",
         size: "sm",
         children: [
-          /* @__PURE__ */ jsx29(Icon, { icon: cross }),
+          /* @__PURE__ */ jsx24(Icon, { icon: cross }),
           " ",
           closeLabel
         ]
@@ -2489,10 +2191,10 @@ var Drawer2 = Object.assign(Drawer, {
 Drawer2.displayName = "Drawer";
 
 // src/components/DropdownMenu/DropdownMenu.tsx
-import { Children as Children4, isValidElement as isValidElement2, cloneElement as cloneElement5, useState as useState14 } from "react";
+import { Children as Children4, isValidElement as isValidElement2, cloneElement as cloneElement4, useState as useState14 } from "react";
 import useDropdownMenu from "react-accessible-dropdown-menu-hook";
-import classNames25 from "classnames/dedupe";
-import { jsx as jsx30, jsxs as jsxs18 } from "react/jsx-runtime";
+import classNames19 from "classnames/dedupe";
+import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
 var DropdownMenu = ({ ref, ...props }) => {
   const {
     elementType: Element = "nav",
@@ -2509,13 +2211,13 @@ var DropdownMenu = ({ ref, ...props }) => {
     isOpen: open,
     setIsOpen
   } = useDropdownMenu(numberOfItems);
-  const classes = classNames25(
+  const classes = classNames19(
     "mobius",
     "mobius-dropdown-menu",
     otherProps.className
   );
-  const triggerClasses = classNames25("mobius", "mobius-dropdown-menu__trigger");
-  const listClasses = classNames25("mobius", "mobius-dropdown-menu__list", {
+  const triggerClasses = classNames19("mobius", "mobius-dropdown-menu__trigger");
+  const listClasses = classNames19("mobius", "mobius-dropdown-menu__list", {
     "--is-open": open
   });
   const handleChildClick = ({ onClick }, index) => {
@@ -2525,16 +2227,16 @@ var DropdownMenu = ({ ref, ...props }) => {
       onClick();
     }
   };
-  return /* @__PURE__ */ jsxs18(Element, { ref, ...otherProps, className: classes, children: [
-    trigger ? cloneElement5(trigger, {
+  return /* @__PURE__ */ jsxs15(Element, { ref, ...otherProps, className: classes, children: [
+    trigger ? cloneElement4(trigger, {
       className: triggerClasses,
       open,
       label,
       ...buttonProps
-    }) : /* @__PURE__ */ jsx30(Button, { className: triggerClasses, ...buttonProps, children: label }),
-    /* @__PURE__ */ jsx30("ul", { className: listClasses, role: "menu", children: Children4.map(children, (child, index) => {
+    }) : /* @__PURE__ */ jsx25(Button, { className: triggerClasses, ...buttonProps, children: label }),
+    /* @__PURE__ */ jsx25("ul", { className: listClasses, role: "menu", children: Children4.map(children, (child, index) => {
       if (isValidElement2(child)) {
-        return cloneElement5(child, {
+        return cloneElement4(child, {
           onClick: () => handleChildClick(child.props, index),
           active: index === activeId,
           ...itemProps[index]
@@ -2547,9 +2249,9 @@ var DropdownMenu = ({ ref, ...props }) => {
 DropdownMenu.displayName = "DropdownMenu";
 
 // src/components/DropdownMenu/Item.tsx
-import { cloneElement as cloneElement6, isValidElement as isValidElement3, Children as Children5 } from "react";
-import classNames26 from "classnames/dedupe";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { cloneElement as cloneElement5, isValidElement as isValidElement3, Children as Children5 } from "react";
+import classNames20 from "classnames/dedupe";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var Item = ({ ref, ...props }) => {
   const {
     elementType: Element = "li",
@@ -2558,26 +2260,26 @@ var Item = ({ ref, ...props }) => {
     children,
     ...otherProps
   } = props;
-  const classes = classNames26(
+  const classes = classNames20(
     "mobius",
     "mobius-dropdown-menu__item",
     { "--is-active": active },
     otherProps.className
   );
-  return /* @__PURE__ */ jsx31(Element, { ref, onClick, ...otherProps, children: Children5.map(children, (child) => {
+  return /* @__PURE__ */ jsx26(Element, { ref, onClick, ...otherProps, children: Children5.map(children, (child) => {
     if (isValidElement3(child)) {
-      const childClasses = classNames26(
+      const childClasses = classNames20(
         child.props.className,
         classes
       );
-      return cloneElement6(
+      return cloneElement5(
         child,
         {
           className: childClasses
         }
       );
     }
-    return /* @__PURE__ */ jsx31("span", { className: classes, children: child });
+    return /* @__PURE__ */ jsx26("span", { className: classes, children: child });
   }) });
 };
 Item.displayName = "DropdownMenu.Item";
@@ -2592,16 +2294,16 @@ var DropdownMenu2 = Object.assign(
 DropdownMenu2.displayName = "DropdownMenu";
 
 // src/components/Fieldset/Fieldset.tsx
-import classNames27 from "classnames/dedupe";
-import { cloneElement as cloneElement7, useId as useId8 } from "react";
-import { jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
+import classNames21 from "classnames/dedupe";
+import { cloneElement as cloneElement6, useId as useId6 } from "react";
+import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
 var useFieldset = (props) => {
   const { legend } = props;
   let legendProps = {};
   let containerProps = {
     role: "group"
   };
-  const legendId = useId8();
+  const legendId = useId6();
   if (legend) {
     legendProps = {
       ...legendProps,
@@ -2621,22 +2323,22 @@ var Fieldset = ({ ref: _ref, ...props }) => {
   const {
     children,
     legend,
-    legendComponent = /* @__PURE__ */ jsx32("legend", {}),
+    legendComponent = /* @__PURE__ */ jsx27("legend", {}),
     ...otherProps
   } = props;
   const { legendProps, containerProps } = useFieldset(props);
-  const classes = classNames27("mobius", "mobius-fieldset", props.className);
+  const classes = classNames21("mobius", "mobius-fieldset", props.className);
   legendProps.className = "mobius-fieldset__legend";
-  return /* @__PURE__ */ jsxs19(Flex, { ...containerProps, ...otherProps, className: classes, children: [
-    legend && cloneElement7(legendComponent, { ...legendProps }, [legend]),
+  return /* @__PURE__ */ jsxs16(Flex, { ...containerProps, ...otherProps, className: classes, children: [
+    legend && cloneElement6(legendComponent, { ...legendProps }, [legend]),
     children
   ] });
 };
 Fieldset.displayName = "Fieldset";
 
 // src/components/Grid/Grid.tsx
-import classNames28 from "classnames/dedupe";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import classNames22 from "classnames/dedupe";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var Grid = ({ ref: _ref, ...props }) => {
   const {
     columns = 12,
@@ -2651,7 +2353,7 @@ var Grid = ({ ref: _ref, ...props }) => {
     style,
     ...rest
   } = props;
-  const classes = classNames28("mobius", "mobius-grid", className);
+  const classes = classNames22("mobius", "mobius-grid", className);
   const styles = filterUndefinedProps({
     boxSizing: "border-box",
     display: "grid",
@@ -2665,14 +2367,14 @@ var Grid = ({ ref: _ref, ...props }) => {
     justifyItems,
     ...style
   });
-  return /* @__PURE__ */ jsx33("div", { style: styles, className: classes, ...rest });
+  return /* @__PURE__ */ jsx28("div", { style: styles, className: classes, ...rest });
 };
 Grid.displayName = "Grid";
 
 // src/components/Grid/Item.tsx
 import { useEffect as useEffect11, useState as useState15 } from "react";
-import classNames29 from "classnames/dedupe";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import classNames23 from "classnames/dedupe";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var getBreakpointMap = (config) => Object.entries(config).reduce(
   (prev, [key, value]) => {
     const previous = Object.values(prev);
@@ -2708,7 +2410,7 @@ var GridItem = ({ ref: _ref, ...props }) => {
     xxl
   });
   const [responsiveSpan, setResponsiveSpan] = useState15();
-  const classes = classNames29("mobius-grid__item", className);
+  const classes = classNames23("mobius-grid__item", className);
   useEffect11(() => {
     setResponsiveSpan(breakpointMap[breakpointSize]);
   }, [breakpointSize, breakpointMap]);
@@ -2717,7 +2419,7 @@ var GridItem = ({ ref: _ref, ...props }) => {
     alignSelf,
     justifySelf
   };
-  return /* @__PURE__ */ jsx34("div", { style: { ...styles }, className: classes, ...rest });
+  return /* @__PURE__ */ jsx29("div", { style: { ...styles }, className: classes, ...rest });
 };
 GridItem.displayName = "GridItem";
 
@@ -2728,22 +2430,22 @@ var Grid2 = Object.assign(Grid, {
 Grid2.displayName = "Grid";
 
 // src/components/Image/Image.tsx
-import classNames30 from "classnames/dedupe";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import classNames24 from "classnames/dedupe";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var Image = ({
   ref,
   alt,
   elementType: Component = "img",
   ...otherProps
 }) => {
-  const classes = classNames30("mobius", "mobius-image", otherProps.className);
-  return /* @__PURE__ */ jsx35(Component, { alt, ref, ...otherProps, className: classes });
+  const classes = classNames24("mobius", "mobius-image", otherProps.className);
+  return /* @__PURE__ */ jsx30(Component, { alt, ref, ...otherProps, className: classes });
 };
 Image.displayName = "Image";
 
 // src/components/Link/Link.tsx
-import classNames31 from "classnames/dedupe";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import classNames25 from "classnames/dedupe";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var Link = ({ ref, ...props }) => {
   const {
     isDisabled = false,
@@ -2757,7 +2459,7 @@ var Link = ({ ref, ...props }) => {
     pointerEvents: "none"
   };
   const styles = { ...style, ...isDisabled && disabledStyles };
-  const classes = classNames31(
+  const classes = classNames25(
     "mobius",
     "mobius-link",
     className,
@@ -2766,7 +2468,7 @@ var Link = ({ ref, ...props }) => {
       "--is-disabled": isDisabled
     }
   );
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx31(
     Component,
     {
       ref,
@@ -2781,8 +2483,8 @@ var Link = ({ ref, ...props }) => {
 Link.displayName = "Link";
 
 // src/components/LinkButton/LinkButton.tsx
-import classNames32 from "classnames/dedupe";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import classNames26 from "classnames/dedupe";
+import { jsx as jsx32 } from "react/jsx-runtime";
 function LinkButton({
   href,
   children,
@@ -2793,14 +2495,14 @@ function LinkButton({
   if (!href) {
     throw new Error("LinkButton requires a href prop");
   }
-  const classes = classNames32("mobius", "mobius-link-button", className);
-  return /* @__PURE__ */ jsx37(Button, { elementType, href, className: classes, ...rest, children });
+  const classes = classNames26("mobius", "mobius-link-button", className);
+  return /* @__PURE__ */ jsx32(Button, { elementType, href, className: classes, ...rest, children });
 }
 
 // src/components/List/List.tsx
-import { Children as Children6, cloneElement as cloneElement8, isValidElement as isValidElement4 } from "react";
-import classNames33 from "classnames/dedupe";
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { Children as Children6, cloneElement as cloneElement7, isValidElement as isValidElement4 } from "react";
+import classNames27 from "classnames/dedupe";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var List = ({ ref, ...props }) => {
   const Component = props.isOrdered ? "ol" : "ul";
   const { children, icon, ...otherProps } = props;
@@ -2809,7 +2511,7 @@ var List = ({ ref, ...props }) => {
     ...restProps,
     reversed: isReversed
   };
-  const classes = classNames33(
+  const classes = classNames27(
     "mobius",
     "mobius-list",
     {
@@ -2818,9 +2520,9 @@ var List = ({ ref, ...props }) => {
     },
     otherProps.className
   );
-  return /* @__PURE__ */ jsx38(Component, { ref, ...mappedProps, className: classes, children: Children6.map(children, (child) => {
+  return /* @__PURE__ */ jsx33(Component, { ref, ...mappedProps, className: classes, children: Children6.map(children, (child) => {
     if (isValidElement4(child)) {
-      return cloneElement8(child, {
+      return cloneElement7(child, {
         parentIcon: icon
       });
     }
@@ -2830,12 +2532,12 @@ var List = ({ ref, ...props }) => {
 List.displayName = "List";
 
 // src/components/List/ListItem.tsx
-import classNames34 from "classnames/dedupe";
-import { jsx as jsx39, jsxs as jsxs20 } from "react/jsx-runtime";
+import classNames28 from "classnames/dedupe";
+import { jsx as jsx34, jsxs as jsxs17 } from "react/jsx-runtime";
 var ListItem = ({ ref, ...props }) => {
   const { parentIcon, icon, children, ...otherProps } = props;
   const iconContent = icon || parentIcon;
-  const classes = classNames34(
+  const classes = classNames28(
     "mobius",
     "mobius-list__item",
     {
@@ -2843,40 +2545,40 @@ var ListItem = ({ ref, ...props }) => {
     },
     props.className
   );
-  const contentClasses = classNames34("mobius", "mobius-list__item-content");
-  const iconClasses = classNames34("mobius", "mobius-list__icon");
+  const contentClasses = classNames28("mobius", "mobius-list__item-content");
+  const iconClasses = classNames28("mobius", "mobius-list__icon");
   if (iconContent) {
-    return /* @__PURE__ */ jsx39("li", { ref, ...otherProps, className: classes, children: /* @__PURE__ */ jsxs20("span", { className: contentClasses, children: [
-      /* @__PURE__ */ jsx39("span", { className: iconClasses, children: iconContent }),
+    return /* @__PURE__ */ jsx34("li", { ref, ...otherProps, className: classes, children: /* @__PURE__ */ jsxs17("span", { className: contentClasses, children: [
+      /* @__PURE__ */ jsx34("span", { className: iconClasses, children: iconContent }),
       children
     ] }) });
   }
-  return /* @__PURE__ */ jsx39("li", { ref, ...otherProps, className: classes, children });
+  return /* @__PURE__ */ jsx34("li", { ref, ...otherProps, className: classes, children });
 };
 ListItem.displayName = "ListItem";
 
 // src/components/LoadingIndicator/LoadingIndicator.tsx
-import classNames35 from "classnames/dedupe";
+import classNames29 from "classnames/dedupe";
 import { loading as loading2 } from "@simplybusiness/icons";
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var LoadingIndicator = ({ ref, ...props }) => {
   const { icon = loading2, ...otherProps } = props;
-  const classes = classNames35(
+  const classes = classNames29(
     "mobius",
     "mobius-loading-indicator",
     otherProps.className
   );
-  return /* @__PURE__ */ jsx40(Icon, { icon, spin: true, ref, ...otherProps, className: classes });
+  return /* @__PURE__ */ jsx35(Icon, { icon, spin: true, ref, ...otherProps, className: classes });
 };
 LoadingIndicator.displayName = "LoadingIndicator";
 
 // src/components/Logo/Logo.tsx
-import classNames36 from "classnames/dedupe";
-import { jsx as jsx41, jsxs as jsxs21 } from "react/jsx-runtime";
+import classNames30 from "classnames/dedupe";
+import { jsx as jsx36, jsxs as jsxs18 } from "react/jsx-runtime";
 var Logo = ({ ref, ...props }) => {
   const { className, width, height, ...otherProps } = props;
-  const classes = classNames36("mobius", "mobius-logo", className);
-  return /* @__PURE__ */ jsxs21(
+  const classes = classNames30("mobius", "mobius-logo", className);
+  return /* @__PURE__ */ jsxs18(
     "svg",
     {
       width,
@@ -2886,7 +2588,7 @@ var Logo = ({ ref, ...props }) => {
       viewBox: "0 0 144 37",
       ...otherProps,
       children: [
-        /* @__PURE__ */ jsx41("defs", { children: /* @__PURE__ */ jsxs21(
+        /* @__PURE__ */ jsx36("defs", { children: /* @__PURE__ */ jsxs18(
           "linearGradient",
           {
             id: "logo-gradient",
@@ -2895,27 +2597,27 @@ var Logo = ({ ref, ...props }) => {
             y1: "76.042%",
             y2: "26.973%",
             children: [
-              /* @__PURE__ */ jsx41("stop", { stopColor: "#4632D8", offset: "0%" }),
-              /* @__PURE__ */ jsx41("stop", { stopColor: "#9084E8", offset: "100%" })
+              /* @__PURE__ */ jsx36("stop", { stopColor: "#4632D8", offset: "0%" }),
+              /* @__PURE__ */ jsx36("stop", { stopColor: "#9084E8", offset: "100%" })
             ]
           }
         ) }),
-        /* @__PURE__ */ jsxs21("g", { children: [
-          /* @__PURE__ */ jsx41(
+        /* @__PURE__ */ jsxs18("g", { children: [
+          /* @__PURE__ */ jsx36(
             "path",
             {
               fill: "#0E0A2B",
               d: "M68.788 11.307c0-2.486-2.027-3.345-3.833-4.1-1.332-.562-2.471-1.036-2.471-2.072 0-.873.77-1.42 1.968-1.42 1.051 0 1.806.444 2.294.725.193.103.474.222.755.133.192-.06.34-.207.459-.444l.34-.621c.266-.474.163-.888-.281-1.2-.533-.384-1.88-1.05-3.537-1.05-2.738 0-4.647 1.643-4.647 4.01 0 2.413 2.012 3.301 3.788 4.07 1.347.593 2.516 1.096 2.516 2.161 0 .873-.754 1.45-1.924 1.45-1.287 0-2.22-.65-2.678-.961l-.03-.015c-.533-.296-.903-.237-1.228.192l-.415.607c-.444.607-.148.992.134 1.228.828.637 2.427 1.392 4.203 1.392 2.708 0 4.587-1.673 4.587-4.085zm4.44 2.975V6.186c0-.577-.31-.888-.873-.888h-.843c-.563 0-.874.311-.874.888v8.096c0 .577.296.888.874.888h.843c.563 0 .873-.311.873-.888zM71.482 4.203h.755c.518 0 .814-.281.814-.8v-.517c0-.518-.296-.814-.814-.814h-.755c-.518 0-.8.281-.8.814v.518c.016.518.297.8.8.8zM92.645 24.48h.755c.518 0 .814-.282.814-.8v-.518c0-.518-.296-.814-.814-.814h-.755c-.518 0-.799.282-.799.814v.518c0 .518.281.8.8.8zm-6.26-19.42c-1.539 0-2.397.962-2.945 1.895-.444-1.243-1.435-1.895-2.871-1.895-1.362 0-2.146.888-2.723 1.806v-.68c0-.578-.311-.889-.873-.889h-.74c-.563 0-.873.311-.873.888v8.096c0 .577.295.888.873.888h.843c.577 0 .873-.311.873-.888V10.73c0-2.25.888-3.271 2.058-3.271 1.006 0 1.198.71 1.198 1.85v4.987c0 .578.311.888.888.888h.844c.577 0 .873-.31.873-.888v-3.551c0-2.25.873-3.271 2.013-3.271 1.036 0 1.243.74 1.243 1.85v4.987c0 .577.31.888.888.888h.814c.577 0 .888-.31.888-.888V8.835c0-2.5-1.095-3.774-3.27-3.774zm10.804 10.33c2.679 0 4.558-2.13 4.558-5.164 0-3.094-1.776-5.166-4.425-5.166-1.761 0-2.708 1.036-3.049 1.51v-.533c0-.459-.34-.755-.873-.755h-.607c-.562 0-.888.326-.888.888v11.9c0 .576.311.887.888.887h.814c.578 0 .888-.31.888-.888v-3.404c0-.207-.014-.4-.014-.532.325.429 1.184 1.258 2.708 1.258zm-2.768-5.105c0-1.362.622-2.975 2.368-2.975 1.377 0 2.309 1.184 2.309 2.945 0 1.746-.947 2.916-2.338 2.916-1.54 0-2.339-1.45-2.339-2.886zm12.965 4.07v-.652c0-.444-.252-.725-.681-.784-.34-.03-.68-.192-.68-1.066v-9.47c0-.563-.326-.888-.874-.888h-.843c-.563 0-.874.31-.874.888v9.679c0 1.258.34 2.16 1.021 2.678.637.489 1.466.533 2.013.533.607 0 .918-.325.918-.917zm9.457-9.073h-.962c-.518 0-.844.237-.977.726l-1.717 4.972c-.089.311-.192.71-.251.977-.074-.281-.193-.71-.296-1.021l-1.835-4.943c-.163-.489-.489-.71-.977-.71h-1.036c-.415 0-.622.162-.71.295-.09.134-.163.385.014.755l3.685 8.57-.34.813c-.252.592-.77 1.229-1.45 1.229-.267 0-.474-.09-.652-.163h-.014c-.43-.104-.755.074-.962.488l-.163.415c-.119.251-.148.517-.06.725.075.192.237.34.474.429.326.118.814.296 1.391.296 1.628 0 2.975-.977 3.597-2.605l3.996-10.226c.103-.296.088-.563-.045-.755-.163-.163-.4-.267-.71-.267zM67.634 28.297c.977-.592 1.54-1.658 1.54-2.886 0-2.176-1.688-3.567-4.293-3.567h-4.04c-.562 0-.873.311-.873.888v11.899c0 .577.296.888.873.888h4.1c1.346 0 2.5-.34 3.33-.962.932-.71 1.42-1.761 1.42-3.049.03-1.524-.784-2.767-2.057-3.211zm-5.017-.962v-3.212h2.25c1.02 0 1.628.592 1.628 1.584 0 .991-.607 1.643-1.57 1.643h-2.308v-.015zm4.396 4.01c0 1.155-.71 1.865-1.865 1.865h-2.53v-3.714h2.53c1.14.014 1.865.74 1.865 1.85zm12.638-5.712h-.814c-.577 0-.888.31-.888.888v3.655c0 2.176-1.361 3.182-2.634 3.182-1.006 0-1.406-.547-1.406-1.88v-4.942c0-.578-.31-.888-.888-.888h-.814c-.562 0-.888.325-.888.888v5.431c0 2.516 1.17 3.774 3.463 3.774a3.937 3.937 0 003.286-1.761v.651c0 .577.296.888.873.888h.74c.577 0 .888-.31.888-.888v-8.095c-.03-.578-.355-.903-.918-.903zm6.956 3.937c-.917-.311-1.702-.592-1.702-1.184 0-.74.77-.859 1.229-.859.784 0 1.406.281 1.805.474.548.237.947.118 1.184-.34l.193-.341c.251-.518.133-.947-.326-1.184-.326-.178-1.288-.71-2.753-.71-2.279 0-3.803 1.213-3.803 3.004 0 2.042 1.731 2.65 3.137 3.138.903.325 1.687.592 1.687 1.169 0 .547-.488.902-1.258.902-.917 0-1.613-.37-2.057-.621l-.059-.03c-.533-.28-.903-.207-1.213.222l-.222.34c-.178.252-.237.504-.178.726.044.207.192.37.4.488a5.774 5.774 0 003.285 1.007c2.235 0 3.789-1.273 3.789-3.079-.03-2.042-1.761-2.649-3.138-3.122zm6.897-3.937h-.844c-.562 0-.873.31-.873.888v8.095c0 .577.296.888.873.888h.844c.577 0 .873-.31.873-.888v-8.095c0-.563-.31-.888-.873-.888zm9.324-.237c-1.924 0-2.93 1.154-3.36 1.806v-.681c0-.577-.31-.888-.873-.888h-.74c-.563 0-.873.31-.873.888v8.095c0 .577.296.888.873.888h.843c.578 0 .874-.31.874-.888v-3.744c0-1.79 1.14-3.078 2.708-3.078 1.021 0 1.436.547 1.436 1.88v4.942c0 .577.31.888.887.888h.814c.578 0 .888-.31.888-.888v-5.431c0-2.516-1.169-3.789-3.477-3.789zm10.448 0c-2.96 0-5.032 2.131-5.032 5.165 0 2.99 2.235 5.165 5.313 5.165 1.48 0 2.635-.533 3.345-.977.444-.266.562-.695.296-1.198l-.222-.385c-.266-.459-.651-.563-1.184-.31h-.015a3.885 3.885 0 01-2.042.606c-1.54 0-2.634-.962-2.812-2.472h5.816a.935.935 0 00.933-.917c.014-2.827-1.717-4.677-4.396-4.677zm-.044 2.013c1.065 0 1.79.77 1.864 1.968h-4.1c.253-1.213 1.096-1.968 2.236-1.968zm10.152 2.16c-.917-.31-1.702-.591-1.702-1.183 0-.74.77-.859 1.229-.859.784 0 1.406.281 1.805.474.548.237.947.118 1.184-.34l.192-.341c.252-.518.134-.947-.325-1.184-.326-.178-1.288-.71-2.753-.71-2.279 0-3.803 1.213-3.803 3.004 0 2.042 1.731 2.65 3.137 3.138.903.325 1.687.592 1.687 1.169 0 .547-.488.902-1.258.902-.917 0-1.613-.37-2.057-.621l-.059-.03c-.533-.28-.903-.207-1.214.222l-.222.34c-.177.252-.236.504-.177.726.044.207.192.37.4.488a5.774 5.774 0 003.285 1.007c2.235 0 3.789-1.273 3.789-3.079-.015-2.042-1.747-2.649-3.138-3.122zm8.791 0c-.917-.31-1.702-.591-1.702-1.183 0-.74.77-.859 1.229-.859.784 0 1.406.281 1.805.474.548.237.947.118 1.184-.34l.192-.341c.252-.518.134-.947-.325-1.184-.326-.178-1.288-.71-2.753-.71-2.279 0-3.803 1.213-3.803 3.004 0 2.042 1.731 2.65 3.137 3.138.903.325 1.687.592 1.687 1.169 0 .547-.488.902-1.258.902-.917 0-1.613-.37-2.057-.621l-.059-.03c-.533-.28-.903-.207-1.214.222l-.222.34c-.177.252-.236.504-.177.726.044.207.192.37.4.488a5.774 5.774 0 003.285 1.007c2.235 0 3.789-1.273 3.789-3.079-.015-2.042-1.747-2.649-3.138-3.122z"
             }
           ),
-          /* @__PURE__ */ jsx41(
+          /* @__PURE__ */ jsx36(
             "path",
             {
               fill: "url(#logo-gradient)",
               d: "M22.747 22.288c.607 1.214.918 2.59.918 4.144 0 1.45-.267 2.827-.8 4.1a10.018 10.018 0 01-2.279 3.36c-.991.961-2.235 1.73-3.744 2.278-1.51.563-3.167.829-4.988.829-2.264 0-4.35-.385-6.29-1.14-1.938-.77-3.492-1.598-4.676-2.5-.31-.252-.548-.504-.696-.77a1.332 1.332 0 01-.177-.71.718.718 0 010-.252c.03-.37.207-.785.547-1.199l1.14-1.598c.4-.548.829-.844 1.288-.918a.896.896 0 01.222-.03c.4 0 .873.163 1.39.474 2.487 1.776 4.914 2.679 7.252 2.679 1.643 0 2.96-.385 3.922-1.14.962-.755 1.45-1.746 1.45-2.96 0-.725-.192-1.39-.562-1.983a5.347 5.347 0 00-1.539-1.569 18.207 18.207 0 00-2.235-1.287 56.102 56.102 0 00-2.649-1.214c-.917-.4-1.835-.814-2.752-1.258a19.282 19.282 0 01-2.62-1.539 14.014 14.014 0 01-2.22-1.924c-.666-.695-1.169-1.539-1.554-2.545-.37-.992-.562-2.087-.562-3.271 0-2.042.533-3.863 1.598-5.446 1.066-1.584 2.516-2.797 4.336-3.641C8.303.414 10.345 0 12.624 0c1.91 0 3.685.281 5.358.844 1.657.562 2.96 1.198 3.892 1.88.68.473 1.006 1.035 1.006 1.671 0 .385-.118.785-.37 1.2l-.917 1.657c-.385.74-.903 1.11-1.554 1.11-.4 0-.83-.133-1.318-.4a42.421 42.421 0 00-1.687-.947c-.473-.237-1.14-.488-1.998-.71a9.458 9.458 0 00-2.56-.356c-1.672 0-3.004.37-3.981 1.11-.992.74-1.48 1.717-1.48 2.946 0 .902.31 1.701.932 2.412.622.695 1.421 1.302 2.398 1.79.977.489 2.057.977 3.256 1.466a54.048 54.048 0 013.552 1.628 20.795 20.795 0 013.24 2.042c.948.755 1.732 1.732 2.354 2.945zm31.257 2.945c0 3.197-1.155 6.083-3.256 8.14-2.265 2.205-5.506 3.36-9.368 3.36H30.71c-2.443 0-4.278-1.836-4.278-4.278V4.53c0-1.2.43-2.28 1.214-3.064C28.43.681 29.51.252 30.709.252h9.013c3.419 0 6.32 1.095 8.377 3.182 1.909 1.923 2.945 4.558 2.945 7.429 0 2.294-.622 4.203-1.91 5.816 1.377.77 2.487 1.776 3.286 2.99 1.066 1.583 1.584 3.448 1.584 5.564zm-12.106-7.68c.044-.03 4.913-3.02 4.913-6.675 0-1.761-.607-3.345-1.717-4.455-1.568-1.584-3.788-1.924-5.372-1.924H30.68v28h10.7c2.738 0 4.958-.754 6.408-2.16 1.273-1.243 1.983-3.049 1.983-5.106 0-1.272-.296-2.353-.858-3.196v-.03c-1.362-2.353-6.838-3.774-6.897-3.789l-.844-.222.726-.444z"
             }
           ),
-          /* @__PURE__ */ jsx41(
+          /* @__PURE__ */ jsx36(
             "path",
             {
               fill: "#0E0A2B",
@@ -2930,8 +2632,8 @@ var Logo = ({ ref, ...props }) => {
 Logo.displayName = "Logo";
 
 // src/components/Modal/Content.tsx
-import { jsx as jsx42 } from "react/jsx-runtime";
-var Content2 = ({ ref, children, ...otherProps }) => /* @__PURE__ */ jsx42("div", { ref, ...otherProps, className: "mobius-modal__content", children });
+import { jsx as jsx37 } from "react/jsx-runtime";
+var Content2 = ({ ref, children, ...otherProps }) => /* @__PURE__ */ jsx37("div", { ref, ...otherProps, className: "mobius-modal__content", children });
 Content2.displayName = "Content";
 
 // src/components/Modal/Header.tsx
@@ -2955,12 +2657,12 @@ var useModal = () => {
 };
 
 // src/components/Modal/Header.tsx
-import { jsx as jsx43, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs19 } from "react/jsx-runtime";
 var Header2 = ({ ref, children, ...otherProps }) => {
   const { onClose, closeLabel } = useModal();
-  return /* @__PURE__ */ jsxs22("header", { ref, ...otherProps, className: "mobius-modal__header", children: [
+  return /* @__PURE__ */ jsxs19("header", { ref, ...otherProps, className: "mobius-modal__header", children: [
     children,
-    /* @__PURE__ */ jsxs22(
+    /* @__PURE__ */ jsxs19(
       Button,
       {
         "aria-label": "Close",
@@ -2968,7 +2670,7 @@ var Header2 = ({ ref, children, ...otherProps }) => {
         onPress: onClose,
         className: "mobius-modal__close",
         children: [
-          /* @__PURE__ */ jsx43(Icon, { icon: cross2 }),
+          /* @__PURE__ */ jsx38(Icon, { icon: cross2 }),
           " ",
           closeLabel
         ]
@@ -2979,9 +2681,9 @@ var Header2 = ({ ref, children, ...otherProps }) => {
 Header2.displayName = "Header";
 
 // src/components/Modal/Modal.tsx
-import classNames37 from "classnames/dedupe";
-import { useEffect as useEffect12, useMemo as useMemo3, useRef as useRef9, useState as useState16 } from "react";
-import { jsx as jsx44 } from "react/jsx-runtime";
+import classNames31 from "classnames/dedupe";
+import { useEffect as useEffect12, useMemo as useMemo3, useRef as useRef8, useState as useState16 } from "react";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var TRANSITION_CSS_VARIABLE2 = "--modal-transition-duration";
 var Modal = ({ ref, ...props }) => {
   const {
@@ -2999,7 +2701,7 @@ var Modal = ({ ref, ...props }) => {
   useEffect12(() => {
     setShouldTransition(supportsDialog());
   }, []);
-  const dialogRef = useRef9(null);
+  const dialogRef = useRef8(null);
   const { close } = useDialog({
     ref: dialogRef,
     isOpen,
@@ -3010,7 +2712,7 @@ var Modal = ({ ref, ...props }) => {
       CSSVariable: TRANSITION_CSS_VARIABLE2
     }
   });
-  const modalClasses = classNames37(
+  const modalClasses = classNames31(
     "mobius",
     "mobius-modal",
     {
@@ -3030,14 +2732,14 @@ var Modal = ({ ref, ...props }) => {
     }),
     [close, closeLabel]
   );
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx39(
     "dialog",
     {
       ref: mergeRefs([dialogRef, ref]),
       onCancel: close,
       className: modalClasses,
       ...rest,
-      children: /* @__PURE__ */ jsx44(ModalContext.Provider, { value: contextValue, children })
+      children: /* @__PURE__ */ jsx39(ModalContext.Provider, { value: contextValue, children })
     }
   );
 };
@@ -3051,9 +2753,9 @@ var Modal2 = Object.assign(Modal, {
 Modal2.displayName = "Modal";
 
 // src/components/NumberField/NumberField.tsx
-import classNames38 from "classnames/dedupe";
-import { useCallback as useCallback5, useEffect as useEffect13, useRef as useRef10 } from "react";
-import { jsx as jsx45 } from "react/jsx-runtime";
+import classNames32 from "classnames/dedupe";
+import { useCallback as useCallback5, useEffect as useEffect13, useRef as useRef9 } from "react";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var NumberField = ({ ref, ...props }) => {
   const {
     minValue,
@@ -3069,7 +2771,7 @@ var NumberField = ({ ref, ...props }) => {
     onBlur: customOnBlur,
     ...rest
   } = otherProps;
-  const focusedInputRef = useRef10(null);
+  const focusedInputRef = useRef9(null);
   const wheelHandler = useCallback5((ev) => ev.preventDefault(), []);
   useEffect13(() => {
     return () => {
@@ -3077,7 +2779,7 @@ var NumberField = ({ ref, ...props }) => {
       focusedInputRef.current = null;
     };
   }, [wheelHandler]);
-  const containerClasses = classNames38("mobius-number-field", className, {
+  const containerClasses = classNames32("mobius-number-field", className, {
     "--hide-spin-buttons": hideSpinButtons
   });
   const handleBeforeInput = (event) => {
@@ -3121,7 +2823,7 @@ var NumberField = ({ ref, ...props }) => {
     },
     onBlur: (e) => handleBlur(e)
   };
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx40(
     TextField,
     {
       ...forwardedProps,
@@ -3139,28 +2841,28 @@ var NumberField = ({ ref, ...props }) => {
 NumberField.displayName = "NumberField";
 
 // src/components/Option/Option.tsx
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var Option2 = ({ ref, ...props }) => {
   const { isDisabled, ...rest } = props;
   const mappedProps = {
     ...rest,
     disabled: isDisabled
   };
-  return /* @__PURE__ */ jsx46("option", { ...mappedProps, ref });
+  return /* @__PURE__ */ jsx41("option", { ...mappedProps, ref });
 };
 Option2.displayName = "Option";
 
 // src/components/PasswordField/PasswordField.tsx
-import classNames39 from "classnames/dedupe";
-import { useRef as useRef11, useState as useState17 } from "react";
+import classNames33 from "classnames/dedupe";
+import { useRef as useRef10, useState as useState17 } from "react";
 
 // src/components/PasswordField/ShowHideButton.tsx
 import { eye, eyeSlash } from "@simplybusiness/icons";
-import { jsx as jsx47 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 var ShowHideButton = ({
   show = false,
   onClick
-}) => /* @__PURE__ */ jsx47(
+}) => /* @__PURE__ */ jsx42(
   "button",
   {
     className: "mobius-password-field__show-button",
@@ -3171,12 +2873,12 @@ var ShowHideButton = ({
     },
     "aria-label": `${show ? "Hide" : "Show"} password`,
     "data-testid": "show-hide-button",
-    children: /* @__PURE__ */ jsx47(Icon, { icon: show ? eyeSlash : eye, "aria-hidden": "true" })
+    children: /* @__PURE__ */ jsx42(Icon, { icon: show ? eyeSlash : eye, "aria-hidden": "true" })
   }
 );
 
 // src/components/PasswordField/PasswordField.tsx
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 var PasswordField = ({
   ref,
   className,
@@ -3184,8 +2886,8 @@ var PasswordField = ({
 }) => {
   const [show, setShow] = useState17(false);
   const type = show ? "text" : "password";
-  const classes = classNames39("mobius-password-field", className);
-  const localRef = useRef11(null);
+  const classes = classNames33("mobius-password-field", className);
+  const localRef = useRef10(null);
   const handleShowHideButtonClick = () => {
     const selectionStart = localRef.current?.selectionStart;
     const selectionEnd = localRef.current?.selectionEnd;
@@ -3197,14 +2899,14 @@ var PasswordField = ({
       }
     });
   };
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx43(
     TextField,
     {
       ref: mergeRefs([localRef, ref]),
       className: classes,
       ...props,
       type,
-      suffixInside: /* @__PURE__ */ jsx48(ShowHideButton, { onClick: handleShowHideButtonClick, show })
+      suffixInside: /* @__PURE__ */ jsx43(ShowHideButton, { onClick: handleShowHideButtonClick, show })
     }
   );
 };
@@ -3223,14 +2925,14 @@ import {
   useInteractions
 } from "@floating-ui/react";
 import { cross as cross3 } from "@simplybusiness/icons";
-import classNames40 from "classnames/dedupe";
-import { cloneElement as cloneElement9, useRef as useRef12, useState as useState18 } from "react";
+import classNames34 from "classnames/dedupe";
+import { cloneElement as cloneElement8, useRef as useRef11, useState as useState18 } from "react";
 import { useWindowEvent as useWindowEvent2 } from "@simplybusiness/mobius-hooks";
-import { Fragment as Fragment4, jsx as jsx49, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx44, jsxs as jsxs20 } from "react/jsx-runtime";
 var OFFSET_FROM_CONTENT_DEFAULT = 10;
 var Popover = (props) => {
   const { trigger, children, onOpen, onClose, className } = props;
-  const arrowRef = useRef12(null);
+  const arrowRef = useRef11(null);
   const [isOpen, setIsOpen] = useState18(false);
   const { refs, floatingStyles, context } = useFloating({
     open: isOpen,
@@ -3257,7 +2959,7 @@ var Popover = (props) => {
     }
   });
   const { getReferenceProps, getFloatingProps } = useInteractions([dismiss]);
-  const containerClasses = classNames40(
+  const containerClasses = classNames34(
     "mobius",
     "mobius-popover__container",
     className
@@ -3271,9 +2973,9 @@ var Popover = (props) => {
     setIsOpen(true);
     onOpen?.();
   };
-  const triggerComponent = cloneElement9(trigger, {
+  const triggerComponent = cloneElement8(trigger, {
     ref: refs.setReference,
-    className: classNames40(
+    className: classNames34(
       trigger.props.className,
       "mobius-popover__toggle"
     ),
@@ -3287,9 +2989,9 @@ var Popover = (props) => {
       e.stopPropagation();
     }
   });
-  return /* @__PURE__ */ jsxs23(Fragment4, { children: [
+  return /* @__PURE__ */ jsxs20(Fragment4, { children: [
     triggerComponent,
-    isOpen && /* @__PURE__ */ jsxs23(
+    isOpen && /* @__PURE__ */ jsxs20(
       "div",
       {
         className: containerClasses,
@@ -3297,8 +2999,8 @@ var Popover = (props) => {
         style: floatingStyles,
         ...getFloatingProps(),
         children: [
-          /* @__PURE__ */ jsxs23("div", { className: "mobius-popover", children: [
-            /* @__PURE__ */ jsx49("header", { className: "mobius-popover__header", children: /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsxs20("div", { className: "mobius-popover", children: [
+            /* @__PURE__ */ jsx44("header", { className: "mobius-popover__header", children: /* @__PURE__ */ jsx44(
               Button,
               {
                 type: "button",
@@ -3306,7 +3008,7 @@ var Popover = (props) => {
                 onClick: toggleVisibility,
                 "aria-label": "Close",
                 variant: "ghost",
-                children: /* @__PURE__ */ jsx49(
+                children: /* @__PURE__ */ jsx44(
                   Icon,
                   {
                     icon: cross3,
@@ -3316,9 +3018,9 @@ var Popover = (props) => {
                 )
               }
             ) }),
-            /* @__PURE__ */ jsx49("div", { className: "mobius-popover__body", children })
+            /* @__PURE__ */ jsx44("div", { className: "mobius-popover__body", children })
           ] }),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx44(
             FloatingArrow,
             {
               ref: arrowRef,
@@ -3334,9 +3036,9 @@ var Popover = (props) => {
 };
 
 // src/components/Progress/Progress.tsx
-import classNames41 from "classnames/dedupe";
-import { useId as useId9 } from "react";
-import { jsx as jsx50, jsxs as jsxs24 } from "react/jsx-runtime";
+import classNames35 from "classnames/dedupe";
+import { useId as useId7 } from "react";
+import { jsx as jsx45, jsxs as jsxs21 } from "react/jsx-runtime";
 function warnAboutInvalidValues(value, minValue, maxValue) {
   if (minValue > maxValue) {
     console.warn("minValue is greater than maxValue");
@@ -3356,7 +3058,7 @@ var sanitizedValue = (value, defaultValue) => {
 };
 var getLabelComponent = (label, progressLabelId, showLabel) => {
   if (showLabel) {
-    return /* @__PURE__ */ jsx50(
+    return /* @__PURE__ */ jsx45(
       Label,
       {
         id: progressLabelId,
@@ -3366,7 +3068,7 @@ var getLabelComponent = (label, progressLabelId, showLabel) => {
       }
     );
   }
-  return /* @__PURE__ */ jsx50(VisuallyHidden, { children: /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx45(VisuallyHidden, { children: /* @__PURE__ */ jsx45(
     Label,
     {
       id: progressLabelId,
@@ -3380,8 +3082,8 @@ var DEFAULT_VALUE = 0;
 var DEFAULT_MIN_VALUE = 0;
 var DEFAULT_MAX_VALUE = 100;
 var Progress = ({ ref, ...props }) => {
-  const progressId = useId9();
-  const progressLabelId = useId9();
+  const progressId = useId7();
+  const progressLabelId = useId7();
   const {
     id,
     label,
@@ -3406,7 +3108,7 @@ var Progress = ({ ref, ...props }) => {
     100
   );
   const barWidth = `${percentage}%`;
-  const classes = classNames41("mobius", "mobius-progress", className, {
+  const classes = classNames35("mobius", "mobius-progress", className, {
     "--is-primary": variant === "primary",
     "--is-secondary": variant === "secondary"
   });
@@ -3416,7 +3118,7 @@ var Progress = ({ ref, ...props }) => {
   progressBarProps["aria-valuenow"] = value.toString();
   progressBarProps["aria-valuetext"] = valueFormatter instanceof Function ? valueFormatter(value, minValue, maxValue) : barWidth;
   const labelComponent = getLabelComponent(label, progressLabelId, showLabel);
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs21(
     "div",
     {
       id: id || progressId,
@@ -3427,8 +3129,8 @@ var Progress = ({ ref, ...props }) => {
       "aria-labelledby": progressLabelId,
       children: [
         labelComponent,
-        /* @__PURE__ */ jsx50("div", { className: "mobius-progress__track", children: /* @__PURE__ */ jsx50("div", { className: "mobius-progress__bar", style: { width: barWidth } }) }),
-        showValueLabel && /* @__PURE__ */ jsx50(Label, { "data-testid": "value-label", elementType: "span", children: progressBarProps["aria-valuetext"] })
+        /* @__PURE__ */ jsx45("div", { className: "mobius-progress__track", children: /* @__PURE__ */ jsx45("div", { className: "mobius-progress__bar", style: { width: barWidth } }) }),
+        showValueLabel && /* @__PURE__ */ jsx45(Label, { "data-testid": "value-label", elementType: "span", children: progressBarProps["aria-valuetext"] })
       ]
     }
   );
@@ -3436,15 +3138,15 @@ var Progress = ({ ref, ...props }) => {
 Progress.displayName = "Progress";
 
 // src/components/Radio/Radio.tsx
-import classNames42 from "classnames/dedupe";
+import classNames36 from "classnames/dedupe";
 import {
   Children as Children7,
   isValidElement as isValidElement5,
   useLayoutEffect,
   useMemo as useMemo4,
-  useRef as useRef13
+  useRef as useRef12
 } from "react";
-import { Fragment as Fragment5, jsx as jsx51, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx46, jsxs as jsxs22 } from "react/jsx-runtime";
 var Radio = ({ ref, ...props }) => {
   const {
     children,
@@ -3468,8 +3170,8 @@ var Radio = ({ ref, ...props }) => {
   const isMultiline = label && children;
   const isControlled = selected !== void 0;
   const isChecked = isControlled ? selected === value : defaultChecked;
-  const contentRef = useRef13(null);
-  const prevOverflowRef = useRef13({
+  const contentRef = useRef12(null);
+  const prevOverflowRef = useRef12({
     vertical: false,
     horizontal: false
   });
@@ -3509,13 +3211,13 @@ var Radio = ({ ref, ...props }) => {
     "--is-multiline": !!isMultiline,
     "--is-required": isRequired
   };
-  const containerClasses = classNames42(
+  const containerClasses = classNames36(
     "mobius-radio__label",
     radioClasses,
     className,
     { "--has-icon-first": hasIconFirst }
   );
-  const inputClasses = classNames42("mobius-radio__input", radioClasses);
+  const inputClasses = classNames36("mobius-radio__input", radioClasses);
   const { "aria-describedby": _ariaDescribedBy, ...rest } = otherProps;
   const handleChange = (event) => {
     if (setSelected) {
@@ -3529,9 +3231,9 @@ var Radio = ({ ref, ...props }) => {
       onChange(adaptedEvent);
     }
   };
-  return /* @__PURE__ */ jsxs25(Fragment5, { children: [
-    /* @__PURE__ */ jsxs25(Label, { className: containerClasses, children: [
-      /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsxs22(Fragment5, { children: [
+    /* @__PURE__ */ jsxs22(Label, { className: containerClasses, children: [
+      /* @__PURE__ */ jsx46(
         "input",
         {
           "aria-describedby": otherProps["aria-describedby"],
@@ -3548,29 +3250,29 @@ var Radio = ({ ref, ...props }) => {
           ...rest
         }
       ),
-      isMultiline ? /* @__PURE__ */ jsxs25("div", { ref: contentRef, className: "mobius-radio__content--multiline", children: [
-        /* @__PURE__ */ jsx51("div", { className: "mobius-radio__content-first-line", children: label }),
-        /* @__PURE__ */ jsx51("div", { className: "mobius-radio__extra-content", children })
-      ] }) : /* @__PURE__ */ jsx51("div", { ref: contentRef, className: "mobius-radio__content", children: label || children })
+      isMultiline ? /* @__PURE__ */ jsxs22("div", { ref: contentRef, className: "mobius-radio__content--multiline", children: [
+        /* @__PURE__ */ jsx46("div", { className: "mobius-radio__content-first-line", children: label }),
+        /* @__PURE__ */ jsx46("div", { className: "mobius-radio__extra-content", children })
+      ] }) : /* @__PURE__ */ jsx46("div", { ref: contentRef, className: "mobius-radio__content", children: label || children })
     ] }),
-    errorMessage && /* @__PURE__ */ jsx51(ErrorMessage, { errorMessage })
+    errorMessage && /* @__PURE__ */ jsx46(ErrorMessage, { errorMessage })
   ] });
 };
 Radio.displayName = "Radio";
 
 // src/components/Radio/RadioGroup.tsx
-import classNames43 from "classnames/dedupe";
+import classNames37 from "classnames/dedupe";
 import {
   Children as Children8,
-  cloneElement as cloneElement10,
+  cloneElement as cloneElement9,
   isValidElement as isValidElement6,
   useCallback as useCallback6,
   useEffect as useEffect14,
-  useId as useId10,
-  useRef as useRef14,
+  useId as useId8,
+  useRef as useRef13,
   useState as useState19
 } from "react";
-import { jsx as jsx52, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs23 } from "react/jsx-runtime";
 var getDefaultVal = (children, defaultValue) => {
   if (Array.isArray(children) && defaultValue) {
     const option = children?.find((item) => item.props.value === defaultValue);
@@ -3599,7 +3301,7 @@ var RadioGroup = ({ ref, ...props }) => {
   } = props;
   const defaultSelected = getDefaultVal(children, value || defaultValue);
   const [selected, setSelected] = useState19(defaultSelected);
-  const overflowsRef = useRef14({});
+  const overflowsRef = useRef13({});
   const [hasOverflow, setHasOverflow] = useState19(false);
   useEffect14(() => {
     if (value !== void 0) {
@@ -3630,26 +3332,26 @@ var RadioGroup = ({ ref, ...props }) => {
     [`--is-${effectiveOrientation}`]: true,
     [className || ""]: true
   };
-  const radioGroupClasses = classNames43(
+  const radioGroupClasses = classNames37(
     "mobius",
     "mobius-radio-group",
     radioClasses,
     validationClasses
   );
-  const radioWrapperClasses = classNames43("mobius-radio__wrapper", {
+  const radioWrapperClasses = classNames37("mobius-radio__wrapper", {
     [`--is-${effectiveOrientation}`]: true
   });
-  const labelClasses = classNames43(radioClasses, validationClasses);
-  const errorMessageId = useId10();
-  const defaultNameAttrId = useId10();
+  const labelClasses = classNames37(radioClasses, validationClasses);
+  const errorMessageId = useId8();
+  const defaultNameAttrId = useId8();
   const nameAttribute = name || defaultNameAttrId;
   const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
   const describedBy = spaceDelimitedList([
     shouldErrorMessageShow,
     props["aria-describedby"]
   ]);
-  const labelId = useId10();
-  return /* @__PURE__ */ jsx52(
+  const labelId = useId8();
+  return /* @__PURE__ */ jsx47(
     "div",
     {
       ...rest,
@@ -3665,12 +3367,12 @@ var RadioGroup = ({ ref, ...props }) => {
       ref,
       className: radioGroupClasses,
       role: "radiogroup",
-      children: /* @__PURE__ */ jsxs26(Stack, { gap: "xs", children: [
-        label && /* @__PURE__ */ jsx52(Label, { htmlFor: name, id: labelId, className: labelClasses, children: label }),
-        /* @__PURE__ */ jsx52("div", { className: radioWrapperClasses, children: Children8.map(children, (child) => {
+      children: /* @__PURE__ */ jsxs23(Stack, { gap: "xs", children: [
+        label && /* @__PURE__ */ jsx47(Label, { htmlFor: name, id: labelId, className: labelClasses, children: label }),
+        /* @__PURE__ */ jsx47("div", { className: radioWrapperClasses, children: Children8.map(children, (child) => {
           if (isValidElement6(child)) {
             const childValue = child.props.value;
-            return cloneElement10(
+            return cloneElement9(
               child,
               {
                 orientation: effectiveOrientation,
@@ -3688,7 +3390,7 @@ var RadioGroup = ({ ref, ...props }) => {
           }
           return child;
         }) }),
-        /* @__PURE__ */ jsx52(ErrorMessage, { id: errorMessageId, errorMessage })
+        /* @__PURE__ */ jsx47(ErrorMessage, { id: errorMessageId, errorMessage })
       ] })
     }
   );
@@ -3696,36 +3398,36 @@ var RadioGroup = ({ ref, ...props }) => {
 RadioGroup.displayName = "RadioGroup";
 
 // src/components/Segment/SegmentGroup.tsx
-import classNames44 from "classnames/dedupe";
-import { jsx as jsx53 } from "react/jsx-runtime";
+import classNames38 from "classnames/dedupe";
+import { jsx as jsx48 } from "react/jsx-runtime";
 var SegmentGroup = (props) => {
   const { children, horizontal, gap, className, ...rest } = props;
   const gapClass = gap ? `gap-${gap}` : "";
-  const classes = classNames44(
+  const classes = classNames38(
     "mobius",
     "mobius-segment-group",
     className,
     { "--is-horizontal": horizontal },
     gapClass
   );
-  return /* @__PURE__ */ jsx53("div", { className: classes, ...rest, children });
+  return /* @__PURE__ */ jsx48("div", { className: classes, ...rest, children });
 };
 SegmentGroup.displayName = "SegmentGroup";
 
 // src/components/Segment/Segment.tsx
-import classNames45 from "classnames/dedupe";
-import { jsx as jsx54, jsxs as jsxs27 } from "react/jsx-runtime";
+import classNames39 from "classnames/dedupe";
+import { jsx as jsx49, jsxs as jsxs24 } from "react/jsx-runtime";
 var Segment = (props) => {
   const { heading, children, colour, inverted, className, ...rest } = props;
-  const classes = classNames45(
+  const classes = classNames39(
     "mobius",
     "mobius-segment",
     colour,
     { inverted },
     className
   );
-  return /* @__PURE__ */ jsxs27("div", { className: classes, ...rest, children: [
-    heading && /* @__PURE__ */ jsx54("div", { className: "mobius-segment__heading", children: heading }),
+  return /* @__PURE__ */ jsxs24("div", { className: classes, ...rest, children: [
+    heading && /* @__PURE__ */ jsx49("div", { className: "mobius-segment__heading", children: heading }),
     children
   ] });
 };
@@ -3733,9 +3435,9 @@ Segment.displayName = "Segment";
 
 // src/components/Select/Select.tsx
 import { chevronDown as chevronDown2 } from "@simplybusiness/icons";
-import classNames46 from "classnames/dedupe";
-import { useId as useId11 } from "react";
-import { jsx as jsx55, jsxs as jsxs28 } from "react/jsx-runtime";
+import classNames40 from "classnames/dedupe";
+import { useId as useId9 } from "react";
+import { jsx as jsx50, jsxs as jsxs25 } from "react/jsx-runtime";
 var Select = ({ ref, ...props }) => {
   const {
     label,
@@ -3756,24 +3458,24 @@ var Select = ({ ref, ...props }) => {
     "--is-required": typeof isRequired === "boolean" && isRequired,
     "--is-optional": typeof isRequired === "boolean" && !isRequired
   };
-  const sharedClasses = classNames46(validationClasses, stateClasses);
-  const wrapperClasses = classNames46(
+  const sharedClasses = classNames40(validationClasses, stateClasses);
+  const wrapperClasses = classNames40(
     "mobius-select__wrapper",
     sharedClasses,
     otherProps.className
   );
-  const selectClasses = classNames46(
+  const selectClasses = classNames40(
     "mobius-select",
     sharedClasses,
     otherProps.className
   );
-  const labelClasses = classNames46(
+  const labelClasses = classNames40(
     "mobius-label",
     sharedClasses,
     otherProps.className
   );
-  const iconClasses = classNames46("mobius-select__icon", sharedClasses);
-  const errorMessageId = useId11();
+  const iconClasses = classNames40("mobius-select__icon", sharedClasses);
+  const errorMessageId = useId9();
   const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
   const describedBy = spaceDelimitedList([
     shouldErrorMessageShow,
@@ -3784,10 +3486,10 @@ var Select = ({ ref, ...props }) => {
       onChange(e);
     }
   };
-  return /* @__PURE__ */ jsxs28(Stack, { className: "mobius mobius-select__outer", gap: "xs", children: [
-    label && /* @__PURE__ */ jsx55(Label, { ...labelProps, className: labelClasses, children: label }),
-    /* @__PURE__ */ jsxs28("div", { className: wrapperClasses, children: [
-      /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsxs25(Stack, { className: "mobius mobius-select__outer", gap: "xs", children: [
+    label && /* @__PURE__ */ jsx50(Label, { ...labelProps, className: labelClasses, children: label }),
+    /* @__PURE__ */ jsxs25("div", { className: wrapperClasses, children: [
+      /* @__PURE__ */ jsx50(
         "select",
         {
           ...otherProps,
@@ -3803,16 +3505,16 @@ var Select = ({ ref, ...props }) => {
           onChange: handleChange
         }
       ),
-      /* @__PURE__ */ jsx55("span", { className: iconClasses, children: /* @__PURE__ */ jsx55(Icon, { icon: chevronDown2 }) })
+      /* @__PURE__ */ jsx50("span", { className: iconClasses, children: /* @__PURE__ */ jsx50(Icon, { icon: chevronDown2 }) })
     ] }),
-    errorMessage && /* @__PURE__ */ jsx55(ErrorMessage, { id: errorMessageId, errorMessage })
+    errorMessage && /* @__PURE__ */ jsx50(ErrorMessage, { id: errorMessageId, errorMessage })
   ] });
 };
 Select.displayName = "Select";
 
 // src/components/Slider/Slider.tsx
-import classNames47 from "classnames/dedupe";
-import { useRef as useRef15, useState as useState20 } from "react";
+import classNames41 from "classnames/dedupe";
+import { useRef as useRef14, useState as useState20 } from "react";
 
 // src/components/Slider/helpers.ts
 import { useCallback as useCallback7, useMemo as useMemo5 } from "react";
@@ -3824,7 +3526,7 @@ function numberFormatter(value, formatOptions, locale = navigator.languages?.[0]
 }
 
 // src/components/Slider/Slider.tsx
-import { jsx as jsx56, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs26 } from "react/jsx-runtime";
 var Slider = (props) => {
   const {
     id,
@@ -3845,7 +3547,7 @@ var Slider = (props) => {
     formatOptions,
     isDisabled = false
   } = props;
-  const trackRef = useRef15(null);
+  const trackRef = useRef14(null);
   const [currentValue, setCurrentValue] = useState20(
     value || defaultValue || 0
   );
@@ -3857,7 +3559,7 @@ var Slider = (props) => {
     "aria-labelledby": ariaLabelledBy
   });
   const formattedValue = numberFormatter(currentValue, formatOptions);
-  const classes = classNames47("mobius", "mobius-slider", className, {
+  const classes = classNames41("mobius", "mobius-slider", className, {
     "--is-disabled": isDisabled,
     "--is-primary": variant === "primary",
     "--is-secondary": variant === "secondary",
@@ -3879,12 +3581,12 @@ var Slider = (props) => {
       onChangeEnd(currentValue);
     }
   };
-  return /* @__PURE__ */ jsxs29("div", { className: classes, children: [
-    /* @__PURE__ */ jsxs29("div", { className: "mobius-slider__label-wrapper", children: [
-      label && /* @__PURE__ */ jsx56(Label, { ...labelProps, children: label }),
-      label && /* @__PURE__ */ jsx56("output", { style: { flex: "1 0 auto", textAlign: "end" }, children: formattedValue })
+  return /* @__PURE__ */ jsxs26("div", { className: classes, children: [
+    /* @__PURE__ */ jsxs26("div", { className: "mobius-slider__label-wrapper", children: [
+      label && /* @__PURE__ */ jsx51(Label, { ...labelProps, children: label }),
+      label && /* @__PURE__ */ jsx51("output", { style: { flex: "1 0 auto", textAlign: "end" }, children: formattedValue })
     ] }),
-    /* @__PURE__ */ jsx56("div", { ref: trackRef, className: "mobius-slider__track-wrapper", children: /* @__PURE__ */ jsx56(
+    /* @__PURE__ */ jsx51("div", { ref: trackRef, className: "mobius-slider__track-wrapper", children: /* @__PURE__ */ jsx51(
       "input",
       {
         className: "mobius-slider__track",
@@ -3903,23 +3605,23 @@ var Slider = (props) => {
         ...fieldProps
       }
     ) }),
-    /* @__PURE__ */ jsxs29("div", { className: "mobius-slider__labels", children: [
-      /* @__PURE__ */ jsx56("div", { className: "mobius-slider__min-label", "data-testid": "min-label", children: minLabel }),
-      /* @__PURE__ */ jsx56("div", { className: "mobius-slider__max-label", "data-testid": "max-label", children: maxLabel })
+    /* @__PURE__ */ jsxs26("div", { className: "mobius-slider__labels", children: [
+      /* @__PURE__ */ jsx51("div", { className: "mobius-slider__min-label", "data-testid": "min-label", children: minLabel }),
+      /* @__PURE__ */ jsx51("div", { className: "mobius-slider__max-label", "data-testid": "max-label", children: maxLabel })
     ] })
   ] });
 };
 
 // src/components/SVG/SVG.tsx
 import { Children as Children9 } from "react";
-import classNames48 from "classnames/dedupe";
-import { jsx as jsx57 } from "react/jsx-runtime";
+import classNames42 from "classnames/dedupe";
+import { jsx as jsx52 } from "react/jsx-runtime";
 var SVG = ({ ref, ...props }) => {
   const { children, className, ...otherProps } = props;
-  const classes = classNames48("mobius", "mobius-svg", className);
+  const classes = classNames42("mobius", "mobius-svg", className);
   const svgNode = Children9.only(children);
   const { children: svgChildren, viewBox, xmlns } = svgNode.props;
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx52(
     "svg",
     {
       viewBox,
@@ -3938,8 +3640,8 @@ import {
   useState as useState21,
   useEffect as useEffect15
 } from "react";
-import classNames49 from "classnames/dedupe";
-import { jsx as jsx58, jsxs as jsxs30 } from "react/jsx-runtime";
+import classNames43 from "classnames/dedupe";
+import { jsx as jsx53, jsxs as jsxs27 } from "react/jsx-runtime";
 var Switch = ({ ref, ...props }) => {
   const {
     checked = false,
@@ -3952,7 +3654,7 @@ var Switch = ({ ref, ...props }) => {
   useEffect15(() => {
     setEnabled(checked);
   }, [checked]);
-  const classes = classNames49(
+  const classes = classNames43(
     "mobius",
     "mobius-switch",
     {
@@ -3967,9 +3669,9 @@ var Switch = ({ ref, ...props }) => {
       onChange(event);
     }
   };
-  return /* @__PURE__ */ jsxs30("label", { ref, className: classes, children: [
-    /* @__PURE__ */ jsx58(VisuallyHidden, { children: /* @__PURE__ */ jsx58("span", { children: enabled ? "On" : "Off" }) }),
-    /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsxs27("label", { ref, className: classes, children: [
+    /* @__PURE__ */ jsx53(VisuallyHidden, { children: /* @__PURE__ */ jsx53("span", { children: enabled ? "On" : "Off" }) }),
+    /* @__PURE__ */ jsx53(
       "input",
       {
         type: "checkbox",
@@ -3980,79 +3682,79 @@ var Switch = ({ ref, ...props }) => {
         ...otherProps
       }
     ),
-    /* @__PURE__ */ jsx58("span", { className: "mobius-switch__slider" })
+    /* @__PURE__ */ jsx53("span", { className: "mobius-switch__slider" })
   ] });
 };
 Switch.displayName = "Switch";
 
 // src/components/Table/Table.tsx
-import classNames50 from "classnames/dedupe";
-import { jsx as jsx59 } from "react/jsx-runtime";
+import classNames44 from "classnames/dedupe";
+import { jsx as jsx54 } from "react/jsx-runtime";
 var Table = ({ ref, ...props }) => {
-  const classes = classNames50("mobius", "mobius-table", props.className);
-  return /* @__PURE__ */ jsx59("table", { ref, ...props, className: classes });
+  const classes = classNames44("mobius", "mobius-table", props.className);
+  return /* @__PURE__ */ jsx54("table", { ref, ...props, className: classes });
 };
 Table.displayName = "Table";
 
 // src/components/Table/Head.tsx
-import classNames51 from "classnames/dedupe";
-import { jsx as jsx60 } from "react/jsx-runtime";
+import classNames45 from "classnames/dedupe";
+import { jsx as jsx55 } from "react/jsx-runtime";
 var Head = ({ ref, ...props }) => {
-  const classes = classNames51("mobius", "mobius-table__head", props.className);
-  return /* @__PURE__ */ jsx60("thead", { ref, ...props, className: classes });
+  const classes = classNames45("mobius", "mobius-table__head", props.className);
+  return /* @__PURE__ */ jsx55("thead", { ref, ...props, className: classes });
 };
 Head.displayName = "Table.Head";
 
 // src/components/Table/Body.tsx
-import classNames52 from "classnames/dedupe";
-import { jsx as jsx61 } from "react/jsx-runtime";
+import classNames46 from "classnames/dedupe";
+import { jsx as jsx56 } from "react/jsx-runtime";
 var Body = ({ ref, ...props }) => {
-  const classes = classNames52("mobius", "mobius-table__body", props.className);
-  return /* @__PURE__ */ jsx61("tbody", { ref, ...props, className: classes });
+  const classes = classNames46("mobius", "mobius-table__body", props.className);
+  return /* @__PURE__ */ jsx56("tbody", { ref, ...props, className: classes });
 };
 Body.displayName = "Table.Body";
 
 // src/components/Table/Foot.tsx
-import classNames53 from "classnames/dedupe";
-import { jsx as jsx62 } from "react/jsx-runtime";
+import classNames47 from "classnames/dedupe";
+import { jsx as jsx57 } from "react/jsx-runtime";
 var Foot = ({ ref, ...props }) => {
-  const classes = classNames53("mobius", "mobius-table__foot", props.className);
-  return /* @__PURE__ */ jsx62("tfoot", { ref, ...props, className: classes });
+  const classes = classNames47("mobius", "mobius-table__foot", props.className);
+  return /* @__PURE__ */ jsx57("tfoot", { ref, ...props, className: classes });
 };
 Foot.displayName = "Table.Foot";
 
 // src/components/Table/Row.tsx
-import classNames54 from "classnames/dedupe";
-import { jsx as jsx63 } from "react/jsx-runtime";
+import classNames48 from "classnames/dedupe";
+import { jsx as jsx58 } from "react/jsx-runtime";
 var Row = ({ ref, ...props }) => {
-  const classes = classNames54("mobius", "mobius-table__row", props.className);
-  return /* @__PURE__ */ jsx63("tr", { ref, ...props, className: classes });
+  const classes = classNames48("mobius", "mobius-table__row", props.className);
+  return /* @__PURE__ */ jsx58("tr", { ref, ...props, className: classes });
 };
 Row.displayName = "Table.Row";
 
 // src/components/Table/HeaderCell.tsx
-import classNames55 from "classnames/dedupe";
-import { jsx as jsx64 } from "react/jsx-runtime";
+import classNames49 from "classnames/dedupe";
+import { jsx as jsx59 } from "react/jsx-runtime";
 var HeaderCell = ({ ref, ...props }) => {
-  const classes = classNames55(
+  const classes = classNames49(
     "mobius",
     "mobius-table__head-cell",
     props.className
   );
-  return /* @__PURE__ */ jsx64("th", { ...props, ref, className: classes });
+  return /* @__PURE__ */ jsx59("th", { ...props, ref, className: classes });
 };
 HeaderCell.displayName = "Table.HeaderCell";
 
 // src/components/Table/Cell.tsx
-import classNames56 from "classnames/dedupe";
-import { jsx as jsx65 } from "react/jsx-runtime";
+import classNames50 from "classnames/dedupe";
+import { jsx as jsx60 } from "react/jsx-runtime";
 var Cell = ({ ref, ...props }) => {
-  const classes = classNames56(
+  const classes = classNames50(
     "mobius",
     "mobius-table__body-cell",
     props.className
   );
-  return /* @__PURE__ */ jsx65("td", { ref, ...props, className: classes });
+  return /* @__PURE__ */ jsx60("td", { ref, ...props, className: classes });
 };
 Cell.displayName = "Table.Cell";
 
@@ -4067,39 +3769,15 @@ var Table2 = Object.assign(Table, {
 });
 Table2.displayName = "Table";
 
-// src/components/Text/Text.tsx
-import classNames57 from "classnames/dedupe";
-import { jsx as jsx66 } from "react/jsx-runtime";
-var getElementType = (variant, elementType) => {
-  if (variant) {
-    return ["h1", "h2", "h3", "h4"].includes(variant) ? variant : "p";
-  }
-  return elementType || "p";
-};
-var Text = ({ ref, elementType: Component = "p", ...props }) => {
-  const { variant, className, spacing, ...otherProps } = props;
-  const elementType = getElementType(variant, Component);
-  const variantType = variant || elementType;
-  const classes = classNames57(
-    "mobius",
-    "mobius-text",
-    { [`--is-${variantType}`]: variantType },
-    { [`--has-line-height-${spacing}`]: spacing },
-    className
-  );
-  return /* @__PURE__ */ jsx66(Component, { ref, ...otherProps, className: classes });
-};
-Text.displayName = "Text";
-
 // src/components/TextArea/TextArea.tsx
-import classNames59 from "classnames/dedupe";
+import classNames52 from "classnames/dedupe";
 
 // src/components/TextAreaInput/TextAreaInput.tsx
-import classNames58 from "classnames/dedupe";
-import { jsx as jsx67 } from "react/jsx-runtime";
+import classNames51 from "classnames/dedupe";
+import { jsx as jsx61 } from "react/jsx-runtime";
 var TextAreaInput = ({ ref, ...props }) => {
   const { isSelected, isDisabled, isReadOnly, isRequired, ...otherProps } = props;
-  const classes = classNames58(
+  const classes = classNames51(
     "mobius",
     "mobius-text-area__input",
     {
@@ -4109,7 +3787,7 @@ var TextAreaInput = ({ ref, ...props }) => {
     },
     otherProps.className
   );
-  return /* @__PURE__ */ jsx67(
+  return /* @__PURE__ */ jsx61(
     "textarea",
     {
       ref,
@@ -4123,7 +3801,7 @@ var TextAreaInput = ({ ref, ...props }) => {
 TextAreaInput.displayName = "TextAreaInput";
 
 // src/components/TextArea/TextArea.tsx
-import { jsx as jsx68, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs28 } from "react/jsx-runtime";
 var TextArea = ({ ref, ...props }) => {
   const {
     isDisabled,
@@ -4134,18 +3812,18 @@ var TextArea = ({ ref, ...props }) => {
     ...otherProps
   } = props;
   const { inputProps, labelProps, errorMessageProps } = useTextField(props);
-  const classes = classNames59("mobius", "mobius-text-area", className);
+  const classes = classNames52("mobius", "mobius-text-area", className);
   const validationClasses = useValidationClasses({ isInvalid });
-  const inputClasses = classNames59("mobius-text-area__input", validationClasses);
-  const labelClasses = classNames59(
+  const inputClasses = classNames52("mobius-text-area__input", validationClasses);
+  const labelClasses = classNames52(
     {
       "--is-disabled": isDisabled
     },
     validationClasses
   );
-  return /* @__PURE__ */ jsxs31(Stack, { className: classes, gap: "xs", children: [
-    label && /* @__PURE__ */ jsx68(Label, { ...labelProps, className: labelClasses, children: props.label }),
-    /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsxs28(Stack, { className: classes, gap: "xs", children: [
+    label && /* @__PURE__ */ jsx62(Label, { ...labelProps, className: labelClasses, children: props.label }),
+    /* @__PURE__ */ jsx62(
       TextAreaInput,
       {
         ...otherProps,
@@ -4156,41 +3834,14 @@ var TextArea = ({ ref, ...props }) => {
         "aria-invalid": errorMessage != null
       }
     ),
-    /* @__PURE__ */ jsx68(ErrorMessage, { ...errorMessageProps, errorMessage })
+    /* @__PURE__ */ jsx62(ErrorMessage, { ...errorMessageProps, errorMessage })
   ] });
 };
 TextArea.displayName = "TextArea";
 
-// src/components/TextOrHTML/TextOrHTML.tsx
-import { useMemo as useMemo6 } from "react";
-import { jsx as jsx69 } from "react/jsx-runtime";
-var TextOrHTML = ({
-  ref,
-  text,
-  htmlClassName,
-  htmlElementType = "span",
-  textWrapper = false,
-  ...textProps
-}) => {
-  const DangerousComponent = htmlElementType;
-  const dangerousHTML = useMemo6(() => ({ __html: text }), [text]);
-  const dangerousElement = /* @__PURE__ */ jsx69(
-    DangerousComponent,
-    {
-      className: htmlClassName,
-      dangerouslySetInnerHTML: dangerousHTML
-    }
-  );
-  if (textWrapper) {
-    return /* @__PURE__ */ jsx69(Text, { ref, ...textProps, children: dangerousElement });
-  }
-  return dangerousElement;
-};
-TextOrHTML.displayName = "TextOrHTML";
-
 // src/components/Title/Title.tsx
-import classNames60 from "classnames/dedupe";
-import { jsx as jsx70, jsxs as jsxs32 } from "react/jsx-runtime";
+import classNames53 from "classnames/dedupe";
+import { jsx as jsx63, jsxs as jsxs29 } from "react/jsx-runtime";
 var Title = ({ ref, ...props }) => {
   const {
     elementType: Element = "div",
@@ -4198,13 +3849,13 @@ var Title = ({ ref, ...props }) => {
     description,
     ...otherProps
   } = props;
-  const classes = classNames60("mobius", "mobius-title", otherProps.className);
-  const headerClasses = classNames60("mobius", "mobius-title__header");
-  const contentClasses = classNames60("mobius", "mobius-title__description");
-  const containerClasses = classNames60("mobius", "mobius-title__container");
-  return /* @__PURE__ */ jsx70(Element, { ref, ...otherProps, className: classes, children: /* @__PURE__ */ jsxs32(Flex, { flexDirection: "column", className: containerClasses, children: [
-    /* @__PURE__ */ jsx70("p", { className: headerClasses, children: title }),
-    /* @__PURE__ */ jsx70("p", { className: contentClasses, children: description })
+  const classes = classNames53("mobius", "mobius-title", otherProps.className);
+  const headerClasses = classNames53("mobius", "mobius-title__header");
+  const contentClasses = classNames53("mobius", "mobius-title__description");
+  const containerClasses = classNames53("mobius", "mobius-title__container");
+  return /* @__PURE__ */ jsx63(Element, { ref, ...otherProps, className: classes, children: /* @__PURE__ */ jsxs29(Flex, { flexDirection: "column", className: containerClasses, children: [
+    /* @__PURE__ */ jsx63("p", { className: headerClasses, children: title }),
+    /* @__PURE__ */ jsx63("p", { className: contentClasses, children: description })
   ] }) });
 };
 Title.displayName = "Title";
@@ -4217,7 +3868,7 @@ import {
   cross as cross4,
   triangleExclamation
 } from "@simplybusiness/icons";
-import classNames61 from "classnames/dedupe";
+import classNames54 from "classnames/dedupe";
 import { toast as sonnerToast } from "sonner";
 
 // src/components/Toast/state.ts
@@ -4226,7 +3877,7 @@ var toastState = {
 };
 
 // src/components/Toast/Toast.tsx
-import { jsx as jsx71, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs30 } from "react/jsx-runtime";
 var variantIcons = {
   info: circleInfo2,
   success: circleCheck,
@@ -4239,8 +3890,8 @@ var variantColors = {
   warning: "var(--color-warning)",
   error: "var(--color-error)"
 };
-var ToastIcon = ({ variant }) => /* @__PURE__ */ jsx71("span", { className: "mobius-toast__icon", children: /* @__PURE__ */ jsx71(Icon, { icon: variantIcons[variant], color: variantColors[variant] }) });
-var CloseIcon = () => /* @__PURE__ */ jsx71("span", { className: "mobius-toast__close-icon", children: /* @__PURE__ */ jsx71(Icon, { icon: cross4 }) });
+var ToastIcon = ({ variant }) => /* @__PURE__ */ jsx64("span", { className: "mobius-toast__icon", children: /* @__PURE__ */ jsx64(Icon, { icon: variantIcons[variant], color: variantColors[variant] }) });
+var CloseIcon = () => /* @__PURE__ */ jsx64("span", { className: "mobius-toast__close-icon", children: /* @__PURE__ */ jsx64(Icon, { icon: cross4 }) });
 var ToastContent = ({
   toastId,
   variant,
@@ -4249,15 +3900,15 @@ var ToastContent = ({
   action,
   cancel,
   showCloseButton = toastState.showCloseButton
-}) => /* @__PURE__ */ jsxs33("div", { className: classNames61("mobius", "mobius-toast", `--${variant}`), children: [
-  /* @__PURE__ */ jsx71(ToastIcon, { variant }),
-  /* @__PURE__ */ jsxs33("div", { className: "mobius-toast__body", children: [
-    /* @__PURE__ */ jsxs33("div", { className: "mobius-toast__content", children: [
-      title && /* @__PURE__ */ jsx71("div", { className: "mobius-toast__title", children: title }),
-      description && /* @__PURE__ */ jsx71("div", { className: "mobius-toast__description", children: description })
+}) => /* @__PURE__ */ jsxs30("div", { className: classNames54("mobius", "mobius-toast", `--${variant}`), children: [
+  /* @__PURE__ */ jsx64(ToastIcon, { variant }),
+  /* @__PURE__ */ jsxs30("div", { className: "mobius-toast__body", children: [
+    /* @__PURE__ */ jsxs30("div", { className: "mobius-toast__content", children: [
+      title && /* @__PURE__ */ jsx64("div", { className: "mobius-toast__title", children: title }),
+      description && /* @__PURE__ */ jsx64("div", { className: "mobius-toast__description", children: description })
     ] }),
-    (action || cancel) && /* @__PURE__ */ jsxs33("div", { className: "mobius-toast__actions", children: [
-      cancel && /* @__PURE__ */ jsx71(
+    (action || cancel) && /* @__PURE__ */ jsxs30("div", { className: "mobius-toast__actions", children: [
+      cancel && /* @__PURE__ */ jsx64(
         "button",
         {
           type: "button",
@@ -4269,7 +3920,7 @@ var ToastContent = ({
           children: cancel.label
         }
       ),
-      action && /* @__PURE__ */ jsx71(
+      action && /* @__PURE__ */ jsx64(
         "button",
         {
           type: "button",
@@ -4283,19 +3934,19 @@ var ToastContent = ({
       )
     ] })
   ] }),
-  showCloseButton && /* @__PURE__ */ jsx71(
+  showCloseButton && /* @__PURE__ */ jsx64(
     "button",
     {
       type: "button",
       className: "mobius-toast__close",
       onClick: () => sonnerToast.dismiss(toastId),
       "aria-label": "Close",
-      children: /* @__PURE__ */ jsx71(CloseIcon, {})
+      children: /* @__PURE__ */ jsx64(CloseIcon, {})
     }
   )
 ] });
 var createCustomToast = (message, variant, options) => sonnerToast.custom(
-  (id) => /* @__PURE__ */ jsx71(
+  (id) => /* @__PURE__ */ jsx64(
     ToastContent,
     {
       toastId: id,
@@ -4329,7 +3980,7 @@ var toast = {
 // src/components/Toast/Toaster.tsx
 import { useEffect as useEffect16 } from "react";
 import { Toaster as SonnerToaster } from "sonner";
-import { jsx as jsx72 } from "react/jsx-runtime";
+import { jsx as jsx65 } from "react/jsx-runtime";
 var Toaster = ({
   position = "top-right",
   closeButton = true,
@@ -4341,7 +3992,7 @@ var Toaster = ({
   useEffect16(() => {
     toastState.showCloseButton = closeButton;
   }, [closeButton]);
-  return /* @__PURE__ */ jsx72(
+  return /* @__PURE__ */ jsx65(
     SonnerToaster,
     {
       position,
@@ -4356,8 +4007,8 @@ var Toaster = ({
 Toaster.displayName = "Toaster";
 
 // src/components/Trust/Trust.tsx
-import classNames62 from "classnames/dedupe";
-import { useEffect as useEffect17, useRef as useRef16, useState as useState22 } from "react";
+import classNames55 from "classnames/dedupe";
+import { useEffect as useEffect17, useRef as useRef15, useState as useState22 } from "react";
 
 // src/components/Trust/constants.ts
 var REQUIRED_TRUSTPILOT_CLASS_NAME = "trustpilot-widget";
@@ -4421,7 +4072,7 @@ var TRUSTPILOT_WIDGET = {
 };
 
 // src/components/Trust/Trust.tsx
-import { jsx as jsx73 } from "react/jsx-runtime";
+import { jsx as jsx66 } from "react/jsx-runtime";
 var Trust = ({ ref, ...props }) => {
   const {
     elementType: Element = "div",
@@ -4434,7 +4085,7 @@ var Trust = ({ ref, ...props }) => {
     className
   } = props;
   const [isMounted, setIsMounted] = useState22(false);
-  const trustRef = useRef16(null);
+  const trustRef = useRef15(null);
   const {
     templateId,
     className: variantClassName,
@@ -4451,7 +4102,7 @@ var Trust = ({ ref, ...props }) => {
     "data-style-height": height,
     "data-stars": stars
   };
-  const classes = classNames62(
+  const classes = classNames55(
     "mobius",
     "mobius-trust",
     REQUIRED_TRUSTPILOT_CLASS_NAME,
@@ -4470,15 +4121,15 @@ var Trust = ({ ref, ...props }) => {
   useEffect17(() => {
     setIsMounted(true);
   }, []);
-  if (!isMounted) return /* @__PURE__ */ jsx73("div", { style: styles });
-  return /* @__PURE__ */ jsx73(
+  if (!isMounted) return /* @__PURE__ */ jsx66("div", { style: styles });
+  return /* @__PURE__ */ jsx66(
     Element,
     {
       ref: mergeRefs([trustRef, ref]),
       className: classes,
       style: styles,
       ...dataProps,
-      children: /* @__PURE__ */ jsx73(
+      children: /* @__PURE__ */ jsx66(
         "a",
         {
           href: link,
@@ -4493,9 +4144,9 @@ var Trust = ({ ref, ...props }) => {
 };
 
 // src/components/ExpandableText/ExpandableText.tsx
-import classNames63 from "classnames/dedupe";
-import { useEffect as useEffect18, useId as useId12, useRef as useRef17, useState as useState23 } from "react";
-import { jsx as jsx74, jsxs as jsxs34 } from "react/jsx-runtime";
+import classNames56 from "classnames/dedupe";
+import { useEffect as useEffect18, useId as useId10, useRef as useRef16, useState as useState23 } from "react";
+import { jsx as jsx67, jsxs as jsxs31 } from "react/jsx-runtime";
 var ExpandableText = ({ ref, ...props }) => {
   const {
     text,
@@ -4511,9 +4162,9 @@ var ExpandableText = ({ ref, ...props }) => {
   } = props;
   const [isExpanded, setIsExpanded] = useState23(false);
   const [isCollapsed, setIsCollapsed] = useState23(false);
-  const textRef = useRef17(null);
+  const textRef = useRef16(null);
   const { down } = useBreakpoint();
-  const baseId = useId12();
+  const baseId = useId10();
   const expandButtonId = `expandable-text-expand-${baseId}`;
   const shouldCollapse = breakpoint ? down(breakpoint) : true;
   useEffect18(() => {
@@ -4526,20 +4177,20 @@ var ExpandableText = ({ ref, ...props }) => {
     setIsCollapsed(isOverflowing);
   }, [text, shouldCollapse, maxLines]);
   if (breakpoint && !shouldCollapse) {
-    return /* @__PURE__ */ jsx74("div", { ref, className, ...otherProps, children: /* @__PURE__ */ jsx74(TextOrHTML, { text, textWrapper: true, ...textProps }) });
+    return /* @__PURE__ */ jsx67("div", { ref, className, ...otherProps, children: /* @__PURE__ */ jsx67(TextOrHTML, { text, textWrapper: true, ...textProps }) });
   }
   const handleAccordionChange = (expanded) => {
     setIsExpanded(expanded);
     onToggle?.(expanded);
   };
-  const classes = classNames63("mobius-expandable-text", className);
-  const textContainerClasses = classNames63("mobius-expandable-text__content", {
+  const classes = classNames56("mobius-expandable-text", className);
+  const textContainerClasses = classNames56("mobius-expandable-text__content", {
     "mobius-expandable-text__content--collapsed": !isExpanded
   });
   const textContainerStyle = {
     "--line-clamp": maxLines
   };
-  return /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs31(
     "div",
     {
       ref,
@@ -4547,7 +4198,7 @@ var ExpandableText = ({ ref, ...props }) => {
       "data-testid": "expandable-text",
       ...otherProps,
       children: [
-        /* @__PURE__ */ jsx74(
+        /* @__PURE__ */ jsx67(
           "div",
           {
             ref: textRef,
@@ -4555,10 +4206,10 @@ var ExpandableText = ({ ref, ...props }) => {
             style: textContainerStyle,
             "data-testid": "expandable-text-content",
             "aria-describedby": isCollapsed ? expandButtonId : void 0,
-            children: /* @__PURE__ */ jsx74(TextOrHTML, { elementType: "span", textWrapper: true, text, ...textProps })
+            children: /* @__PURE__ */ jsx67(TextOrHTML, { elementType: "span", textWrapper: true, text, ...textProps })
           }
         ),
-        isCollapsed && /* @__PURE__ */ jsx74(
+        isCollapsed && /* @__PURE__ */ jsx67(
           Accordion,
           {
             showText,
@@ -4578,138 +4229,37 @@ var ExpandableText = ({ ref, ...props }) => {
 };
 ExpandableText.displayName = "ExpandableText";
 
-// src/components/MaskedField/MaskedField.tsx
-import { useCallback as useCallback8, useEffect as useEffect19 } from "react";
-import { useIMask } from "react-imask";
-import { jsx as jsx75 } from "react/jsx-runtime";
-var useAcceptHandler = (onChange, useMaskedValue, name) => {
-  return useCallback8(
-    (maskedValue, maskInstance) => {
-      if (!onChange) {
-        return;
-      }
-      const formattedValue = maskedValue;
-      const rawValue = maskInstance.unmaskedValue;
-      const valueToEmit = useMaskedValue ? formattedValue : rawValue;
-      onChange({
-        target: { name, value: valueToEmit }
-      });
-    },
-    [onChange, useMaskedValue, name]
-  );
-};
-var useCombinedRef = (imaskRef, forwardedRef) => {
-  return useCallback8(
-    (element) => {
-      imaskRef.current = element;
-      if (typeof forwardedRef === "function") {
-        forwardedRef(element);
-      } else if (forwardedRef) {
-        forwardedRef.current = element;
-      }
-    },
-    [imaskRef, forwardedRef]
-  );
-};
-var useBlurHandler = (onBlur, maskRef, useMaskedValue, name) => {
-  return useCallback8(
-    (event) => {
-      if (!onBlur || !maskRef.current) {
-        return;
-      }
-      const formattedValue = maskRef.current.value;
-      const rawValue = maskRef.current.unmaskedValue;
-      const valueToEmit = useMaskedValue ? formattedValue : rawValue;
-      onBlur({
-        ...event,
-        target: { ...event.target, name, value: valueToEmit }
-      });
-    },
-    [onBlur, maskRef, useMaskedValue, name]
-  );
-};
-var ControlledMaskedField = ({
-  mask,
-  useMaskedValue = false,
-  value,
-  onChange,
-  onBlur,
-  name,
-  forwardedRef,
-  ...textFieldProps
-}) => {
-  const onAccept = useAcceptHandler(onChange, useMaskedValue, name);
-  const { ref: imaskRef, maskRef, setValue } = useIMask(mask, { onAccept });
-  const combinedRef = useCombinedRef(imaskRef, forwardedRef);
-  const handleBlur = useBlurHandler(onBlur, maskRef, useMaskedValue, name);
-  useEffect19(() => {
-    if (!maskRef.current) {
-      return;
-    }
-    const stringValue = value.toString();
-    const currentMasked = maskRef.current.value;
-    const currentUnmasked = maskRef.current.unmaskedValue;
-    if (currentMasked !== stringValue && currentUnmasked !== stringValue) {
-      setValue(stringValue);
-    }
-  }, [value, maskRef, setValue, imaskRef]);
-  return /* @__PURE__ */ jsx75(
-    TextField,
-    {
-      ...textFieldProps,
-      ref: combinedRef,
-      name,
-      onBlur: handleBlur
-    }
-  );
-};
-var UncontrolledMaskedField = ({
-  mask,
-  useMaskedValue = false,
-  defaultValue,
-  onChange,
-  onBlur,
-  name,
-  forwardedRef,
-  ...textFieldProps
-}) => {
-  const onAccept = useAcceptHandler(onChange, useMaskedValue, name);
-  const { ref: imaskRef, maskRef } = useIMask(mask, { onAccept });
-  const combinedRef = useCombinedRef(imaskRef, forwardedRef);
-  const handleBlur = useBlurHandler(onBlur, maskRef, useMaskedValue, name);
-  return /* @__PURE__ */ jsx75(
-    TextField,
+// src/components/MaskedField/index.tsx
+import loadable from "@loadable/component";
+import { jsx as jsx68 } from "react/jsx-runtime";
+var LoadableMaskedField = loadable(() => import("./MaskedField-CX4GV6JS.js"), {
+  resolveComponent: (mod) => mod.MaskedField
+});
+function MaskedField(props) {
+  const {
+    mask: _mask,
+    useMaskedValue: _useMaskedValue,
+    "data-testid": _dataTestId,
+    ref: forwardedRef,
+    ...textFieldProps
+  } = props;
+  return /* @__PURE__ */ jsx68(
+    LoadableMaskedField,
     {
-      ...textFieldProps,
-      ref: combinedRef,
-      name,
-      onBlur: handleBlur,
-      defaultValue: defaultValue?.toString()
+      ...props,
+      fallback: /* @__PURE__ */ jsx68(
+        TextField,
+        {
+          ...textFieldProps,
+          ref: forwardedRef,
+          type: "text",
+          isDisabled: true,
+          isReadOnly: true
+        }
+      )
     }
   );
-};
-var MaskedField = ({ ref: forwardedRef, ...props }) => {
-  const { value, defaultValue, ...rest } = props;
-  if ("value" in props) {
-    return /* @__PURE__ */ jsx75(
-      ControlledMaskedField,
-      {
-        ...rest,
-        value: value ?? "",
-        forwardedRef
-      }
-    );
-  } else {
-    return /* @__PURE__ */ jsx75(
-      UncontrolledMaskedField,
-      {
-        ...rest,
-        defaultValue,
-        forwardedRef
-      }
-    );
-  }
-};
+}
 MaskedField.displayName = "MaskedField";
 export {
   Accordion,
@@ -4771,6 +4321,7 @@ export {
   Toaster,
   Trust,
   VisuallyHidden,
+  buildOptionTestId,
   convertToDateFormat,
   isValidDate,
   toast,