@simplybusiness/mobius 6.4.4 → 6.5.0

package/dist/esm/index.js

@@ -908,58 +908,29 @@ Accordion.displayName = "Accordion";
 
 // src/components/AddressLookup/AddressLookup.tsx
 import { search } from "@simplybusiness/icons";
-import { forwardRef as forwardRef8, useCallback as useCallback4, useState as useState10 } from "react";
+import { forwardRef as forwardRef7, useCallback as useCallback4, useState as useState10 } from "react";
 
 // src/components/Combobox/Combobox.tsx
-import classNames13 from "classnames/dedupe";
-import { forwardRef as forwardRef7, useEffect as useEffect14, useId as useId4, useRef as useRef7, useState as useState9 } from "react";
+import classNames12 from "classnames/dedupe";
+import { forwardRef as forwardRef6, useEffect as useEffect14, useId as useId4, useRef as useRef7, useState as useState9 } from "react";
 
 // src/components/TextField/TextField.tsx
-import classNames10 from "classnames/dedupe";
-import { forwardRef as forwardRef6 } from "react";
+import classNames9 from "classnames/dedupe";
+import { forwardRef as forwardRef5 } from "react";
 
 // src/components/ErrorMessage/ErrorMessage.tsx
 import { error } from "@simplybusiness/icons";
-import classNames6 from "classnames/dedupe";
-
-// src/components/Text/Text.tsx
-import { forwardRef as forwardRef3 } from "react";
 import classNames5 from "classnames/dedupe";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var getElementType = (variant, elementType) => {
-  if (variant) {
-    return ["h1", "h2", "h3", "h4"].includes(variant) ? variant : "p";
-  }
-  return elementType || "p";
-};
-var Text = forwardRef3(
-  ({ elementType: Component = "p", ...props }, ref) => {
-    const { variant, className, spacing, ...otherProps } = props;
-    const elementType = getElementType(variant, Component);
-    const variantType = variant || elementType;
-    const classes = classNames5(
-      "mobius",
-      "mobius-text",
-      { [`--is-${variantType}`]: variantType },
-      { [`--has-line-height-${spacing}`]: spacing },
-      className
-    );
-    return /* @__PURE__ */ jsx5(Component, { ref, ...otherProps, className: classes });
-  }
-);
-Text.displayName = "Text";
-
-// src/components/ErrorMessage/ErrorMessage.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var ErrorMessage = ({
   id,
   errorMessage,
   className
 }) => {
-  const classes = classNames6("mobius", "mobius-error-message", className);
+  const classes = classNames5("mobius", "mobius-error-message", className);
   if (!errorMessage) return null;
   return /* @__PURE__ */ jsxs4("div", { id, className: classes, "data-testid": "ErrorMessage", role: "alert", children: [
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx5(
       Icon,
       {
         icon: error,
@@ -967,32 +938,39 @@ var ErrorMessage = ({
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ jsx6(Text, { elementType: "span", className: "mobius-error-message__text", children: errorMessage })
+    /* @__PURE__ */ jsx5(
+      TextOrHTML,
+      {
+        elementType: "span",
+        className: "mobius-error-message__text",
+        text: errorMessage
+      }
+    )
   ] });
 };
 ErrorMessage.displayName = "ErrorMessage";
 
 // src/components/Label/Label.tsx
-import { forwardRef as forwardRef4 } from "react";
-import classNames7 from "classnames/dedupe";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var Label = forwardRef4(
+import { forwardRef as forwardRef3 } from "react";
+import classNames6 from "classnames/dedupe";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var Label = forwardRef3(
   (props, ref) => {
     const { elementType: Element = "label", children, ...otherProps } = props;
-    const classes = classNames7("mobius", "mobius-label", props.className);
+    const classes = classNames6("mobius", "mobius-label", props.className);
     otherProps.className = classes;
-    return /* @__PURE__ */ jsx7(Element, { ref, ...otherProps, className: classes, children });
+    return /* @__PURE__ */ jsx6(Element, { ref, ...otherProps, className: classes, children });
   }
 );
 Label.displayName = "Label";
 
 // src/components/Stack/Stack.tsx
-import { forwardRef as forwardRef5 } from "react";
-import classNames8 from "classnames/dedupe";
-import { jsx as jsx8 } from "react/jsx-runtime";
-var Stack = forwardRef5((props, ref) => {
+import { forwardRef as forwardRef4 } from "react";
+import classNames7 from "classnames/dedupe";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var Stack = forwardRef4((props, ref) => {
   const { elementType: Element = "div", gap, ...otherProps } = props;
-  const classes = classNames8(
+  const classes = classNames7(
     "mobius",
     "mobius-stack",
     {
@@ -1000,17 +978,17 @@ var Stack = forwardRef5((props, ref) => {
     },
     otherProps.className
   );
-  return /* @__PURE__ */ jsx8(Element, { ref, ...otherProps, className: classes });
+  return /* @__PURE__ */ jsx7(Element, { ref, ...otherProps, className: classes });
 });
 Stack.displayName = "Stack";
 
 // src/components/TextField/adornmentWithClassName.ts
-import classNames9 from "classnames";
+import classNames8 from "classnames";
 import { cloneElement } from "react";
 var adornmentWithClassName = (component, validationClasses, className) => {
   if (!component) return null;
   return cloneElement(component, {
-    className: classNames9(
+    className: classNames8(
       component.props.className,
       validationClasses,
       className
@@ -1019,8 +997,8 @@ var adornmentWithClassName = (component, validationClasses, className) => {
 };
 
 // src/components/TextField/TextField.tsx
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
-var TextField = forwardRef6((props, ref) => {
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+var TextField = forwardRef5((props, ref) => {
   const {
     isDisabled,
     type = "text",
@@ -1054,29 +1032,29 @@ var TextField = forwardRef6((props, ref) => {
     "--is-hidden": hidden,
     [className || ""]: true
   };
-  const sharedClasses = classNames10(validationClasses, textfieldClasses);
-  const labelClasses = classNames10(
+  const sharedClasses = classNames9(validationClasses, textfieldClasses);
+  const labelClasses = classNames9(
     {
       "--is-disabled": isDisabled
     },
     validationClasses
   );
-  const containerClasses = classNames10(
+  const containerClasses = classNames9(
     "mobius",
     "mobius-text-field",
     sharedClasses
   );
-  const inputClasses = classNames10(
+  const inputClasses = classNames9(
     "mobius",
     "mobius-text-field__input",
     sharedClasses
   );
-  const inputWrapperClasses = classNames10(
+  const inputWrapperClasses = classNames9(
     "mobius-text-field__input-wrapper",
     sharedClasses
   );
   return /* @__PURE__ */ jsxs5(Stack, { gap: "xs", className: containerClasses, children: [
-    label && !hidden && /* @__PURE__ */ jsx9(Label, { ...labelProps, className: labelClasses, children: label }),
+    label && !hidden && /* @__PURE__ */ jsx8(Label, { ...labelProps, className: labelClasses, children: label }),
     /* @__PURE__ */ jsxs5("div", { className: "mobius-text-field__inner-container", children: [
       adornmentWithClassName(
         prefixOutside,
@@ -1089,7 +1067,7 @@ var TextField = forwardRef6((props, ref) => {
           labelClasses,
           "mobius-text-field__prefix-inside"
         ),
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx8(
           "input",
           {
             ...otherProps,
@@ -1111,14 +1089,14 @@ var TextField = forwardRef6((props, ref) => {
         "mobius-text-field__suffix-outside"
       )
     ] }),
-    children && /* @__PURE__ */ jsx9("div", { className: "mobius-text-field__children", children }),
-    /* @__PURE__ */ jsx9(ErrorMessage, { ...errorMessageProps, errorMessage })
+    children && /* @__PURE__ */ jsx8("div", { className: "mobius-text-field__children", children }),
+    /* @__PURE__ */ jsx8(ErrorMessage, { ...errorMessageProps, errorMessage })
   ] });
 });
 TextField.displayName = "TextField";
 
 // src/components/VisuallyHidden/VisuallyHidden.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function VisuallyHidden(props) {
   const {
     className,
@@ -1126,7 +1104,7 @@ function VisuallyHidden(props) {
     elementType: Component = "div",
     ...otherProps
   } = props;
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx9(
     Component,
     {
       className,
@@ -1149,11 +1127,11 @@ function VisuallyHidden(props) {
 }
 
 // src/components/Combobox/Listbox.tsx
-import classNames12 from "classnames";
+import classNames11 from "classnames";
 
 // src/components/Combobox/Option.tsx
 import { useEffect as useEffect12, useRef as useRef6 } from "react";
-import classNames11 from "classnames/dedupe";
+import classNames10 from "classnames/dedupe";
 
 // src/components/Combobox/utils.tsx
 function isOptionGroup(options) {
@@ -1177,7 +1155,7 @@ function filterOptions(options, inputValue) {
 }
 
 // src/components/Combobox/Option.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var Option = ({
   option,
   isHighlighted,
@@ -1191,7 +1169,7 @@ var Option = ({
       optionRef.current.scrollIntoView({ block: "nearest" });
     }
   }, [isHighlighted]);
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx10(
     "li",
     {
       ref: optionRef,
@@ -1199,17 +1177,17 @@ var Option = ({
       id,
       "aria-selected": isHighlighted,
       onMouseDown: () => onOptionSelect(option),
-      className: classNames11("mobius-combobox__option", "has-pii", {
+      className: classNames10("mobius-combobox__option", "has-pii", {
         "mobius-combobox__option--is-highlighted": isHighlighted
       }),
-      children: OptionComponent ? /* @__PURE__ */ jsx11(OptionComponent, { option, isHighlighted }) : getOptionLabel(option)
+      children: OptionComponent ? /* @__PURE__ */ jsx10(OptionComponent, { option, isHighlighted }) : getOptionLabel(option)
     },
     getOptionValue(option)
   );
 };
 
 // src/components/Combobox/Listbox.tsx
-import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 var Listbox = ({
   id,
   isOpen = false,
@@ -1219,7 +1197,7 @@ var Listbox = ({
   onOptionSelect,
   optionComponent
 }) => {
-  const classes = classNames12("mobius-combobox__list", {
+  const classes = classNames11("mobius-combobox__list", {
     "mobius-combobox__list--hidden": !isOpen
   });
   function getOptionId(option, groupIndex, index) {
@@ -1229,19 +1207,19 @@ var Listbox = ({
     return isOptionGroup(options) ? `${id}-option-${groupIndex}-${index}` : `${id}-option-${index}`;
   }
   if (!isOpen) {
-    return /* @__PURE__ */ jsx12("div", { role: "listbox", id, className: classes });
+    return /* @__PURE__ */ jsx11("div", { role: "listbox", id, className: classes });
   }
   if (options && options.length === 0) {
-    return /* @__PURE__ */ jsx12("div", { role: "listbox", id, className: classes, children: /* @__PURE__ */ jsx12("div", { className: "mobius-combobox__no-options", children: "No options" }) });
+    return /* @__PURE__ */ jsx11("div", { role: "listbox", id, className: classes, children: /* @__PURE__ */ jsx11("div", { className: "mobius-combobox__no-options", children: "No options" }) });
   }
-  return /* @__PURE__ */ jsx12("div", { role: "listbox", id, className: classes, children: isOptionGroup(options) ? options.map((option, groupIndex) => /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsx11("div", { role: "listbox", id, className: classes, children: isOptionGroup(options) ? options.map((option, groupIndex) => /* @__PURE__ */ jsxs6(
     "ul",
     {
       role: "group",
       "aria-labelledby": `${id}-group-${groupIndex}`,
       className: "mobius-combobox__group",
       children: [
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx11(
           "li",
           {
             role: "presentation",
@@ -1250,7 +1228,7 @@ var Listbox = ({
             children: option.heading
           }
         ),
-        option.options.map((groupOption, index) => /* @__PURE__ */ jsx12(
+        option.options.map((groupOption, index) => /* @__PURE__ */ jsx11(
           Option,
           {
             option: groupOption,
@@ -1264,7 +1242,7 @@ var Listbox = ({
       ]
     },
     option.heading
-  )) : typeof options !== "undefined" ? options.map((option, index) => /* @__PURE__ */ jsx12(
+  )) : typeof options !== "undefined" ? options.map((option, index) => /* @__PURE__ */ jsx11(
     Option,
     {
       option,
@@ -1437,8 +1415,8 @@ function useComboboxOptions({
 }
 
 // src/components/Combobox/Combobox.tsx
-import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
-var ComboboxInner = forwardRef7(
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+var ComboboxInner = forwardRef6(
   (props, ref) => {
     const {
       id,
@@ -1609,7 +1587,7 @@ var ComboboxInner = forwardRef7(
         setIsOpen(!!filteredOptions && filteredOptions.length > 0);
       }
     }, [filteredOptions, asyncOptions, isChanging]);
-    const classes = classNames13(
+    const classes = classNames12(
       "mobius mobius-combobox",
       {
         "mobius-combobox--is-expanded": isOpen,
@@ -1619,7 +1597,7 @@ var ComboboxInner = forwardRef7(
       className
     );
     return /* @__PURE__ */ jsxs7("div", { id, "data-testid": "mobius-combobox__wrapper", className: classes, children: [
-      isLoading && /* @__PURE__ */ jsx13(
+      isLoading && /* @__PURE__ */ jsx12(
         VisuallyHidden,
         {
           role: "status",
@@ -1630,7 +1608,7 @@ var ComboboxInner = forwardRef7(
           children: "Loading options"
         }
       ),
-      /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx12(
         TextField,
         {
           ...otherProps,
@@ -1654,7 +1632,7 @@ var ComboboxInner = forwardRef7(
           errorMessage: errorMessage || error3?.message || void 0
         }
       ),
-      /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx12(
         Listbox,
         {
           id: listboxId,
@@ -1678,7 +1656,7 @@ function isLoqateErrorResponse(response) {
 }
 
 // src/components/AddressLookup/AddressLookup.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function optionsFromResponse({ Items }, addressLookupService) {
   if (!Items || !Array.isArray(Items)) {
     throw Error("No address found");
@@ -1698,7 +1676,7 @@ function optionsFromResponse({ Items }, addressLookupService) {
     }
   }));
 }
-var AddressLookup = forwardRef8(
+var AddressLookup = forwardRef7(
   ({
     addressLookupService,
     onAddressSelected,
@@ -1735,7 +1713,7 @@ var AddressLookup = forwardRef8(
       return addressLookupService.get(selected.id).then(onAddressSelected).catch(setError);
     };
     const realErrorMessage = error3 && "An error occurred" || errorMessage;
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx13(
       Combobox,
       {
         ...otherProps,
@@ -1743,7 +1721,7 @@ var AddressLookup = forwardRef8(
         onSelected: handleSelected,
         asyncOptions,
         errorMessage: realErrorMessage,
-        icon: /* @__PURE__ */ jsx14(Icon, { icon: search })
+        icon: /* @__PURE__ */ jsx13(Icon, { icon: search })
       }
     );
   }
@@ -1835,13 +1813,13 @@ var LoqateAddressLookupService = class {
 
 // src/components/Alert/Alert.tsx
 import { circleInfo, circleTick, error as error2, warning } from "@simplybusiness/icons";
-import classNames14 from "classnames/dedupe";
-import { forwardRef as forwardRef9 } from "react";
-import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+import classNames13 from "classnames/dedupe";
+import { forwardRef as forwardRef8 } from "react";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 function isAlertVariant(value) {
   return value === "info" || value === "success" || value === "warning" || value === "error";
 }
-var Alert = forwardRef9(
+var Alert = forwardRef8(
   (props, ref) => {
     const {
       elementType: Element = "div",
@@ -1854,7 +1832,7 @@ var Alert = forwardRef9(
     if (!show) return null;
     const variant = variantProp && isAlertVariant(variantProp) ? variantProp : "info";
     const colorValue = variant === "success" ? `var(--color-valid)` : `var(--color-${variant})`;
-    const classes = classNames14(
+    const classes = classNames13(
       "mobius",
       "mobius-alert",
       {
@@ -1872,14 +1850,14 @@ var Alert = forwardRef9(
       warning,
       error: error2
     };
-    const headerClasses = classNames14("mobius", "mobius-alert__header");
-    const iconClasses = classNames14("mobius", "mobius-alert__icon");
-    const contentClasses = classNames14("mobius", "mobius-alert__content");
+    const headerClasses = classNames13("mobius", "mobius-alert__header");
+    const iconClasses = classNames13("mobius", "mobius-alert__icon");
+    const contentClasses = classNames13("mobius", "mobius-alert__content");
     return /* @__PURE__ */ jsxs8(Element, { ref, role: "alert", ...otherProps, className: classes, children: [
-      /* @__PURE__ */ jsx15("span", { className: iconClasses, children: /* @__PURE__ */ jsx15(Icon, { icon: icon[variant], color: colorValue }) }),
+      /* @__PURE__ */ jsx14("span", { className: iconClasses, children: /* @__PURE__ */ jsx14(Icon, { icon: icon[variant], color: colorValue }) }),
       /* @__PURE__ */ jsxs8("div", { children: [
-        header && /* @__PURE__ */ jsx15("p", { className: headerClasses, children: header }),
-        /* @__PURE__ */ jsx15("div", { className: contentClasses, children })
+        header && /* @__PURE__ */ jsx14("p", { className: headerClasses, children: header }),
+        /* @__PURE__ */ jsx14("div", { className: contentClasses, children })
       ] })
     ] });
   }
@@ -1887,10 +1865,10 @@ var Alert = forwardRef9(
 Alert.displayName = "Alert";
 
 // src/components/Box/Box.tsx
-import { forwardRef as forwardRef10 } from "react";
-import classNames15 from "classnames/dedupe";
-import { jsx as jsx16 } from "react/jsx-runtime";
-var Box = forwardRef10(
+import { forwardRef as forwardRef9 } from "react";
+import classNames14 from "classnames/dedupe";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var Box = forwardRef9(
   (props, ref) => {
     const {
       elementType: Element = "div",
@@ -1916,7 +1894,7 @@ var Box = forwardRef10(
       style,
       ...otherProps
     } = props;
-    const classes = classNames15("mobius", "mobius-box", otherProps.className);
+    const classes = classNames14("mobius", "mobius-box", otherProps.className);
     const styleProps = filterUndefinedProps({
       padding: getSpacingValue(padding),
       paddingInline: getSpacingValue(paddingInline || paddingX),
@@ -1933,7 +1911,7 @@ var Box = forwardRef10(
       height,
       ...style
     });
-    return /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx15(
       Element,
       {
         ref,
@@ -1947,20 +1925,20 @@ var Box = forwardRef10(
 Box.displayName = "Box";
 
 // src/components/Breadcrumbs/Breadcrumbs.tsx
-import { forwardRef as forwardRef11, Children, cloneElement as cloneElement2 } from "react";
-import classNames16 from "classnames/dedupe";
-import { jsx as jsx17 } from "react/jsx-runtime";
-var Breadcrumbs = forwardRef11((props, ref) => {
+import { forwardRef as forwardRef10, Children, cloneElement as cloneElement2 } from "react";
+import classNames15 from "classnames/dedupe";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var Breadcrumbs = forwardRef10((props, ref) => {
   const { "aria-label": ariaLabel = "Breadcrumbs" } = props;
   const { navProps } = { navProps: { "aria-label": ariaLabel } };
   const { children, ...otherProps } = props;
   const childArray = Children.toArray(children);
-  const classes = classNames16(
+  const classes = classNames15(
     "mobius",
     "mobius-breadcrumb",
     otherProps.className
   );
-  return /* @__PURE__ */ jsx17("nav", { ref, ...otherProps, ...navProps, className: classes, children: /* @__PURE__ */ jsx17("ul", { children: childArray.map(
+  return /* @__PURE__ */ jsx16("nav", { ref, ...otherProps, ...navProps, className: classes, children: /* @__PURE__ */ jsx16("ul", { children: childArray.map(
     (child, i) => cloneElement2(
       child,
       {
@@ -1973,16 +1951,16 @@ var Breadcrumbs = forwardRef11((props, ref) => {
 Breadcrumbs.displayName = "Breadcrumbs";
 
 // src/components/Breadcrumbs/BreadcrumbItem.tsx
-import { forwardRef as forwardRef12, cloneElement as cloneElement3, Children as Children2 } from "react";
-import classNames17 from "classnames/dedupe";
-import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
-var BreadcrumbItem = forwardRef12((props, ref) => {
+import { forwardRef as forwardRef11, cloneElement as cloneElement3, Children as Children2 } from "react";
+import classNames16 from "classnames/dedupe";
+import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
+var BreadcrumbItem = forwardRef11((props, ref) => {
   const {
     isDisabled = false,
     isCurrent = false,
     "aria-current": ariaCurrent = "page",
     children,
-    separator = /* @__PURE__ */ jsx18(Box, { className: "mobius-breadcrumb__separator", "aria-hidden": "true", children: ">" }),
+    separator = /* @__PURE__ */ jsx17(Box, { className: "mobius-breadcrumb__separator", "aria-hidden": "true", children: ">" }),
     ...otherProps
   } = props;
   const { itemProps } = {
@@ -1992,12 +1970,12 @@ var BreadcrumbItem = forwardRef12((props, ref) => {
       ...otherProps
     }
   };
-  const classes = classNames17(
+  const classes = classNames16(
     "mobius",
     "mobius-breadcrumb__item",
     props.className
   );
-  const child = typeof children === "string" ? /* @__PURE__ */ jsx18("span", { ...itemProps, children }) : Children2.only(children);
+  const child = typeof children === "string" ? /* @__PURE__ */ jsx17("span", { ...itemProps, children }) : Children2.only(children);
   return /* @__PURE__ */ jsxs9("li", { className: classes, children: [
     cloneElement3(child, {
       ...child.props,
@@ -2010,32 +1988,32 @@ var BreadcrumbItem = forwardRef12((props, ref) => {
 BreadcrumbItem.displayName = "BreadcrumbItem";
 
 // src/components/Button/Button.tsx
-import { forwardRef as forwardRef13 } from "react";
-import classNames18 from "classnames/dedupe";
+import { forwardRef as forwardRef12 } from "react";
+import classNames17 from "classnames/dedupe";
 
 // src/components/Button/Loading.tsx
 import { loading } from "@simplybusiness/icons";
-import { Fragment, jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
 var Loading = (props) => {
   const { children } = props;
   return /* @__PURE__ */ jsxs10(Fragment, { children: [
-    /* @__PURE__ */ jsx19("div", { className: "mobius-button__icon-wrapper", children: /* @__PURE__ */ jsx19(Icon, { icon: loading, spin: true, size: "md" }) }),
-    /* @__PURE__ */ jsx19(VisuallyHidden, { className: "mobius-button__loading-text", children: "Loading" }),
+    /* @__PURE__ */ jsx18("div", { className: "mobius-button__icon-wrapper", children: /* @__PURE__ */ jsx18(Icon, { icon: loading, spin: true, size: "md" }) }),
+    /* @__PURE__ */ jsx18(VisuallyHidden, { className: "mobius-button__loading-text", children: "Loading" }),
     children
   ] });
 };
 
 // src/components/Button/Success.tsx
 import { tick } from "@simplybusiness/icons";
-import { Fragment as Fragment2, jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
 var Success = () => /* @__PURE__ */ jsxs11(Fragment2, { children: [
-  /* @__PURE__ */ jsx20("div", { className: "mobius-button__icon-wrapper", children: /* @__PURE__ */ jsx20(Icon, { icon: tick, size: "md" }) }),
-  /* @__PURE__ */ jsx20(VisuallyHidden, { className: "mobius-button__success-text", children: "Success" })
+  /* @__PURE__ */ jsx19("div", { className: "mobius-button__icon-wrapper", children: /* @__PURE__ */ jsx19(Icon, { icon: tick, size: "md" }) }),
+  /* @__PURE__ */ jsx19(VisuallyHidden, { className: "mobius-button__success-text", children: "Success" })
 ] });
 
 // src/components/Button/Button.tsx
-import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
-var Button = forwardRef13((props, ref) => {
+import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
+var Button = forwardRef12((props, ref) => {
   const {
     children,
     elementType: Component = "button",
@@ -2063,7 +2041,7 @@ var Button = forwardRef13((props, ref) => {
     return variant;
   };
   const buttonVariant = getVariant(variant);
-  const classes = classNames18(
+  const classes = classNames17(
     "mobius",
     "mobius-button",
     `--variant-${buttonVariant}`,
@@ -2079,19 +2057,19 @@ var Button = forwardRef13((props, ref) => {
   return (
     // @ts-expect-error - ref type is not correct
     /* @__PURE__ */ jsxs12(Component, { ref, ...buttonProps, ...otherProps, children: [
-      isLoading ? /* @__PURE__ */ jsx21(Loading, { children }) : children,
-      isSuccess && !isLoading && /* @__PURE__ */ jsx21(Success, {})
+      isLoading ? /* @__PURE__ */ jsx20(Loading, { children }) : children,
+      isSuccess && !isLoading && /* @__PURE__ */ jsx20(Success, {})
     ] })
   );
 });
 Button.displayName = "Button";
 
 // src/components/Checkbox/Checkbox.tsx
-import { forwardRef as forwardRef14, useRef as useRef8, useId as useId5, useState as useState11, useEffect as useEffect15 } from "react";
-import classNames19 from "classnames/dedupe";
+import { forwardRef as forwardRef13, useRef as useRef8, useId as useId5, useState as useState11, useEffect as useEffect15 } from "react";
+import classNames18 from "classnames/dedupe";
 import { squareTick, square } from "@simplybusiness/icons";
-import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
-var Checkbox = forwardRef14((props, ref) => {
+import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+var Checkbox = forwardRef13((props, ref) => {
   const {
     id,
     label,
@@ -2125,7 +2103,7 @@ var Checkbox = forwardRef14((props, ref) => {
     validationState,
     isInvalid
   });
-  const sharedClasses = classNames19(
+  const sharedClasses = classNames18(
     {
       "--is-disabled": isDisabled,
       "--is-selected": checked,
@@ -2134,15 +2112,15 @@ var Checkbox = forwardRef14((props, ref) => {
     },
     validationClasses
   );
-  const wrapperClasses = classNames19(
+  const wrapperClasses = classNames18(
     "mobius",
     "mobius-checkbox",
     sharedClasses,
     className
   );
-  const labelClasses = classNames19("mobius-checkbox__label", sharedClasses);
-  const inputClasses = classNames19("mobius-checkbox__input", sharedClasses);
-  const iconClasses = classNames19("mobius-checkbox__icon", sharedClasses);
+  const labelClasses = classNames18("mobius-checkbox__label", sharedClasses);
+  const inputClasses = classNames18("mobius-checkbox__input", sharedClasses);
+  const iconClasses = classNames18("mobius-checkbox__icon", sharedClasses);
   const errorMessageId = useId5();
   const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
   const describedBy = spaceDelimitedList([
@@ -2158,7 +2136,7 @@ var Checkbox = forwardRef14((props, ref) => {
   };
   return /* @__PURE__ */ jsxs13(Stack, { gap: "xs", className: wrapperClasses, children: [
     /* @__PURE__ */ jsxs13("label", { className: labelClasses, children: [
-      /* @__PURE__ */ jsx22(
+      /* @__PURE__ */ jsx21(
         "input",
         {
           "aria-describedby": describedBy,
@@ -2179,7 +2157,7 @@ var Checkbox = forwardRef14((props, ref) => {
           ...rest
         }
       ),
-      /* @__PURE__ */ jsx22(
+      /* @__PURE__ */ jsx21(
         Icon,
         {
           icon: checked ? squareTick : square,
@@ -2187,27 +2165,27 @@ var Checkbox = forwardRef14((props, ref) => {
           className: iconClasses
         }
       ),
-      /* @__PURE__ */ jsx22("span", { id: labelId, className: "mobius-checkbox__visible-label", children: label })
+      /* @__PURE__ */ jsx21("span", { id: labelId, className: "mobius-checkbox__visible-label", children: label })
     ] }),
-    /* @__PURE__ */ jsx22(ErrorMessage, { id: errorMessageId, errorMessage })
+    /* @__PURE__ */ jsx21(ErrorMessage, { id: errorMessageId, errorMessage })
   ] });
 });
 Checkbox.displayName = "Checkbox";
 
 // src/components/Checkbox/CheckboxGroup.tsx
-import classNames20 from "classnames/dedupe";
+import classNames19 from "classnames/dedupe";
 import {
   Children as Children3,
   cloneElement as cloneElement4,
-  forwardRef as forwardRef15,
+  forwardRef as forwardRef14,
   isValidElement,
   useEffect as useEffect16,
   useId as useId6,
   useRef as useRef9,
   useState as useState12
 } from "react";
-import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
-var CheckboxGroup = forwardRef15((props, ref) => {
+import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
+var CheckboxGroup = forwardRef14((props, ref) => {
   const {
     label,
     isDisabled = false,
@@ -2238,7 +2216,7 @@ var CheckboxGroup = forwardRef15((props, ref) => {
       isInitializedRef.current = true;
     }
   }, [defaultValue]);
-  const checkboxGroupClasses = classNames20(
+  const checkboxGroupClasses = classNames19(
     "mobius",
     "mobius-checkbox-group",
     className,
@@ -2253,7 +2231,7 @@ var CheckboxGroup = forwardRef15((props, ref) => {
     validationState,
     isInvalid
   });
-  const labelClasses = classNames20(
+  const labelClasses = classNames19(
     {
       "--is-disabled": isDisabled
     },
@@ -2300,8 +2278,8 @@ var CheckboxGroup = forwardRef15((props, ref) => {
         "--checkbox-items-per-row": itemsPerRow || Children3.count(children)
       },
       children: [
-        label && /* @__PURE__ */ jsx23(Label, { elementType: "span", id: labelId, className: labelClasses, children: label }),
-        /* @__PURE__ */ jsx23("div", { className: "mobius-checkbox-group__wrapper", children: childrenArray.map((child) => {
+        label && /* @__PURE__ */ jsx22(Label, { elementType: "span", id: labelId, className: labelClasses, children: label }),
+        /* @__PURE__ */ jsx22("div", { className: "mobius-checkbox-group__wrapper", children: childrenArray.map((child) => {
           if (isValidElement(child)) {
             const isLastItem = child === lastCheckbox;
             const isChildDisabled = isDisabled || lastItemDisables && lastCheckboxIsChecked && !isLastItem;
@@ -2322,7 +2300,7 @@ var CheckboxGroup = forwardRef15((props, ref) => {
           }
           return child;
         }) }),
-        errorMessage && /* @__PURE__ */ jsx23(ErrorMessage, { id: errorMessageId, errorMessage })
+        errorMessage && /* @__PURE__ */ jsx22(ErrorMessage, { id: errorMessageId, errorMessage })
       ]
     }
   );
@@ -2330,24 +2308,24 @@ var CheckboxGroup = forwardRef15((props, ref) => {
 CheckboxGroup.displayName = "CheckboxGroup";
 
 // src/components/Container/Container.tsx
-import { forwardRef as forwardRef16 } from "react";
-import classNames21 from "classnames/dedupe";
-import { jsx as jsx24 } from "react/jsx-runtime";
-var Container = forwardRef16((props, ref) => {
+import { forwardRef as forwardRef15 } from "react";
+import classNames20 from "classnames/dedupe";
+import { jsx as jsx23 } from "react/jsx-runtime";
+var Container = forwardRef15((props, ref) => {
   const { elementType: Element = "div", size = "md", ...otherProps } = props;
-  const classes = classNames21(
+  const classes = classNames20(
     "mobius",
     "mobius-container",
     sizeClasses(size),
     otherProps.className
   );
-  return /* @__PURE__ */ jsx24(Element, { ref, ...otherProps, className: classes });
+  return /* @__PURE__ */ jsx23(Element, { ref, ...otherProps, className: classes });
 });
 Container.displayName = "Container";
 
 // src/components/DateField/DateField.tsx
-import classNames22 from "classnames/dedupe";
-import { forwardRef as forwardRef17, useEffect as useEffect17, useRef as useRef10, useState as useState13 } from "react";
+import classNames21 from "classnames/dedupe";
+import { forwardRef as forwardRef16, useEffect as useEffect17, useRef as useRef10, useState as useState13 } from "react";
 
 // src/components/DateField/validation.ts
 var convertToDateFormat = (date, format) => {
@@ -2382,9 +2360,9 @@ var isValidDate = (date, format = "yyyy-mm-dd") => {
 };
 
 // src/components/DateField/DateField.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var MIN_MAX_ERROR = '"min" value should not be greater than "max" value.';
-var DateField = forwardRef17(
+var DateField = forwardRef16(
   (props, ref) => {
     const {
       min,
@@ -2399,7 +2377,7 @@ var DateField = forwardRef17(
     const [error3, setError] = useState13(errorMessage);
     const [isInvalid, setIsInvalid] = useState13(void 0);
     const localRef = useRef10(null);
-    const classes = classNames22("mobius-date-field", className);
+    const classes = classNames21("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;
@@ -2445,7 +2423,7 @@ var DateField = forwardRef17(
       validate();
       otherProps.onBlur?.(event);
     };
-    return /* @__PURE__ */ jsx25(
+    return /* @__PURE__ */ jsx24(
       TextField,
       {
         ref: mergeRefs([localRef, ref]),
@@ -2466,38 +2444,38 @@ var DateField = forwardRef17(
 DateField.displayName = "DateField";
 
 // src/components/Divider/Divider.tsx
-import classNames23 from "classnames/dedupe";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import classNames22 from "classnames/dedupe";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var Divider = ({
   "aria-orientation": ariaOrientation = "horizontal",
   className,
   ...rest
 }) => {
-  const classes = classNames23("mobius", "mobius-divider", className);
-  return /* @__PURE__ */ jsx26(
+  const classes = classNames22("mobius", "mobius-divider", className);
+  return /* @__PURE__ */ jsx25(
     "div",
     {
       className: classes,
       role: "separator",
       "aria-orientation": ariaOrientation,
       ...rest,
-      children: /* @__PURE__ */ jsx26("div", { className: "mobius-divider__inner" })
+      children: /* @__PURE__ */ jsx25("div", { className: "mobius-divider__inner" })
     }
   );
 };
 Divider.displayName = "Divider";
 
 // src/components/Drawer/Content.tsx
-import { forwardRef as forwardRef18 } from "react";
-import { jsx as jsx27 } from "react/jsx-runtime";
-var Content = forwardRef18(
-  ({ children, ...otherProps }, ref) => /* @__PURE__ */ jsx27("div", { ref, ...otherProps, className: "mobius-drawer__content", children })
+import { forwardRef as forwardRef17 } from "react";
+import { jsx as jsx26 } from "react/jsx-runtime";
+var Content = forwardRef17(
+  ({ children, ...otherProps }, ref) => /* @__PURE__ */ jsx26("div", { ref, ...otherProps, className: "mobius-drawer__content", children })
 );
 Content.displayName = "Content";
 
 // src/components/Drawer/Drawer.tsx
-import classNames24 from "classnames/dedupe";
-import { forwardRef as forwardRef19, useEffect as useEffect18, useId as useId7, useMemo, useRef as useRef11, useState as useState14 } from "react";
+import classNames23 from "classnames/dedupe";
+import { forwardRef as forwardRef18, useEffect as useEffect18, useId as useId7, useMemo, useRef as useRef11, useState as useState14 } from "react";
 
 // src/components/Drawer/DrawerContext.tsx
 import { createContext } from "react";
@@ -2509,9 +2487,9 @@ var DrawerContext = createContext({
 });
 
 // src/components/Drawer/Drawer.tsx
-import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
 var TRANSITION_CSS_VARIABLE = "--drawer-transition-duration";
-var Drawer = forwardRef19((props, ref) => {
+var Drawer = forwardRef18((props, ref) => {
   const {
     isOpen,
     className,
@@ -2536,7 +2514,7 @@ var Drawer = forwardRef19((props, ref) => {
   });
   const hiddenId = `dialog-screen-reader-announce-${useId7()}`;
   const headerId = `dialog-header-${useId7()}`;
-  const dialogClasses = classNames24(
+  const dialogClasses = classNames23(
     "mobius",
     "mobius-drawer",
     `--${direction}`,
@@ -2566,8 +2544,8 @@ var Drawer = forwardRef19((props, ref) => {
       "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__ */ jsx27(VisuallyHidden, { children: /* @__PURE__ */ jsx27("div", { id: hiddenId, children: announce }) }),
+        /* @__PURE__ */ jsx27(DrawerContext.Provider, { value: contextValue, children })
       ]
     }
   );
@@ -2582,14 +2560,14 @@ var useDrawer = () => {
 };
 
 // src/components/Drawer/Header.tsx
-import { forwardRef as forwardRef20 } from "react";
+import { forwardRef as forwardRef19 } from "react";
 import { cross } from "@simplybusiness/icons";
-import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
-var Header = forwardRef20(
+import { jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
+var Header = forwardRef19(
   ({ children, ...otherProps }, ref) => {
     const { onClose, closeLabel, headerId } = useDrawer();
     return /* @__PURE__ */ jsxs16("header", { ref, ...otherProps, className: "mobius-drawer__header", children: [
-      /* @__PURE__ */ jsx29("h2", { id: headerId, children }),
+      /* @__PURE__ */ jsx28("h2", { id: headerId, children }),
       /* @__PURE__ */ jsxs16(
         Button,
         {
@@ -2599,7 +2577,7 @@ var Header = forwardRef20(
           className: "mobius-drawer__close",
           size: "sm",
           children: [
-            /* @__PURE__ */ jsx29(Icon, { icon: cross }),
+            /* @__PURE__ */ jsx28(Icon, { icon: cross }),
             " ",
             closeLabel
           ]
@@ -2619,16 +2597,16 @@ Drawer2.displayName = "Drawer";
 
 // src/components/DropdownMenu/DropdownMenu.tsx
 import {
-  forwardRef as forwardRef21,
+  forwardRef as forwardRef20,
   Children as Children4,
   isValidElement as isValidElement2,
   cloneElement as cloneElement5,
   useState as useState15
 } from "react";
 import useDropdownMenu from "react-accessible-dropdown-menu-hook";
-import classNames25 from "classnames/dedupe";
-import { jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
-var DropdownMenu = forwardRef21((props, ref) => {
+import classNames24 from "classnames/dedupe";
+import { jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
+var DropdownMenu = forwardRef20((props, ref) => {
   const {
     elementType: Element = "nav",
     trigger,
@@ -2644,13 +2622,13 @@ var DropdownMenu = forwardRef21((props, ref) => {
     isOpen: open,
     setIsOpen
   } = useDropdownMenu(numberOfItems);
-  const classes = classNames25(
+  const classes = classNames24(
     "mobius",
     "mobius-dropdown-menu",
     otherProps.className
   );
-  const triggerClasses = classNames25("mobius", "mobius-dropdown-menu__trigger");
-  const listClasses = classNames25("mobius", "mobius-dropdown-menu__list", {
+  const triggerClasses = classNames24("mobius", "mobius-dropdown-menu__trigger");
+  const listClasses = classNames24("mobius", "mobius-dropdown-menu__list", {
     "--is-open": open
   });
   const handleChildClick = ({ onClick }, index) => {
@@ -2666,8 +2644,8 @@ var DropdownMenu = forwardRef21((props, ref) => {
       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__ */ jsx29(Button, { className: triggerClasses, ...buttonProps, children: label }),
+    /* @__PURE__ */ jsx29("ul", { className: listClasses, role: "menu", children: Children4.map(children, (child, index) => {
       if (isValidElement2(child)) {
         return cloneElement5(child, {
           onClick: () => handleChildClick(child.props, index),
@@ -2682,10 +2660,10 @@ var DropdownMenu = forwardRef21((props, ref) => {
 DropdownMenu.displayName = "DropdownMenu";
 
 // src/components/DropdownMenu/Item.tsx
-import { forwardRef as forwardRef22, cloneElement as cloneElement6, isValidElement as isValidElement3, Children as Children5 } from "react";
-import classNames26 from "classnames/dedupe";
-import { jsx as jsx31 } from "react/jsx-runtime";
-var Item = forwardRef22(
+import { forwardRef as forwardRef21, cloneElement as cloneElement6, isValidElement as isValidElement3, Children as Children5 } from "react";
+import classNames25 from "classnames/dedupe";
+import { jsx as jsx30 } from "react/jsx-runtime";
+var Item = forwardRef21(
   (props, ref) => {
     const {
       elementType: Element = "li",
@@ -2694,15 +2672,15 @@ var Item = forwardRef22(
       children,
       ...otherProps
     } = props;
-    const classes = classNames26(
+    const classes = classNames25(
       "mobius",
       "mobius-dropdown-menu__item",
       { "--is-active": active },
       otherProps.className
     );
-    return /* @__PURE__ */ jsx31(Element, { ref, onClick, ...otherProps, children: Children5.map(children, (child) => {
+    return /* @__PURE__ */ jsx30(Element, { ref, onClick, ...otherProps, children: Children5.map(children, (child) => {
       if (isValidElement3(child)) {
-        const childClasses = classNames26(
+        const childClasses = classNames25(
           child.props.className,
           classes
         );
@@ -2713,7 +2691,7 @@ var Item = forwardRef22(
           }
         );
       }
-      return /* @__PURE__ */ jsx31("span", { className: classes, children: child });
+      return /* @__PURE__ */ jsx30("span", { className: classes, children: child });
     }) });
   }
 );
@@ -2729,9 +2707,9 @@ var DropdownMenu2 = Object.assign(
 DropdownMenu2.displayName = "DropdownMenu";
 
 // src/components/Fieldset/Fieldset.tsx
-import classNames27 from "classnames/dedupe";
-import { cloneElement as cloneElement7, forwardRef as forwardRef23, useId as useId8 } from "react";
-import { jsx as jsx32, jsxs as jsxs18 } from "react/jsx-runtime";
+import classNames26 from "classnames/dedupe";
+import { cloneElement as cloneElement7, forwardRef as forwardRef22, useId as useId8 } from "react";
+import { jsx as jsx31, jsxs as jsxs18 } from "react/jsx-runtime";
 var useFieldset = (props) => {
   const { legend } = props;
   let legendProps = {};
@@ -2754,15 +2732,15 @@ var useFieldset = (props) => {
     containerProps
   };
 };
-var Fieldset = forwardRef23((props, _ref) => {
+var Fieldset = forwardRef22((props, _ref) => {
   const {
     children,
     legend,
-    legendComponent = /* @__PURE__ */ jsx32("legend", {}),
+    legendComponent = /* @__PURE__ */ jsx31("legend", {}),
     ...otherProps
   } = props;
   const { legendProps, containerProps } = useFieldset(props);
-  const classes = classNames27("mobius", "mobius-fieldset", props.className);
+  const classes = classNames26("mobius", "mobius-fieldset", props.className);
   legendProps.className = "mobius-fieldset__legend";
   return /* @__PURE__ */ jsxs18(Flex, { ...containerProps, ...otherProps, className: classes, children: [
     legend && cloneElement7(legendComponent, { ...legendProps }, [legend]),
@@ -2772,10 +2750,10 @@ var Fieldset = forwardRef23((props, _ref) => {
 Fieldset.displayName = "Fieldset";
 
 // src/components/Grid/Grid.tsx
-import { forwardRef as forwardRef24 } from "react";
-import classNames28 from "classnames/dedupe";
-import { jsx as jsx33 } from "react/jsx-runtime";
-var Grid = forwardRef24(
+import { forwardRef as forwardRef23 } from "react";
+import classNames27 from "classnames/dedupe";
+import { jsx as jsx32 } from "react/jsx-runtime";
+var Grid = forwardRef23(
   (props, _ref) => {
     const {
       columns = 12,
@@ -2790,7 +2768,7 @@ var Grid = forwardRef24(
       style,
       ...rest
     } = props;
-    const classes = classNames28("mobius", "mobius-grid", className);
+    const classes = classNames27("mobius", "mobius-grid", className);
     const styles = filterUndefinedProps({
       boxSizing: "border-box",
       display: "grid",
@@ -2804,22 +2782,22 @@ var Grid = forwardRef24(
       justifyItems,
       ...style
     });
-    return /* @__PURE__ */ jsx33("div", { style: styles, className: classes, ...rest });
+    return /* @__PURE__ */ jsx32("div", { style: styles, className: classes, ...rest });
   }
 );
 Grid.displayName = "Grid";
 
 // src/components/Grid/Item.tsx
-import { forwardRef as forwardRef25, useEffect as useEffect19, useState as useState16 } from "react";
-import classNames29 from "classnames/dedupe";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { forwardRef as forwardRef24, useEffect as useEffect19, useState as useState16 } from "react";
+import classNames28 from "classnames/dedupe";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var getBreakpointMap = (config) => Object.entries(config).reduce((prev, [key, value]) => {
   const previous = Object.values(prev);
   const lastDefined = previous[previous.length - 1];
   return { ...prev, [key]: value || lastDefined };
 }, {});
 var DEFAULT_SPAN = 12;
-var GridItem = forwardRef25((props, _ref) => {
+var GridItem = forwardRef24((props, _ref) => {
   const {
     breakpoint: { size: breakpointSize }
   } = useBreakpoint();
@@ -2845,7 +2823,7 @@ var GridItem = forwardRef25((props, _ref) => {
     xxl
   });
   const [responsiveSpan, setResponsiveSpan] = useState16();
-  const classes = classNames29("mobius-grid__item", className);
+  const classes = classNames28("mobius-grid__item", className);
   useEffect19(() => {
     setResponsiveSpan(breakpointMap[breakpointSize]);
   }, [breakpointSize, breakpointMap]);
@@ -2854,7 +2832,7 @@ var GridItem = forwardRef25((props, _ref) => {
     alignSelf,
     justifySelf
   };
-  return /* @__PURE__ */ jsx34("div", { style: { ...styles }, className: classes, ...rest });
+  return /* @__PURE__ */ jsx33("div", { style: { ...styles }, className: classes, ...rest });
 });
 GridItem.displayName = "GridItem";
 
@@ -2865,22 +2843,22 @@ var Grid2 = Object.assign(Grid, {
 Grid2.displayName = "Grid";
 
 // src/components/Image/Image.tsx
-import { forwardRef as forwardRef26 } from "react";
-import classNames30 from "classnames/dedupe";
-import { jsx as jsx35 } from "react/jsx-runtime";
-var Image = forwardRef26(
+import { forwardRef as forwardRef25 } from "react";
+import classNames29 from "classnames/dedupe";
+import { jsx as jsx34 } from "react/jsx-runtime";
+var Image = forwardRef25(
   ({ alt, elementType: Component = "img", ...otherProps }, ref) => {
-    const classes = classNames30("mobius", "mobius-image", otherProps.className);
-    return /* @__PURE__ */ jsx35(Component, { alt, ref, ...otherProps, className: classes });
+    const classes = classNames29("mobius", "mobius-image", otherProps.className);
+    return /* @__PURE__ */ jsx34(Component, { alt, ref, ...otherProps, className: classes });
   }
 );
 Image.displayName = "Image";
 
 // src/components/Link/Link.tsx
-import { forwardRef as forwardRef27 } from "react";
-import classNames31 from "classnames/dedupe";
-import { jsx as jsx36 } from "react/jsx-runtime";
-var Link = forwardRef27(
+import { forwardRef as forwardRef26 } from "react";
+import classNames30 from "classnames/dedupe";
+import { jsx as jsx35 } from "react/jsx-runtime";
+var Link = forwardRef26(
   (props, ref) => {
     const {
       isDisabled = false,
@@ -2894,7 +2872,7 @@ var Link = forwardRef27(
       pointerEvents: "none"
     };
     const styles = { ...style, ...isDisabled && disabledStyles };
-    const classes = classNames31(
+    const classes = classNames30(
       "mobius",
       "mobius-link",
       className,
@@ -2903,7 +2881,7 @@ var Link = forwardRef27(
         "--is-disabled": isDisabled
       }
     );
-    return /* @__PURE__ */ jsx36(
+    return /* @__PURE__ */ jsx35(
       Component,
       {
         ref,
@@ -2919,8 +2897,8 @@ var Link = forwardRef27(
 Link.displayName = "Link";
 
 // src/components/LinkButton/LinkButton.tsx
-import classNames32 from "classnames/dedupe";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import classNames31 from "classnames/dedupe";
+import { jsx as jsx36 } from "react/jsx-runtime";
 function LinkButton({
   href,
   children,
@@ -2931,18 +2909,18 @@ function LinkButton({
   if (!href) {
     throw new Error("LinkButton requires a href prop");
   }
-  const classes = classNames32("mobius", "mobius-link-button", className);
+  const classes = classNames31("mobius", "mobius-link-button", className);
   return (
     // @ts-expect-error Button only allows elementType of string, not React component
-    /* @__PURE__ */ jsx37(Button, { elementType, href, className: classes, ...rest, children })
+    /* @__PURE__ */ jsx36(Button, { elementType, href, className: classes, ...rest, children })
   );
 }
 
 // src/components/List/List.tsx
-import { Children as Children6, cloneElement as cloneElement8, forwardRef as forwardRef28, isValidElement as isValidElement4 } from "react";
-import classNames33 from "classnames/dedupe";
-import { jsx as jsx38 } from "react/jsx-runtime";
-var List = forwardRef28(
+import { Children as Children6, cloneElement as cloneElement8, forwardRef as forwardRef27, isValidElement as isValidElement4 } from "react";
+import classNames32 from "classnames/dedupe";
+import { jsx as jsx37 } from "react/jsx-runtime";
+var List = forwardRef27(
   (props, ref) => {
     const Component = props.isOrdered ? "ol" : "ul";
     const { children, icon, ...otherProps } = props;
@@ -2951,7 +2929,7 @@ var List = forwardRef28(
       ...restProps,
       reversed: isReversed
     };
-    const classes = classNames33(
+    const classes = classNames32(
       "mobius",
       "mobius-list",
       {
@@ -2960,7 +2938,7 @@ var List = forwardRef28(
       },
       otherProps.className
     );
-    return /* @__PURE__ */ jsx38(Component, { ref, ...mappedProps, className: classes, children: Children6.map(children, (child) => {
+    return /* @__PURE__ */ jsx37(Component, { ref, ...mappedProps, className: classes, children: Children6.map(children, (child) => {
       if (isValidElement4(child)) {
         return cloneElement8(child, {
           parentIcon: icon
@@ -2973,13 +2951,13 @@ var List = forwardRef28(
 List.displayName = "List";
 
 // src/components/List/ListItem.tsx
-import { forwardRef as forwardRef29 } from "react";
-import classNames34 from "classnames/dedupe";
-import { jsx as jsx39, jsxs as jsxs19 } from "react/jsx-runtime";
-var ListItem = forwardRef29((props, ref) => {
+import { forwardRef as forwardRef28 } from "react";
+import classNames33 from "classnames/dedupe";
+import { jsx as jsx38, jsxs as jsxs19 } from "react/jsx-runtime";
+var ListItem = forwardRef28((props, ref) => {
   const { parentIcon, icon, children, ...otherProps } = props;
   const iconContent = icon || parentIcon;
-  const classes = classNames34(
+  const classes = classNames33(
     "mobius",
     "mobius-list__item",
     {
@@ -2987,41 +2965,41 @@ var ListItem = forwardRef29((props, ref) => {
     },
     props.className
   );
-  const contentClasses = classNames34("mobius", "mobius-list__item-content");
-  const iconClasses = classNames34("mobius", "mobius-list__icon");
+  const contentClasses = classNames33("mobius", "mobius-list__item-content");
+  const iconClasses = classNames33("mobius", "mobius-list__icon");
   if (iconContent) {
-    return /* @__PURE__ */ jsx39("li", { ref, ...otherProps, className: classes, children: /* @__PURE__ */ jsxs19("span", { className: contentClasses, children: [
-      /* @__PURE__ */ jsx39("span", { className: iconClasses, children: iconContent }),
+    return /* @__PURE__ */ jsx38("li", { ref, ...otherProps, className: classes, children: /* @__PURE__ */ jsxs19("span", { className: contentClasses, children: [
+      /* @__PURE__ */ jsx38("span", { className: iconClasses, children: iconContent }),
       children
     ] }) });
   }
-  return /* @__PURE__ */ jsx39("li", { ref, ...otherProps, className: classes, children });
+  return /* @__PURE__ */ jsx38("li", { ref, ...otherProps, className: classes, children });
 });
 ListItem.displayName = "ListItem";
 
 // src/components/LoadingIndicator/LoadingIndicator.tsx
-import { forwardRef as forwardRef30 } from "react";
-import classNames35 from "classnames/dedupe";
+import { forwardRef as forwardRef29 } from "react";
+import classNames34 from "classnames/dedupe";
 import { loading as loading2 } from "@simplybusiness/icons";
-import { jsx as jsx40 } from "react/jsx-runtime";
-var LoadingIndicator = forwardRef30((props, ref) => {
+import { jsx as jsx39 } from "react/jsx-runtime";
+var LoadingIndicator = forwardRef29((props, ref) => {
   const { icon = loading2, ...otherProps } = props;
-  const classes = classNames35(
+  const classes = classNames34(
     "mobius",
     "mobius-loading-indicator",
     otherProps.className
   );
-  return /* @__PURE__ */ jsx40(Icon, { icon, spin: true, ref, ...otherProps, className: classes });
+  return /* @__PURE__ */ jsx39(Icon, { icon, spin: true, ref, ...otherProps, className: classes });
 });
 LoadingIndicator.displayName = "LoadingIndicator";
 
 // src/components/Logo/Logo.tsx
-import { forwardRef as forwardRef31 } from "react";
-import classNames36 from "classnames/dedupe";
-import { jsx as jsx41, jsxs as jsxs20 } from "react/jsx-runtime";
-var Logo = forwardRef31((props, ref) => {
+import { forwardRef as forwardRef30 } from "react";
+import classNames35 from "classnames/dedupe";
+import { jsx as jsx40, jsxs as jsxs20 } from "react/jsx-runtime";
+var Logo = forwardRef30((props, ref) => {
   const { className, width, height, ...otherProps } = props;
-  const classes = classNames36("mobius", "mobius-logo", className);
+  const classes = classNames35("mobius", "mobius-logo", className);
   return /* @__PURE__ */ jsxs20(
     "svg",
     {
@@ -3032,7 +3010,7 @@ var Logo = forwardRef31((props, ref) => {
       viewBox: "0 0 144 37",
       ...otherProps,
       children: [
-        /* @__PURE__ */ jsx41("defs", { children: /* @__PURE__ */ jsxs20(
+        /* @__PURE__ */ jsx40("defs", { children: /* @__PURE__ */ jsxs20(
           "linearGradient",
           {
             id: "logo-gradient",
@@ -3041,27 +3019,27 @@ var Logo = forwardRef31((props, ref) => {
             y1: "76.042%",
             y2: "26.973%",
             children: [
-              /* @__PURE__ */ jsx41("stop", { stopColor: "#4632D8", offset: "0%" }),
-              /* @__PURE__ */ jsx41("stop", { stopColor: "#9084E8", offset: "100%" })
+              /* @__PURE__ */ jsx40("stop", { stopColor: "#4632D8", offset: "0%" }),
+              /* @__PURE__ */ jsx40("stop", { stopColor: "#9084E8", offset: "100%" })
             ]
           }
         ) }),
         /* @__PURE__ */ jsxs20("g", { children: [
-          /* @__PURE__ */ jsx41(
+          /* @__PURE__ */ jsx40(
             "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__ */ jsx40(
             "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__ */ jsx40(
             "path",
             {
               fill: "#0E0A2B",
@@ -3076,15 +3054,15 @@ var Logo = forwardRef31((props, ref) => {
 Logo.displayName = "Logo";
 
 // src/components/Modal/Content.tsx
-import { forwardRef as forwardRef32 } from "react";
-import { jsx as jsx42 } from "react/jsx-runtime";
-var Content2 = forwardRef32(
-  ({ children, ...otherProps }, ref) => /* @__PURE__ */ jsx42("div", { ref, ...otherProps, className: "mobius-modal__content", children })
+import { forwardRef as forwardRef31 } from "react";
+import { jsx as jsx41 } from "react/jsx-runtime";
+var Content2 = forwardRef31(
+  ({ children, ...otherProps }, ref) => /* @__PURE__ */ jsx41("div", { ref, ...otherProps, className: "mobius-modal__content", children })
 );
 Content2.displayName = "Content";
 
 // src/components/Modal/Header.tsx
-import { forwardRef as forwardRef33 } from "react";
+import { forwardRef as forwardRef32 } from "react";
 import { cross as cross2 } from "@simplybusiness/icons";
 
 // src/components/Modal/useModal.ts
@@ -3105,8 +3083,8 @@ var useModal = () => {
 };
 
 // src/components/Modal/Header.tsx
-import { jsx as jsx43, jsxs as jsxs21 } from "react/jsx-runtime";
-var Header2 = forwardRef33(
+import { jsx as jsx42, jsxs as jsxs21 } from "react/jsx-runtime";
+var Header2 = forwardRef32(
   ({ children, ...otherProps }, ref) => {
     const { onClose, closeLabel } = useModal();
     return /* @__PURE__ */ jsxs21("header", { ref, ...otherProps, className: "mobius-modal__header", children: [
@@ -3119,7 +3097,7 @@ var Header2 = forwardRef33(
           onPress: onClose,
           className: "mobius-modal__close",
           children: [
-            /* @__PURE__ */ jsx43(Icon, { icon: cross2 }),
+            /* @__PURE__ */ jsx42(Icon, { icon: cross2 }),
             " ",
             closeLabel
           ]
@@ -3131,11 +3109,11 @@ var Header2 = forwardRef33(
 Header2.displayName = "Header";
 
 // src/components/Modal/Modal.tsx
-import classNames37 from "classnames/dedupe";
-import { forwardRef as forwardRef34, useEffect as useEffect20, useMemo as useMemo2, useRef as useRef12, useState as useState17 } from "react";
-import { jsx as jsx44 } from "react/jsx-runtime";
+import classNames36 from "classnames/dedupe";
+import { forwardRef as forwardRef33, useEffect as useEffect20, useMemo as useMemo2, useRef as useRef12, useState as useState17 } from "react";
+import { jsx as jsx43 } from "react/jsx-runtime";
 var TRANSITION_CSS_VARIABLE2 = "--modal-transition-duration";
-var Modal = forwardRef34((props, ref) => {
+var Modal = forwardRef33((props, ref) => {
   const {
     isOpen,
     onClose,
@@ -3175,7 +3153,7 @@ var Modal = forwardRef34((props, ref) => {
       CSSVariable: TRANSITION_CSS_VARIABLE2
     }
   });
-  const modalClasses = classNames37(
+  const modalClasses = classNames36(
     "mobius",
     "mobius-modal",
     {
@@ -3195,14 +3173,14 @@ var Modal = forwardRef34((props, ref) => {
     }),
     [close, closeLabel]
   );
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx43(
     "dialog",
     {
       ref: mergeRefs([dialogRef, ref]),
       onCancel: close,
       className: modalClasses,
       ...rest,
-      children: /* @__PURE__ */ jsx44(ModalContext.Provider, { value: contextValue, children })
+      children: /* @__PURE__ */ jsx43(ModalContext.Provider, { value: contextValue, children })
     }
   );
 });
@@ -3216,11 +3194,16 @@ var Modal2 = Object.assign(Modal, {
 Modal2.displayName = "Modal";
 
 // src/components/NumberField/NumberField.tsx
-import classNames38 from "classnames/dedupe";
-import { useCallback as useCallback5, useEffect as useEffect21, useRef as useRef13 } from "react";
-import { forwardRef as forwardRef35 } from "react";
-import { jsx as jsx45 } from "react/jsx-runtime";
-var NumberField = forwardRef35((props, ref) => {
+import classNames37 from "classnames/dedupe";
+import {
+  forwardRef as forwardRef34,
+  useCallback as useCallback5,
+  useEffect as useEffect21,
+  useRef as useRef13
+} from "react";
+import { jsx as jsx44 } from "react/jsx-runtime";
+var SMALLEST_INCREMENT = 1e-3;
+var NumberField = forwardRef34((props, ref) => {
   const {
     minValue,
     maxValue,
@@ -3230,6 +3213,11 @@ var NumberField = forwardRef35((props, ref) => {
     className,
     ...otherProps
   } = props;
+  const {
+    onFocus: customOnFocus,
+    onBlur: customOnBlur,
+    ...rest
+  } = otherProps;
   const focusedInputRef = useRef13(null);
   const wheelHandler = useCallback5((ev) => ev.preventDefault(), []);
   useEffect21(() => {
@@ -3238,25 +3226,59 @@ var NumberField = forwardRef35((props, ref) => {
       focusedInputRef.current = null;
     };
   }, [wheelHandler]);
-  const containerClasses = classNames38("mobius-number-field", className, {
+  const containerClasses = classNames37("mobius-number-field", className, {
     "--hide-spin-buttons": hideSpinButtons
   });
   const handleBeforeInput = (event) => {
     const { data } = event.nativeEvent;
-    if (step != null && Number.isInteger(step) && data === ".") {
+    if (step && Number.isInteger(step) && data === ".") {
       event.preventDefault();
     }
-    if (minValue != null && minValue >= 0 && data === "-") {
+    if (minValue && minValue >= 0 && data === "-") {
       event.preventDefault();
     }
   };
-  const {
-    onFocus: customOnFocus,
-    onBlur: customOnBlur,
-    ...rest
-  } = otherProps;
+  const handleChange = (event) => {
+    const { value } = event.target;
+    const numValue = parseFloat(value);
+    if (value === "" || value === "-" || isNaN(numValue)) {
+      otherProps.onChange?.(event);
+      return;
+    }
+    if (step && step > 1) {
+      const baseValue = minValue ?? 0;
+      const remainder = (numValue - baseValue) % step;
+      if (Math.abs(remainder) > SMALLEST_INCREMENT && Math.abs(remainder - step) > SMALLEST_INCREMENT) {
+        event.preventDefault();
+        return;
+      }
+    }
+    otherProps.onChange?.(event);
+  };
+  const handleBlur = (event) => {
+    const { value } = event.target;
+    const numValue = parseFloat(value);
+    if (step && step > 1 && !isNaN(numValue)) {
+      const baseValue = minValue ?? 0;
+      const steps = Math.round((numValue - baseValue) / step);
+      const snappedValue = baseValue + steps * step;
+      if (snappedValue !== numValue) {
+        event.target.value = snappedValue.toString();
+        const changeEvent = new Event("change", { bubbles: true });
+        event.target.dispatchEvent(changeEvent);
+        const syntheticChangeEvent = {
+          ...event,
+          target: event.target,
+          currentTarget: event.currentTarget
+        };
+        otherProps.onChange?.(syntheticChangeEvent);
+      }
+    }
+    customOnBlur?.(event);
+  };
   const forwardedProps = {
     ...rest,
+    onChange: handleChange,
     onFocus: (e) => {
       const el = e.currentTarget;
       focusedInputRef.current?.removeEventListener("wheel", wheelHandler);
@@ -3264,16 +3286,9 @@ var NumberField = forwardRef35((props, ref) => {
       el.addEventListener("wheel", wheelHandler, { passive: false });
       customOnFocus?.(e);
     },
-    onBlur: (e) => {
-      const el = e.currentTarget;
-      el.removeEventListener("wheel", wheelHandler);
-      if (focusedInputRef.current === el) {
-        focusedInputRef.current = null;
-      }
-      customOnBlur?.(e);
-    }
+    onBlur: (e) => handleBlur(e)
   };
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx44(
     TextField,
     {
       ...forwardedProps,
@@ -3291,28 +3306,28 @@ var NumberField = forwardRef35((props, ref) => {
 NumberField.displayName = "NumberField";
 
 // src/components/Option/Option.tsx
-import { forwardRef as forwardRef36 } from "react";
-import { jsx as jsx46 } from "react/jsx-runtime";
-var Option2 = forwardRef36((props, ref) => {
+import { forwardRef as forwardRef35 } from "react";
+import { jsx as jsx45 } from "react/jsx-runtime";
+var Option2 = forwardRef35((props, ref) => {
   const { isDisabled, ...rest } = props;
   const mappedProps = {
     ...rest,
     disabled: isDisabled
   };
-  return /* @__PURE__ */ jsx46("option", { ...mappedProps, ref });
+  return /* @__PURE__ */ jsx45("option", { ...mappedProps, ref });
 });
 Option2.displayName = "Option";
 
 // src/components/PasswordField/PasswordField.tsx
-import classNames39 from "classnames/dedupe";
-import { forwardRef as forwardRef37, useState as useState18, useRef as useRef14 } from "react";
+import classNames38 from "classnames/dedupe";
+import { forwardRef as forwardRef36, useState as useState18, useRef as useRef14 } from "react";
 
 // src/components/PasswordField/ShowHideButton.tsx
-import { jsx as jsx47 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "react/jsx-runtime";
 var ShowHideButton = ({
   show = false,
   onClick
-}) => /* @__PURE__ */ jsx47(
+}) => /* @__PURE__ */ jsx46(
   "button",
   {
     className: "mobius-password-field__show-button",
@@ -3328,25 +3343,25 @@ var ShowHideButton = ({
 );
 
 // src/components/PasswordField/PasswordField.tsx
-import { jsx as jsx48 } from "react/jsx-runtime";
-var PasswordField = forwardRef37(
+import { jsx as jsx47 } from "react/jsx-runtime";
+var PasswordField = forwardRef36(
   ({ className, ...props }, ref) => {
     const [show, setShow] = useState18(false);
     const type = show ? "text" : "password";
-    const classes = classNames39("mobius-password-field", className);
+    const classes = classNames38("mobius-password-field", className);
     const localRef = useRef14(null);
     const handleShowHideButtonClick = () => {
       setShow((oldShow) => !oldShow);
       localRef.current?.focus();
     };
-    return /* @__PURE__ */ jsx48(
+    return /* @__PURE__ */ jsx47(
       TextField,
       {
         ref: mergeRefs([localRef, ref]),
         className: classes,
         ...props,
         type,
-        suffixInside: /* @__PURE__ */ jsx48(ShowHideButton, { onClick: handleShowHideButtonClick, show })
+        suffixInside: /* @__PURE__ */ jsx47(ShowHideButton, { onClick: handleShowHideButtonClick, show })
       }
     );
   }
@@ -3366,9 +3381,9 @@ import {
   useInteractions
 } from "@floating-ui/react";
 import { cross as cross3 } from "@simplybusiness/icons";
-import classNames40 from "classnames";
+import classNames39 from "classnames";
 import { cloneElement as cloneElement9, useRef as useRef15, useState as useState19 } from "react";
-import { Fragment as Fragment3, jsx as jsx49, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx48, jsxs as jsxs22 } from "react/jsx-runtime";
 var OFFSET_FROM_CONTENT_DEFAULT = 10;
 var Popover = (props) => {
   const { trigger, children, onOpen, onClose, className } = props;
@@ -3399,7 +3414,7 @@ var Popover = (props) => {
     }
   });
   const { getReferenceProps, getFloatingProps } = useInteractions([dismiss]);
-  const containerClasses = classNames40(
+  const containerClasses = classNames39(
     "mobius",
     "mobius-popover__container",
     className
@@ -3415,7 +3430,7 @@ var Popover = (props) => {
   };
   const triggerComponent = cloneElement9(trigger, {
     ref: refs.setReference,
-    className: classNames40(
+    className: classNames39(
       trigger.props.className,
       "mobius-popover__toggle"
     ),
@@ -3440,7 +3455,7 @@ var Popover = (props) => {
         ...getFloatingProps(),
         children: [
           /* @__PURE__ */ jsxs22("div", { className: "mobius-popover", children: [
-            /* @__PURE__ */ jsx49("header", { className: "mobius-popover__header", children: /* @__PURE__ */ jsx49(
+            /* @__PURE__ */ jsx48("header", { className: "mobius-popover__header", children: /* @__PURE__ */ jsx48(
               Button,
               {
                 type: "button",
@@ -3448,7 +3463,7 @@ var Popover = (props) => {
                 onClick: toggleVisibility,
                 "aria-label": "Close",
                 variant: "ghost",
-                children: /* @__PURE__ */ jsx49(
+                children: /* @__PURE__ */ jsx48(
                   Icon,
                   {
                     icon: cross3,
@@ -3458,9 +3473,9 @@ var Popover = (props) => {
                 )
               }
             ) }),
-            /* @__PURE__ */ jsx49("div", { className: "mobius-popover__body", children })
+            /* @__PURE__ */ jsx48("div", { className: "mobius-popover__body", children })
           ] }),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx48(
             FloatingArrow,
             {
               ref: arrowRef,
@@ -3476,9 +3491,9 @@ var Popover = (props) => {
 };
 
 // src/components/Progress/Progress.tsx
-import classNames41 from "classnames/dedupe";
-import { forwardRef as forwardRef38, useId as useId9 } from "react";
-import { jsx as jsx50, jsxs as jsxs23 } from "react/jsx-runtime";
+import classNames40 from "classnames/dedupe";
+import { forwardRef as forwardRef37, useId as useId9 } from "react";
+import { jsx as jsx49, jsxs as jsxs23 } from "react/jsx-runtime";
 function warnAboutInvalidValues(value, minValue, maxValue) {
   if (minValue > maxValue) {
     console.warn("minValue is greater than maxValue");
@@ -3496,7 +3511,7 @@ var sanitizedValue = (value, defaultValue) => {
 };
 var getLabelComponent = (label, progressLabelId, showLabel) => {
   if (showLabel) {
-    return /* @__PURE__ */ jsx50(
+    return /* @__PURE__ */ jsx49(
       Label,
       {
         id: progressLabelId,
@@ -3506,7 +3521,7 @@ var getLabelComponent = (label, progressLabelId, showLabel) => {
       }
     );
   }
-  return /* @__PURE__ */ jsx50(VisuallyHidden, { children: /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx49(VisuallyHidden, { children: /* @__PURE__ */ jsx49(
     Label,
     {
       id: progressLabelId,
@@ -3519,7 +3534,7 @@ var getLabelComponent = (label, progressLabelId, showLabel) => {
 var DEFAULT_VALUE = 0;
 var DEFAULT_MIN_VALUE = 0;
 var DEFAULT_MAX_VALUE = 100;
-var Progress = forwardRef38((props, ref) => {
+var Progress = forwardRef37((props, ref) => {
   const progressId = useId9();
   const progressLabelId = useId9();
   const {
@@ -3546,7 +3561,7 @@ var Progress = forwardRef38((props, ref) => {
     100
   );
   const barWidth = `${percentage}%`;
-  const classes = classNames41("mobius", "mobius-progress", className, {
+  const classes = classNames40("mobius", "mobius-progress", className, {
     "--is-primary": variant === "primary",
     "--is-secondary": variant === "secondary"
   });
@@ -3567,8 +3582,8 @@ var Progress = forwardRef38((props, ref) => {
       "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__ */ jsx49("div", { className: "mobius-progress__track", children: /* @__PURE__ */ jsx49("div", { className: "mobius-progress__bar", style: { width: barWidth } }) }),
+        showValueLabel && /* @__PURE__ */ jsx49(Label, { "data-testid": "value-label", elementType: "span", children: progressBarProps["aria-valuetext"] })
       ]
     }
   );
@@ -3576,10 +3591,10 @@ var Progress = forwardRef38((props, ref) => {
 Progress.displayName = "Progress";
 
 // src/components/Radio/Radio.tsx
-import classNames42 from "classnames/dedupe";
-import { Children as Children7, forwardRef as forwardRef39, isValidElement as isValidElement5, useMemo as useMemo3 } from "react";
-import { Fragment as Fragment4, jsx as jsx51, jsxs as jsxs24 } from "react/jsx-runtime";
-var Radio = forwardRef39(
+import classNames41 from "classnames/dedupe";
+import { Children as Children7, forwardRef as forwardRef38, isValidElement as isValidElement5, useMemo as useMemo3 } from "react";
+import { Fragment as Fragment4, jsx as jsx50, jsxs as jsxs24 } from "react/jsx-runtime";
+var Radio = forwardRef38(
   (props, ref) => {
     const {
       children,
@@ -3614,13 +3629,13 @@ var Radio = forwardRef39(
       "--is-multiline": !!isMultiline,
       "--is-required": isRequired
     };
-    const containerClasses = classNames42(
+    const containerClasses = classNames41(
       "mobius-radio__label",
       radioClasses,
       className,
       { "--has-icon-first": hasIconFirst }
     );
-    const inputClasses = classNames42("mobius-radio__input", radioClasses);
+    const inputClasses = classNames41("mobius-radio__input", radioClasses);
     const {
       // @ts-expect-error - TS doesn't like the orientation prop
       orientation,
@@ -3641,7 +3656,7 @@ var Radio = forwardRef39(
     };
     return /* @__PURE__ */ jsxs24(Fragment4, { children: [
       /* @__PURE__ */ jsxs24(Label, { className: containerClasses, children: [
-        /* @__PURE__ */ jsx51(
+        /* @__PURE__ */ jsx50(
           "input",
           {
             "aria-describedby": otherProps["aria-describedby"],
@@ -3659,28 +3674,28 @@ var Radio = forwardRef39(
           }
         ),
         isMultiline ? /* @__PURE__ */ jsxs24("div", { 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", { className: "mobius-radio__content", children: label || children })
+          /* @__PURE__ */ jsx50("div", { className: "mobius-radio__content-first-line", children: label }),
+          /* @__PURE__ */ jsx50("div", { className: "mobius-radio__extra-content", children })
+        ] }) : /* @__PURE__ */ jsx50("div", { className: "mobius-radio__content", children: label || children })
       ] }),
-      errorMessage && /* @__PURE__ */ jsx51(ErrorMessage, { errorMessage })
+      errorMessage && /* @__PURE__ */ jsx50(ErrorMessage, { errorMessage })
     ] });
   }
 );
 Radio.displayName = "Radio";
 
 // src/components/Radio/RadioGroup.tsx
-import classNames43 from "classnames/dedupe";
+import classNames42 from "classnames/dedupe";
 import {
   Children as Children8,
   cloneElement as cloneElement10,
-  forwardRef as forwardRef40,
+  forwardRef as forwardRef39,
   isValidElement as isValidElement6,
   useEffect as useEffect22,
   useId as useId10,
   useState as useState20
 } from "react";
-import { jsx as jsx52, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs25 } from "react/jsx-runtime";
 var getDefaultVal = (children, defaultValue) => {
   if (Array.isArray(children) && defaultValue) {
     const option = children?.find((item) => item.props.value === defaultValue);
@@ -3689,7 +3704,7 @@ var getDefaultVal = (children, defaultValue) => {
   }
   return "";
 };
-var RadioGroup = forwardRef40((props, ref) => {
+var RadioGroup = forwardRef39((props, ref) => {
   const {
     label,
     isDisabled = false,
@@ -3725,16 +3740,16 @@ var RadioGroup = forwardRef40((props, ref) => {
     [`--is-${orientation}`]: true,
     [className || ""]: true
   };
-  const radioGroupClasses = classNames43(
+  const radioGroupClasses = classNames42(
     "mobius",
     "mobius-radio-group",
     radioClasses,
     validationClasses
   );
-  const radioWrapperClasses = classNames43("mobius-radio__wrapper", {
+  const radioWrapperClasses = classNames42("mobius-radio__wrapper", {
     [`--is-${orientation}`]: true
   });
-  const labelClasses = classNames43(radioClasses, validationClasses);
+  const labelClasses = classNames42(radioClasses, validationClasses);
   const errorMessageId = useId10();
   const defaultNameAttrId = useId10();
   const nameAttribute = name || defaultNameAttrId;
@@ -3744,7 +3759,7 @@ var RadioGroup = forwardRef40((props, ref) => {
     props["aria-describedby"]
   ]);
   const labelId = useId10();
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx51(
     "div",
     {
       ...rest,
@@ -3761,8 +3776,8 @@ var RadioGroup = forwardRef40((props, ref) => {
       className: radioGroupClasses,
       role: "radiogroup",
       children: /* @__PURE__ */ jsxs25(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) => {
+        label && /* @__PURE__ */ jsx51(Label, { htmlFor: name, id: labelId, className: labelClasses, children: label }),
+        /* @__PURE__ */ jsx51("div", { className: radioWrapperClasses, children: Children8.map(children, (child) => {
           if (isValidElement6(child)) {
             return cloneElement10(
               child,
@@ -3781,7 +3796,7 @@ var RadioGroup = forwardRef40((props, ref) => {
           }
           return child;
         }) }),
-        /* @__PURE__ */ jsx52(ErrorMessage, { id: errorMessageId, errorMessage })
+        /* @__PURE__ */ jsx51(ErrorMessage, { id: errorMessageId, errorMessage })
       ] })
     }
   );
@@ -3789,28 +3804,28 @@ var RadioGroup = forwardRef40((props, ref) => {
 RadioGroup.displayName = "RadioGroup";
 
 // src/components/Segment/SegmentGroup.tsx
-import classNames44 from "classnames/dedupe";
-import { jsx as jsx53 } from "react/jsx-runtime";
+import classNames43 from "classnames/dedupe";
+import { jsx as jsx52 } from "react/jsx-runtime";
 var SegmentGroup = (props) => {
   const { children, horizontal, gap, className, ...rest } = props;
   const gapClass = gap ? `gap-${gap}` : "";
-  const classes = classNames44(
+  const classes = classNames43(
     "mobius",
     "mobius-segment-group",
     className,
     { "--is-horizontal": horizontal },
     gapClass
   );
-  return /* @__PURE__ */ jsx53("div", { className: classes, ...rest, children });
+  return /* @__PURE__ */ jsx52("div", { className: classes, ...rest, children });
 };
 SegmentGroup.displayName = "SegmentGroup";
 
 // src/components/Segment/Segment.tsx
-import classNames45 from "classnames/dedupe";
-import { jsx as jsx54, jsxs as jsxs26 } from "react/jsx-runtime";
+import classNames44 from "classnames/dedupe";
+import { jsx as jsx53, jsxs as jsxs26 } from "react/jsx-runtime";
 var Segment = (props) => {
   const { heading, children, colour, inverted, className, ...rest } = props;
-  const classes = classNames45(
+  const classes = classNames44(
     "mobius",
     "mobius-segment",
     colour,
@@ -3818,7 +3833,7 @@ var Segment = (props) => {
     className
   );
   return /* @__PURE__ */ jsxs26("div", { className: classes, ...rest, children: [
-    heading && /* @__PURE__ */ jsx54("div", { className: "mobius-segment__heading", children: heading }),
+    heading && /* @__PURE__ */ jsx53("div", { className: "mobius-segment__heading", children: heading }),
     children
   ] });
 };
@@ -3826,10 +3841,10 @@ Segment.displayName = "Segment";
 
 // src/components/Select/Select.tsx
 import { chevronDown as chevronDown2 } from "@simplybusiness/icons";
-import classNames46 from "classnames/dedupe";
-import { forwardRef as forwardRef41, useId as useId11 } from "react";
-import { jsx as jsx55, jsxs as jsxs27 } from "react/jsx-runtime";
-var Select = forwardRef41((props, ref) => {
+import classNames45 from "classnames/dedupe";
+import { forwardRef as forwardRef40, useId as useId11 } from "react";
+import { jsx as jsx54, jsxs as jsxs27 } from "react/jsx-runtime";
+var Select = forwardRef40((props, ref) => {
   const {
     label,
     onChange,
@@ -3853,23 +3868,23 @@ var Select = forwardRef41((props, ref) => {
     "--is-required": typeof isRequired === "boolean" && isRequired,
     "--is-optional": typeof isRequired === "boolean" && !isRequired
   };
-  const sharedClasses = classNames46(validationClasses, stateClasses);
-  const wrapperClasses = classNames46(
+  const sharedClasses = classNames45(validationClasses, stateClasses);
+  const wrapperClasses = classNames45(
     "mobius-select__wrapper",
     sharedClasses,
     otherProps.className
   );
-  const selectClasses = classNames46(
+  const selectClasses = classNames45(
     "mobius-select",
     sharedClasses,
     otherProps.className
   );
-  const labelClasses = classNames46(
+  const labelClasses = classNames45(
     "mobius-label",
     sharedClasses,
     otherProps.className
   );
-  const iconClasses = classNames46("mobius-select__icon", sharedClasses);
+  const iconClasses = classNames45("mobius-select__icon", sharedClasses);
   const errorMessageId = useId11();
   const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
   const describedBy = spaceDelimitedList([
@@ -3882,9 +3897,9 @@ var Select = forwardRef41((props, ref) => {
     }
   };
   return /* @__PURE__ */ jsxs27(Stack, { className: "mobius mobius-select__outer", gap: "xs", children: [
-    label && /* @__PURE__ */ jsx55(Label, { ...labelProps, className: labelClasses, children: label }),
+    label && /* @__PURE__ */ jsx54(Label, { ...labelProps, className: labelClasses, children: label }),
     /* @__PURE__ */ jsxs27("div", { className: wrapperClasses, children: [
-      /* @__PURE__ */ jsx55(
+      /* @__PURE__ */ jsx54(
         "select",
         {
           ...otherProps,
@@ -3900,15 +3915,15 @@ var Select = forwardRef41((props, ref) => {
           onChange: handleChange
         }
       ),
-      /* @__PURE__ */ jsx55("span", { className: iconClasses, children: /* @__PURE__ */ jsx55(Icon, { icon: chevronDown2 }) })
+      /* @__PURE__ */ jsx54("span", { className: iconClasses, children: /* @__PURE__ */ jsx54(Icon, { icon: chevronDown2 }) })
     ] }),
-    errorMessage && /* @__PURE__ */ jsx55(ErrorMessage, { id: errorMessageId, errorMessage })
+    errorMessage && /* @__PURE__ */ jsx54(ErrorMessage, { id: errorMessageId, errorMessage })
   ] });
 });
 Select.displayName = "Select";
 
 // src/components/Slider/Slider.tsx
-import classNames47 from "classnames/dedupe";
+import classNames46 from "classnames/dedupe";
 import { useRef as useRef16, useState as useState21 } from "react";
 
 // src/components/Slider/helpers.ts
@@ -3921,7 +3936,7 @@ function numberFormatter(value, formatOptions, locale = navigator.languages?.[0]
 }
 
 // src/components/Slider/Slider.tsx
-import { jsx as jsx56, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs28 } from "react/jsx-runtime";
 var Slider = (props) => {
   const {
     id,
@@ -3954,7 +3969,7 @@ var Slider = (props) => {
     "aria-labelledby": ariaLabelledBy
   });
   const formattedValue = numberFormatter(currentValue, formatOptions);
-  const classes = classNames47("mobius", "mobius-slider", className, {
+  const classes = classNames46("mobius", "mobius-slider", className, {
     "--is-disabled": isDisabled,
     "--is-primary": variant === "primary",
     "--is-secondary": variant === "secondary",
@@ -3978,10 +3993,10 @@ var Slider = (props) => {
   };
   return /* @__PURE__ */ jsxs28("div", { className: classes, children: [
     /* @__PURE__ */ jsxs28("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 })
+      label && /* @__PURE__ */ jsx55(Label, { ...labelProps, children: label }),
+      label && /* @__PURE__ */ jsx55("output", { style: { flex: "1 0 auto", textAlign: "end" }, children: formattedValue })
     ] }),
-    /* @__PURE__ */ jsx56("div", { ref: trackRef, className: "mobius-slider__track-wrapper", children: /* @__PURE__ */ jsx56(
+    /* @__PURE__ */ jsx55("div", { ref: trackRef, className: "mobius-slider__track-wrapper", children: /* @__PURE__ */ jsx55(
       "input",
       {
         className: "mobius-slider__track",
@@ -4001,23 +4016,23 @@ var Slider = (props) => {
       }
     ) }),
     /* @__PURE__ */ jsxs28("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__ */ jsx55("div", { className: "mobius-slider__min-label", "data-testid": "min-label", children: minLabel }),
+      /* @__PURE__ */ jsx55("div", { className: "mobius-slider__max-label", "data-testid": "max-label", children: maxLabel })
     ] })
   ] });
 };
 
 // src/components/SVG/SVG.tsx
-import { forwardRef as forwardRef42, Children as Children9 } from "react";
-import classNames48 from "classnames/dedupe";
-import { jsx as jsx57 } from "react/jsx-runtime";
-var SVG = forwardRef42(
+import { forwardRef as forwardRef41, Children as Children9 } from "react";
+import classNames47 from "classnames/dedupe";
+import { jsx as jsx56 } from "react/jsx-runtime";
+var SVG = forwardRef41(
   (props, ref) => {
     const { children, className, ...otherProps } = props;
-    const classes = classNames48("mobius", "mobius-svg", className);
+    const classes = classNames47("mobius", "mobius-svg", className);
     const svgNode = Children9.only(children);
     const { children: svgChildren, viewBox, xmlns } = svgNode.props;
-    return /* @__PURE__ */ jsx57(
+    return /* @__PURE__ */ jsx56(
       "svg",
       {
         viewBox,
@@ -4034,13 +4049,13 @@ SVG.displayName = "SVG";
 
 // src/components/Switch/Switch.tsx
 import {
-  forwardRef as forwardRef43,
+  forwardRef as forwardRef42,
   useState as useState22,
   useEffect as useEffect23
 } from "react";
-import classNames49 from "classnames/dedupe";
-import { jsx as jsx58, jsxs as jsxs29 } from "react/jsx-runtime";
-var Switch = forwardRef43((props, ref) => {
+import classNames48 from "classnames/dedupe";
+import { jsx as jsx57, jsxs as jsxs29 } from "react/jsx-runtime";
+var Switch = forwardRef42((props, ref) => {
   const {
     checked = false,
     className,
@@ -4052,7 +4067,7 @@ var Switch = forwardRef43((props, ref) => {
   useEffect23(() => {
     setEnabled(checked);
   }, [checked]);
-  const classes = classNames49(
+  const classes = classNames48(
     "mobius",
     "mobius-switch",
     {
@@ -4068,8 +4083,8 @@ var Switch = forwardRef43((props, ref) => {
     }
   };
   return /* @__PURE__ */ jsxs29("label", { ref, className: classes, children: [
-    /* @__PURE__ */ jsx58(VisuallyHidden, { children: /* @__PURE__ */ jsx58("span", { children: enabled ? "On" : "Off" }) }),
-    /* @__PURE__ */ jsx58(
+    /* @__PURE__ */ jsx57(VisuallyHidden, { children: /* @__PURE__ */ jsx57("span", { children: enabled ? "On" : "Off" }) }),
+    /* @__PURE__ */ jsx57(
       "input",
       {
         type: "checkbox",
@@ -4080,91 +4095,91 @@ var Switch = forwardRef43((props, ref) => {
         ...otherProps
       }
     ),
-    /* @__PURE__ */ jsx58("span", { className: "mobius-switch__slider" })
+    /* @__PURE__ */ jsx57("span", { className: "mobius-switch__slider" })
   ] });
 });
 Switch.displayName = "Switch";
 
 // src/components/Table/Table.tsx
-import { forwardRef as forwardRef44 } from "react";
-import classNames50 from "classnames/dedupe";
-import { jsx as jsx59 } from "react/jsx-runtime";
-var Table = forwardRef44(
+import { forwardRef as forwardRef43 } from "react";
+import classNames49 from "classnames/dedupe";
+import { jsx as jsx58 } from "react/jsx-runtime";
+var Table = forwardRef43(
   (props, ref) => {
-    const classes = classNames50("mobius", "mobius-table", props.className);
-    return /* @__PURE__ */ jsx59("table", { ref, ...props, className: classes });
+    const classes = classNames49("mobius", "mobius-table", props.className);
+    return /* @__PURE__ */ jsx58("table", { ref, ...props, className: classes });
   }
 );
 Table.displayName = "Table";
 
 // src/components/Table/Head.tsx
+import { forwardRef as forwardRef44 } from "react";
+import classNames50 from "classnames/dedupe";
+import { jsx as jsx59 } from "react/jsx-runtime";
+var Head = forwardRef44((props, ref) => {
+  const classes = classNames50("mobius", "mobius-table__head", props.className);
+  return /* @__PURE__ */ jsx59("thead", { ref, ...props, className: classes });
+});
+Head.displayName = "Table.Head";
+
+// src/components/Table/Body.tsx
 import { forwardRef as forwardRef45 } from "react";
 import classNames51 from "classnames/dedupe";
 import { jsx as jsx60 } from "react/jsx-runtime";
-var Head = forwardRef45((props, ref) => {
-  const classes = classNames51("mobius", "mobius-table__head", props.className);
-  return /* @__PURE__ */ jsx60("thead", { ref, ...props, className: classes });
+var Body = forwardRef45((props, ref) => {
+  const classes = classNames51("mobius", "mobius-table__body", props.className);
+  return /* @__PURE__ */ jsx60("tbody", { ref, ...props, className: classes });
 });
-Head.displayName = "Table.Head";
+Body.displayName = "Table.Body";
 
-// src/components/Table/Body.tsx
+// src/components/Table/Foot.tsx
 import { forwardRef as forwardRef46 } from "react";
 import classNames52 from "classnames/dedupe";
 import { jsx as jsx61 } from "react/jsx-runtime";
-var Body = forwardRef46((props, ref) => {
-  const classes = classNames52("mobius", "mobius-table__body", props.className);
-  return /* @__PURE__ */ jsx61("tbody", { ref, ...props, className: classes });
+var Foot = forwardRef46((props, ref) => {
+  const classes = classNames52("mobius", "mobius-table__foot", props.className);
+  return /* @__PURE__ */ jsx61("tfoot", { ref, ...props, className: classes });
 });
-Body.displayName = "Table.Body";
+Foot.displayName = "Table.Foot";
 
-// src/components/Table/Foot.tsx
+// src/components/Table/Row.tsx
 import { forwardRef as forwardRef47 } from "react";
 import classNames53 from "classnames/dedupe";
 import { jsx as jsx62 } from "react/jsx-runtime";
-var Foot = forwardRef47((props, ref) => {
-  const classes = classNames53("mobius", "mobius-table__foot", props.className);
-  return /* @__PURE__ */ jsx62("tfoot", { ref, ...props, className: classes });
-});
-Foot.displayName = "Table.Foot";
-
-// src/components/Table/Row.tsx
-import { forwardRef as forwardRef48 } from "react";
-import classNames54 from "classnames/dedupe";
-import { jsx as jsx63 } from "react/jsx-runtime";
-var Row = forwardRef48(
+var Row = forwardRef47(
   (props, ref) => {
-    const classes = classNames54("mobius", "mobius-table__row", props.className);
-    return /* @__PURE__ */ jsx63("tr", { ref, ...props, className: classes });
+    const classes = classNames53("mobius", "mobius-table__row", props.className);
+    return /* @__PURE__ */ jsx62("tr", { ref, ...props, className: classes });
   }
 );
 Row.displayName = "Table.Row";
 
 // src/components/Table/HeaderCell.tsx
-import { forwardRef as forwardRef49 } from "react";
-import classNames55 from "classnames/dedupe";
-import { jsx as jsx64 } from "react/jsx-runtime";
-var HeaderCell = forwardRef49((props, ref) => {
-  const classes = classNames55(
+import { forwardRef as forwardRef48 } from "react";
+import classNames54 from "classnames/dedupe";
+import { jsx as jsx63 } from "react/jsx-runtime";
+var HeaderCell = forwardRef48((props, ref) => {
+  const classes = classNames54(
     "mobius",
     "mobius-table__head-cell",
     props.className
   );
-  return /* @__PURE__ */ jsx64("th", { ...props, ref, className: classes });
+  return /* @__PURE__ */ jsx63("th", { ...props, ref, className: classes });
 });
 HeaderCell.displayName = "Table.HeaderCell";
 
 // src/components/Table/Cell.tsx
-import { forwardRef as forwardRef50 } from "react";
-import classNames56 from "classnames/dedupe";
-import { jsx as jsx65 } from "react/jsx-runtime";
-var Cell = forwardRef50(
+import { forwardRef as forwardRef49 } from "react";
+import classNames55 from "classnames/dedupe";
+import { jsx as jsx64 } from "react/jsx-runtime";
+var Cell = forwardRef49(
   (props, ref) => {
-    const classes = classNames56(
+    const classes = classNames55(
       "mobius",
       "mobius-table__body-cell",
       props.className
     );
-    return /* @__PURE__ */ jsx65("td", { ref, ...props, className: classes });
+    return /* @__PURE__ */ jsx64("td", { ref, ...props, className: classes });
   }
 );
 Cell.displayName = "Table.Cell";
@@ -4180,6 +4195,33 @@ var Table2 = Object.assign(Table, {
 });
 Table2.displayName = "Table";
 
+// src/components/Text/Text.tsx
+import { forwardRef as forwardRef50 } from "react";
+import classNames56 from "classnames/dedupe";
+import { jsx as jsx65 } from "react/jsx-runtime";
+var getElementType = (variant, elementType) => {
+  if (variant) {
+    return ["h1", "h2", "h3", "h4"].includes(variant) ? variant : "p";
+  }
+  return elementType || "p";
+};
+var Text = forwardRef50(
+  ({ elementType: Component = "p", ...props }, ref) => {
+    const { variant, className, spacing, ...otherProps } = props;
+    const elementType = getElementType(variant, Component);
+    const variantType = variant || elementType;
+    const classes = classNames56(
+      "mobius",
+      "mobius-text",
+      { [`--is-${variantType}`]: variantType },
+      { [`--has-line-height-${spacing}`]: spacing },
+      className
+    );
+    return /* @__PURE__ */ jsx65(Component, { ref, ...otherProps, className: classes });
+  }
+);
+Text.displayName = "Text";
+
 // src/components/TextArea/TextArea.tsx
 import classNames58 from "classnames/dedupe";
 import { forwardRef as forwardRef52 } from "react";
@@ -4259,11 +4301,38 @@ var TextArea = forwardRef52((props, ref) => {
 });
 TextArea.displayName = "TextArea";
 
-// src/components/Title/Title.tsx
+// src/components/TextOrHTML/TextOrHTML.tsx
 import { forwardRef as forwardRef53 } from "react";
+import { jsx as jsx68 } from "react/jsx-runtime";
+var TextOrHTML = forwardRef53(
+  ({
+    text,
+    htmlClassName,
+    htmlElementType = "span",
+    textWrapper = false,
+    ...textProps
+  }, ref) => {
+    const DangerousComponent = htmlElementType;
+    const dangerousElement = /* @__PURE__ */ jsx68(
+      DangerousComponent,
+      {
+        className: htmlClassName,
+        dangerouslySetInnerHTML: { __html: text }
+      }
+    );
+    if (textWrapper) {
+      return /* @__PURE__ */ jsx68(Text, { ref, ...textProps, children: dangerousElement });
+    }
+    return dangerousElement;
+  }
+);
+TextOrHTML.displayName = "TextOrHTML";
+
+// src/components/Title/Title.tsx
+import { forwardRef as forwardRef54 } from "react";
 import classNames59 from "classnames/dedupe";
-import { jsx as jsx68, jsxs as jsxs31 } from "react/jsx-runtime";
-var Title = forwardRef53(
+import { jsx as jsx69, jsxs as jsxs31 } from "react/jsx-runtime";
+var Title = forwardRef54(
   (props, ref) => {
     const {
       elementType: Element = "div",
@@ -4275,9 +4344,9 @@ var Title = forwardRef53(
     const headerClasses = classNames59("mobius", "mobius-title__header");
     const contentClasses = classNames59("mobius", "mobius-title__description");
     const containerClasses = classNames59("mobius", "mobius-title__container");
-    return /* @__PURE__ */ jsx68(Element, { ref, ...otherProps, className: classes, children: /* @__PURE__ */ jsxs31(Flex, { flexDirection: "column", className: containerClasses, children: [
-      /* @__PURE__ */ jsx68("p", { className: headerClasses, children: title }),
-      /* @__PURE__ */ jsx68("p", { className: contentClasses, children: description })
+    return /* @__PURE__ */ jsx69(Element, { ref, ...otherProps, className: classes, children: /* @__PURE__ */ jsxs31(Flex, { flexDirection: "column", className: containerClasses, children: [
+      /* @__PURE__ */ jsx69("p", { className: headerClasses, children: title }),
+      /* @__PURE__ */ jsx69("p", { className: contentClasses, children: description })
     ] }) });
   }
 );
@@ -4285,7 +4354,7 @@ Title.displayName = "Title";
 
 // src/components/Trust/Trust.tsx
 import classNames60 from "classnames/dedupe";
-import { forwardRef as forwardRef54, useEffect as useEffect24, useRef as useRef17, useState as useState23 } from "react";
+import { forwardRef as forwardRef55, useEffect as useEffect24, useRef as useRef17, useState as useState23 } from "react";
 
 // src/components/Trust/constants.ts
 var REQUIRED_TRUSTPILOT_CLASS_NAME = "trustpilot-widget";
@@ -4343,8 +4412,8 @@ var TRUSTPILOT_WIDGET = {
 };
 
 // src/components/Trust/Trust.tsx
-import { jsx as jsx69 } from "react/jsx-runtime";
-var Trust = forwardRef54((props, ref) => {
+import { jsx as jsx70 } from "react/jsx-runtime";
+var Trust = forwardRef55((props, ref) => {
   const {
     elementType: Element = "div",
     variant,
@@ -4391,15 +4460,15 @@ var Trust = forwardRef54((props, ref) => {
   useEffect24(() => {
     setIsMounted(true);
   }, []);
-  if (!isMounted) return /* @__PURE__ */ jsx69("div", { style: styles });
-  return /* @__PURE__ */ jsx69(
+  if (!isMounted) return /* @__PURE__ */ jsx70("div", { style: styles });
+  return /* @__PURE__ */ jsx70(
     Element,
     {
       ref: mergeRefs([trustRef, ref]),
       className: classes,
       style: styles,
       ...dataProps,
-      children: /* @__PURE__ */ jsx69(
+      children: /* @__PURE__ */ jsx70(
         "a",
         {
           href: link,
@@ -4414,10 +4483,10 @@ var Trust = forwardRef54((props, ref) => {
 });
 
 // src/components/ExpandableText/ExpandableText.tsx
-import { useState as useState24, useEffect as useEffect25, useRef as useRef18, forwardRef as forwardRef55, useId as useId12 } from "react";
 import classNames61 from "classnames/dedupe";
-import { jsx as jsx70, jsxs as jsxs32 } from "react/jsx-runtime";
-var ExpandableText = forwardRef55((props, ref) => {
+import { forwardRef as forwardRef56, useEffect as useEffect25, useId as useId12, useRef as useRef18, useState as useState24 } from "react";
+import { jsx as jsx71, jsxs as jsxs32 } from "react/jsx-runtime";
+var ExpandableText = forwardRef56((props, ref) => {
   const {
     text,
     maxLines = 3,
@@ -4447,7 +4516,7 @@ var ExpandableText = forwardRef55((props, ref) => {
     setIsCollapsed(isOverflowing);
   }, [text, shouldCollapse, maxLines]);
   if (breakpoint && !shouldCollapse) {
-    return /* @__PURE__ */ jsx70("div", { ref, className, ...otherProps, children: /* @__PURE__ */ jsx70(Text, { ...textProps, children: /* @__PURE__ */ jsx70("span", { dangerouslySetInnerHTML: { __html: text } }) }) });
+    return /* @__PURE__ */ jsx71("div", { ref, className, ...otherProps, children: /* @__PURE__ */ jsx71(TextOrHTML, { text, textWrapper: true, ...textProps }) });
   }
   const handleAccordionChange = (expanded) => {
     setIsExpanded(expanded);
@@ -4468,7 +4537,7 @@ var ExpandableText = forwardRef55((props, ref) => {
       "data-testid": "expandable-text",
       ...otherProps,
       children: [
-        /* @__PURE__ */ jsx70(
+        /* @__PURE__ */ jsx71(
           "div",
           {
             ref: textRef,
@@ -4476,10 +4545,10 @@ var ExpandableText = forwardRef55((props, ref) => {
             style: textContainerStyle,
             "data-testid": "expandable-text-content",
             "aria-describedby": isCollapsed ? expandButtonId : void 0,
-            children: /* @__PURE__ */ jsx70(Text, { elementType: "span", ...textProps, children: /* @__PURE__ */ jsx70("span", { dangerouslySetInnerHTML: { __html: text } }) })
+            children: /* @__PURE__ */ jsx71(TextOrHTML, { elementType: "span", textWrapper: true, text, ...textProps })
           }
         ),
-        isCollapsed && /* @__PURE__ */ jsx70(
+        isCollapsed && /* @__PURE__ */ jsx71(
           Accordion,
           {
             showText,
@@ -4500,9 +4569,9 @@ var ExpandableText = forwardRef55((props, ref) => {
 ExpandableText.displayName = "ExpandableText";
 
 // src/components/MaskedField/MaskedField.tsx
-import { forwardRef as forwardRef56, useCallback as useCallback7, useEffect as useEffect26 } from "react";
+import { forwardRef as forwardRef57, useCallback as useCallback7, useEffect as useEffect26 } from "react";
 import { useIMask } from "react-imask";
-import { jsx as jsx71 } from "react/jsx-runtime";
+import { jsx as jsx72 } from "react/jsx-runtime";
 var useAcceptHandler = (onChange, useMaskedValue, name) => {
   return useCallback7(
     (maskedValue, maskInstance) => {
@@ -4574,7 +4643,7 @@ var ControlledMaskedField = ({
       setValue(stringValue);
     }
   }, [value, maskRef, setValue, imaskRef]);
-  return /* @__PURE__ */ jsx71(
+  return /* @__PURE__ */ jsx72(
     TextField,
     {
       ...textFieldProps,
@@ -4598,7 +4667,7 @@ var UncontrolledMaskedField = ({
   const { ref: imaskRef, maskRef } = useIMask(mask, { onAccept });
   const combinedRef = useCombinedRef(imaskRef, forwardedRef);
   const handleBlur = useBlurHandler(onBlur, maskRef, useMaskedValue, name);
-  return /* @__PURE__ */ jsx71(
+  return /* @__PURE__ */ jsx72(
     TextField,
     {
       ...textFieldProps,
@@ -4609,10 +4678,10 @@ var UncontrolledMaskedField = ({
     }
   );
 };
-var MaskedField = forwardRef56((props, forwardedRef) => {
+var MaskedField = forwardRef57((props, forwardedRef) => {
   const { value, defaultValue, ...rest } = props;
   if ("value" in props) {
-    return /* @__PURE__ */ jsx71(
+    return /* @__PURE__ */ jsx72(
       ControlledMaskedField,
       {
         ...rest,
@@ -4621,7 +4690,7 @@ var MaskedField = forwardRef56((props, forwardedRef) => {
       }
     );
   } else {
-    return /* @__PURE__ */ jsx71(
+    return /* @__PURE__ */ jsx72(
       UncontrolledMaskedField,
       {
         ...rest,
@@ -4686,6 +4755,7 @@ export {
   TextArea,
   TextAreaInput,
   TextField,
+  TextOrHTML,
   Title,
   Trust,
   VisuallyHidden,