@simplybusiness/mobius 10.1.1 → 10.2.0

package/dist/cjs/components/NumberField/index.js

@@ -1950,6 +1950,10 @@ var init_AddressLookup = __esm({
       );
       const handleSelected = (selected) => {
         setError(null);
+        const isEmpty = typeof selected === "string" ? selected === "" : !selected.id && !selected.value;
+        if (isEmpty) {
+          return Promise.resolve();
+        }
         if (typeof selected === "string" || !selected.id) {
           setError(new Error("Selected option missing id"));
           return Promise.resolve();
@@ -1997,19 +2001,98 @@ var init_AddressLookup2 = __esm({
   }
 });
 
+// src/components/Text/Text.tsx
+var import_dedupe10, import_Text, import_jsx_runtime12, getElementType, Text;
+var init_Text = __esm({
+  "src/components/Text/Text.tsx"() {
+    "use strict";
+    import_dedupe10 = __toESM(require("classnames/dedupe"));
+    import_Text = require("@simplybusiness/mobius/src/components/Text/Text.css");
+    import_jsx_runtime12 = require("react/jsx-runtime");
+    getElementType = (variant, elementType) => {
+      if (variant) {
+        return ["h1", "h2", "h3", "h4"].includes(variant) ? variant : "p";
+      }
+      return elementType || "p";
+    };
+    Text = ({ ref, elementType: Component = "p", ...props }) => {
+      const { variant, className, spacing, ...otherProps } = props;
+      const elementType = getElementType(variant, Component);
+      const variantType = variant || elementType;
+      const classes = (0, import_dedupe10.default)(
+        "mobius",
+        "mobius-text",
+        { [`--is-${variantType}`]: variantType },
+        { [`--has-line-height-${spacing}`]: spacing },
+        className
+      );
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Component, { ref, ...otherProps, className: classes });
+    };
+    Text.displayName = "Text";
+  }
+});
+
+// src/components/TextOrHTML/TextOrHTML.tsx
+var import_react14, import_jsx_runtime13, isHTML, TextOrHTML;
+var init_TextOrHTML = __esm({
+  "src/components/TextOrHTML/TextOrHTML.tsx"() {
+    "use strict";
+    import_react14 = require("react");
+    init_Text();
+    import_jsx_runtime13 = require("react/jsx-runtime");
+    isHTML = (text) => /^\s*<[a-z]/i.test(text);
+    TextOrHTML = ({
+      ref,
+      text,
+      htmlClassName,
+      htmlElementType,
+      textWrapper = false,
+      autoDetect = false,
+      ...textProps
+    }) => {
+      const textIsHTML = autoDetect && isHTML(text);
+      const shouldWrapInText = autoDetect ? textWrapper || !textIsHTML : textWrapper;
+      const resolvedElementType = htmlElementType ?? (textIsHTML ? "div" : "span");
+      const DangerousComponent = resolvedElementType;
+      const dangerousHTML = (0, import_react14.useMemo)(() => ({ __html: text }), [text]);
+      const dangerousElement = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        DangerousComponent,
+        {
+          className: htmlClassName,
+          dangerouslySetInnerHTML: dangerousHTML
+        }
+      );
+      if (shouldWrapInText) {
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text, { ref, ...textProps, children: dangerousElement });
+      }
+      return dangerousElement;
+    };
+    TextOrHTML.displayName = "TextOrHTML";
+  }
+});
+
+// src/components/TextOrHTML/index.tsx
+var init_TextOrHTML2 = __esm({
+  "src/components/TextOrHTML/index.tsx"() {
+    "use strict";
+    init_TextOrHTML();
+  }
+});
+
 // src/components/Alert/Alert.tsx
 function isAlertVariant(value) {
   return value === "info" || value === "success" || value === "warning" || value === "error";
 }
-var import_icons3, import_dedupe10, import_Alert, import_jsx_runtime12, Alert;
+var import_icons3, import_dedupe11, import_Alert, import_jsx_runtime14, Alert;
 var init_Alert = __esm({
   "src/components/Alert/Alert.tsx"() {
     "use strict";
     import_icons3 = require("@simplybusiness/icons");
-    import_dedupe10 = __toESM(require("classnames/dedupe"));
+    import_dedupe11 = __toESM(require("classnames/dedupe"));
     init_Icon2();
+    init_TextOrHTML2();
     import_Alert = require("@simplybusiness/mobius/src/components/Alert/Alert.css");
-    import_jsx_runtime12 = require("react/jsx-runtime");
+    import_jsx_runtime14 = require("react/jsx-runtime");
     Alert = ({ ref, ...props }) => {
       const {
         elementType: Element = "div",
@@ -2022,7 +2105,7 @@ var init_Alert = __esm({
       if (!show) return null;
       const variant = variantProp && isAlertVariant(variantProp) ? variantProp : "info";
       const colorValue = variant === "success" ? `var(--color-valid)` : `var(--color-${variant})`;
-      const classes = (0, import_dedupe10.default)(
+      const classes = (0, import_dedupe11.default)(
         "mobius",
         "mobius-alert",
         {
@@ -2040,14 +2123,23 @@ var init_Alert = __esm({
         warning: import_icons3.warning,
         error: import_icons3.error
       };
-      const headerClasses = (0, import_dedupe10.default)("mobius", "mobius-alert__header");
-      const iconClasses = (0, import_dedupe10.default)("mobius", "mobius-alert__icon");
-      const contentClasses = (0, import_dedupe10.default)("mobius", "mobius-alert__content");
-      return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Element, { ref, role: "alert", ...otherProps, className: classes, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: iconClasses, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { icon: icon[variant], color: colorValue }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
-          header && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: headerClasses, children: header }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: contentClasses, children })
+      const headerClasses = (0, import_dedupe11.default)("mobius", "mobius-alert__header");
+      const iconClasses = (0, import_dedupe11.default)("mobius", "mobius-alert__icon");
+      const contentClasses = (0, import_dedupe11.default)("mobius", "mobius-alert__content");
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Element, { ref, role: "alert", ...otherProps, className: classes, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: iconClasses, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { icon: icon[variant], color: colorValue }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { children: [
+          header && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            TextOrHTML,
+            {
+              autoDetect: true,
+              htmlElementType: "span",
+              className: headerClasses,
+              htmlClassName: headerClasses,
+              text: header
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: contentClasses, children })
         ] })
       ] });
     };
@@ -2064,14 +2156,14 @@ var init_Alert2 = __esm({
 });
 
 // src/components/Box/Box.tsx
-var import_dedupe11, import_Box, import_jsx_runtime13, Box;
+var import_dedupe12, import_Box, import_jsx_runtime15, Box;
 var init_Box = __esm({
   "src/components/Box/Box.tsx"() {
     "use strict";
-    import_dedupe11 = __toESM(require("classnames/dedupe"));
+    import_dedupe12 = __toESM(require("classnames/dedupe"));
     init_utils();
     import_Box = require("@simplybusiness/mobius/src/components/Box/Box.css");
-    import_jsx_runtime13 = require("react/jsx-runtime");
+    import_jsx_runtime15 = require("react/jsx-runtime");
     Box = ({ ref, ...props }) => {
       const {
         elementType: Element = "div",
@@ -2097,7 +2189,7 @@ var init_Box = __esm({
         style,
         ...otherProps
       } = props;
-      const classes = (0, import_dedupe11.default)("mobius", "mobius-box", otherProps.className);
+      const classes = (0, import_dedupe12.default)("mobius", "mobius-box", otherProps.className);
       const styleProps = filterUndefinedProps({
         padding: getSpacingValue(padding),
         paddingInline: getSpacingValue(paddingInline || paddingX),
@@ -2114,7 +2206,7 @@ var init_Box = __esm({
         height,
         ...style
       });
-      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Element, { ref, style: styleProps, ...otherProps, className: classes });
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Element, { ref, style: styleProps, ...otherProps, className: classes });
     };
     Box.displayName = "Box";
   }
@@ -2129,27 +2221,27 @@ var init_Box2 = __esm({
 });
 
 // src/components/Breadcrumbs/Breadcrumbs.tsx
-var import_react14, import_dedupe12, import_Breadcrumbs, import_jsx_runtime14, Breadcrumbs;
+var import_react15, import_dedupe13, import_Breadcrumbs, import_jsx_runtime16, Breadcrumbs;
 var init_Breadcrumbs = __esm({
   "src/components/Breadcrumbs/Breadcrumbs.tsx"() {
     "use strict";
     "use client";
-    import_react14 = require("react");
-    import_dedupe12 = __toESM(require("classnames/dedupe"));
+    import_react15 = require("react");
+    import_dedupe13 = __toESM(require("classnames/dedupe"));
     import_Breadcrumbs = require("@simplybusiness/mobius/src/components/Breadcrumbs/Breadcrumbs.css");
-    import_jsx_runtime14 = require("react/jsx-runtime");
+    import_jsx_runtime16 = require("react/jsx-runtime");
     Breadcrumbs = ({ ref, ...props }) => {
       const { "aria-label": ariaLabel = "Breadcrumbs" } = props;
       const { navProps } = { navProps: { "aria-label": ariaLabel } };
       const { children, ...otherProps } = props;
-      const childArray = import_react14.Children.toArray(children);
-      const classes = (0, import_dedupe12.default)(
+      const childArray = import_react15.Children.toArray(children);
+      const classes = (0, import_dedupe13.default)(
         "mobius",
         "mobius-breadcrumb",
         otherProps.className
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("nav", { ref, ...otherProps, ...navProps, className: classes, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("ul", { children: childArray.map(
-        (child, i) => (0, import_react14.cloneElement)(
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("nav", { ref, ...otherProps, ...navProps, className: classes, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("ul", { children: childArray.map(
+        (child, i) => (0, import_react15.cloneElement)(
           child,
           {
             key: i,
@@ -2163,22 +2255,22 @@ var init_Breadcrumbs = __esm({
 });
 
 // src/components/Breadcrumbs/BreadcrumbItem.tsx
-var import_react15, import_dedupe13, import_jsx_runtime15, BreadcrumbItem;
+var import_react16, import_dedupe14, import_jsx_runtime17, BreadcrumbItem;
 var init_BreadcrumbItem = __esm({
   "src/components/Breadcrumbs/BreadcrumbItem.tsx"() {
     "use strict";
     "use client";
-    import_react15 = require("react");
-    import_dedupe13 = __toESM(require("classnames/dedupe"));
+    import_react16 = require("react");
+    import_dedupe14 = __toESM(require("classnames/dedupe"));
     init_Box2();
-    import_jsx_runtime15 = require("react/jsx-runtime");
+    import_jsx_runtime17 = require("react/jsx-runtime");
     BreadcrumbItem = ({ ref, ...props }) => {
       const {
         isDisabled = false,
         isCurrent = false,
         "aria-current": ariaCurrent = "page",
         children,
-        separator = /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { className: "mobius-breadcrumb__separator", "aria-hidden": "true", children: ">" }),
+        separator = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Box, { className: "mobius-breadcrumb__separator", "aria-hidden": "true", children: ">" }),
         ...otherProps
       } = props;
       const { itemProps } = {
@@ -2188,14 +2280,14 @@ var init_BreadcrumbItem = __esm({
           ...otherProps
         }
       };
-      const classes = (0, import_dedupe13.default)(
+      const classes = (0, import_dedupe14.default)(
         "mobius",
         "mobius-breadcrumb__item",
         props.className
       );
-      const child = typeof children === "string" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { ...itemProps, children }) : import_react15.Children.only(children);
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("li", { className: classes, children: [
-        (0, import_react15.cloneElement)(child, {
+      const child = typeof children === "string" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { ...itemProps, children }) : import_react16.Children.only(children);
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("li", { className: classes, children: [
+        (0, import_react16.cloneElement)(child, {
           ...child.props,
           ...itemProps,
           ref
@@ -2217,19 +2309,19 @@ var init_Breadcrumbs2 = __esm({
 });
 
 // src/components/Button/Loading.tsx
-var import_icons4, import_jsx_runtime16, Loading;
+var import_icons4, import_jsx_runtime18, Loading;
 var init_Loading = __esm({
   "src/components/Button/Loading.tsx"() {
     "use strict";
     import_icons4 = require("@simplybusiness/icons");
     init_Icon2();
     init_VisuallyHidden2();
-    import_jsx_runtime16 = require("react/jsx-runtime");
+    import_jsx_runtime18 = require("react/jsx-runtime");
     Loading = (props) => {
       const { children } = props;
-      return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "mobius-button__icon-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { icon: import_icons4.loading, spin: true, size: "md" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(VisuallyHidden, { className: "mobius-button__loading-text", children: "Loading" }),
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "mobius-button__icon-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { icon: import_icons4.loading, spin: true, size: "md" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VisuallyHidden, { className: "mobius-button__loading-text", children: "Loading" }),
         children
       ] });
     };
@@ -2237,33 +2329,33 @@ var init_Loading = __esm({
 });
 
 // src/components/Button/Success.tsx
-var import_icons5, import_jsx_runtime17, Success;
+var import_icons5, import_jsx_runtime19, Success;
 var init_Success = __esm({
   "src/components/Button/Success.tsx"() {
     "use strict";
     import_icons5 = require("@simplybusiness/icons");
     init_Icon2();
     init_VisuallyHidden2();
-    import_jsx_runtime17 = require("react/jsx-runtime");
-    Success = () => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "mobius-button__icon-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon, { icon: import_icons5.tick, size: "md" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(VisuallyHidden, { className: "mobius-button__success-text", children: "Success" })
+    import_jsx_runtime19 = require("react/jsx-runtime");
+    Success = () => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "mobius-button__icon-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { icon: import_icons5.tick, size: "md" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(VisuallyHidden, { className: "mobius-button__success-text", children: "Success" })
     ] });
   }
 });
 
 // src/components/Button/Button.tsx
-var import_dedupe14, import_Button, import_jsx_runtime18, Button;
+var import_dedupe15, import_Button, import_jsx_runtime20, Button;
 var init_Button = __esm({
   "src/components/Button/Button.tsx"() {
     "use strict";
     "use client";
-    import_dedupe14 = __toESM(require("classnames/dedupe"));
+    import_dedupe15 = __toESM(require("classnames/dedupe"));
     init_Loading();
     init_useButton2();
     init_Success();
     import_Button = require("@simplybusiness/mobius/src/components/Button/Button.css");
-    import_jsx_runtime18 = require("react/jsx-runtime");
+    import_jsx_runtime20 = require("react/jsx-runtime");
     Button = ({ ref, ...props }) => {
       const {
         children,
@@ -2278,7 +2370,7 @@ var init_Button = __esm({
         ...otherProps
       } = props;
       const { buttonProps } = useButton(props);
-      otherProps.className = (0, import_dedupe14.default)(
+      otherProps.className = (0, import_dedupe15.default)(
         "mobius",
         "mobius-button",
         `--variant-${variant}`,
@@ -2290,9 +2382,9 @@ var init_Button = __esm({
         },
         otherProps.className
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Component, { ref, ...buttonProps, ...otherProps, children: [
-        isLoading ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Loading, { children }) : children,
-        isSuccess && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Success, {})
+      return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Component, { ref, ...buttonProps, ...otherProps, children: [
+        isLoading ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Loading, { children }) : children,
+        isSuccess && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Success, {})
       ] });
     };
     Button.displayName = "Button";
@@ -2308,16 +2400,16 @@ var init_Button2 = __esm({
 });
 
 // src/components/Stack/Stack.tsx
-var import_dedupe15, import_Stack, import_jsx_runtime19, Stack;
+var import_dedupe16, import_Stack, import_jsx_runtime21, Stack;
 var init_Stack = __esm({
   "src/components/Stack/Stack.tsx"() {
     "use strict";
-    import_dedupe15 = __toESM(require("classnames/dedupe"));
+    import_dedupe16 = __toESM(require("classnames/dedupe"));
     import_Stack = require("@simplybusiness/mobius/src/components/Stack/Stack.css");
-    import_jsx_runtime19 = require("react/jsx-runtime");
+    import_jsx_runtime21 = require("react/jsx-runtime");
     Stack = ({ ref, ...props }) => {
       const { elementType: Element = "div", gap, ...otherProps } = props;
-      const classes = (0, import_dedupe15.default)(
+      const classes = (0, import_dedupe16.default)(
         "mobius",
         "mobius-stack",
         {
@@ -2325,7 +2417,7 @@ var init_Stack = __esm({
         },
         otherProps.className
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Element, { ref, ...otherProps, className: classes });
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Element, { ref, ...otherProps, className: classes });
     };
     Stack.displayName = "Stack";
   }
@@ -2340,13 +2432,13 @@ var init_Stack2 = __esm({
 });
 
 // src/components/Checkbox/Checkbox.tsx
-var import_react16, import_dedupe16, import_icons6, import_Checkbox, import_jsx_runtime20, Checkbox;
+var import_react17, import_dedupe17, import_icons6, import_Checkbox, import_jsx_runtime22, Checkbox;
 var init_Checkbox = __esm({
   "src/components/Checkbox/Checkbox.tsx"() {
     "use strict";
     "use client";
-    import_react16 = require("react");
-    import_dedupe16 = __toESM(require("classnames/dedupe"));
+    import_react17 = require("react");
+    import_dedupe17 = __toESM(require("classnames/dedupe"));
     import_icons6 = require("@simplybusiness/icons");
     init_ErrorMessage2();
     init_spaceDelimitedList();
@@ -2354,7 +2446,7 @@ var init_Checkbox = __esm({
     init_Icon2();
     init_Stack2();
     import_Checkbox = require("@simplybusiness/mobius/src/components/Checkbox/Checkbox.css");
-    import_jsx_runtime20 = require("react/jsx-runtime");
+    import_jsx_runtime22 = require("react/jsx-runtime");
     Checkbox = ({ ref, ...props }) => {
       const {
         id,
@@ -2374,18 +2466,18 @@ var init_Checkbox = __esm({
         ["aria-describedby"]: ariaDescribedBy,
         ...rest
       } = props;
-      const [checked, setChecked] = (0, import_react16.useState)(defaultSelected);
-      const fallbackRef = (0, import_react16.useRef)(null);
+      const [checked, setChecked] = (0, import_react17.useState)(defaultSelected);
+      const fallbackRef = (0, import_react17.useRef)(null);
       const refObj = ref || fallbackRef;
-      const inputId = (0, import_react16.useId)();
+      const inputId = (0, import_react17.useId)();
       const isControlled = typeof selected === "boolean";
-      (0, import_react16.useEffect)(() => {
+      (0, import_react17.useEffect)(() => {
         if (isControlled) {
           setChecked(selected);
         }
       }, [selected, isControlled]);
       const validationClasses = useValidationClasses({ isInvalid });
-      const sharedClasses = (0, import_dedupe16.default)(
+      const sharedClasses = (0, import_dedupe17.default)(
         {
           "--is-disabled": isDisabled,
           "--is-selected": checked,
@@ -2394,31 +2486,31 @@ var init_Checkbox = __esm({
         },
         validationClasses
       );
-      const wrapperClasses = (0, import_dedupe16.default)(
+      const wrapperClasses = (0, import_dedupe17.default)(
         "mobius",
         "mobius-checkbox",
         sharedClasses,
         className
       );
-      const labelClasses = (0, import_dedupe16.default)("mobius-checkbox__label", sharedClasses);
-      const inputClasses = (0, import_dedupe16.default)("mobius-checkbox__input", sharedClasses);
-      const iconClasses = (0, import_dedupe16.default)("mobius-checkbox__icon", sharedClasses);
-      const errorMessageId = (0, import_react16.useId)();
+      const labelClasses = (0, import_dedupe17.default)("mobius-checkbox__label", sharedClasses);
+      const inputClasses = (0, import_dedupe17.default)("mobius-checkbox__input", sharedClasses);
+      const iconClasses = (0, import_dedupe17.default)("mobius-checkbox__icon", sharedClasses);
+      const errorMessageId = (0, import_react17.useId)();
       const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
       const describedBy = spaceDelimitedList([
         shouldErrorMessageShow,
         ariaDescribedBy
       ]);
-      const labelId = (0, import_react16.useId)();
+      const labelId = (0, import_react17.useId)();
       const handleChange = (event) => {
         setChecked(!checked);
         if (onChange) {
           onChange(event, isLastItem);
         }
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Stack, { gap: "xs", className: wrapperClasses, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("label", { className: labelClasses, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Stack, { gap: "xs", className: wrapperClasses, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("label", { className: labelClasses, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             "input",
             {
               "aria-describedby": describedBy,
@@ -2439,7 +2531,7 @@ var init_Checkbox = __esm({
               ...rest
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             Icon,
             {
               icon: checked ? import_icons6.squareTick : import_icons6.square,
@@ -2447,9 +2539,9 @@ var init_Checkbox = __esm({
               className: iconClasses
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { id: labelId, className: "mobius-checkbox__visible-label", children: label })
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { id: labelId, className: "mobius-checkbox__visible-label", children: label })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ErrorMessage, { id: errorMessageId, errorMessage })
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ErrorMessage, { id: errorMessageId, errorMessage })
       ] });
     };
     Checkbox.displayName = "Checkbox";
@@ -2457,18 +2549,18 @@ var init_Checkbox = __esm({
 });
 
 // src/components/Label/Label.tsx
-var import_dedupe17, import_Label, import_jsx_runtime21, Label;
+var import_dedupe18, import_Label, import_jsx_runtime23, Label;
 var init_Label = __esm({
   "src/components/Label/Label.tsx"() {
     "use strict";
-    import_dedupe17 = __toESM(require("classnames/dedupe"));
+    import_dedupe18 = __toESM(require("classnames/dedupe"));
     import_Label = require("@simplybusiness/mobius/src/components/Label/Label.css");
-    import_jsx_runtime21 = require("react/jsx-runtime");
+    import_jsx_runtime23 = require("react/jsx-runtime");
     Label = ({ ref, ...props }) => {
       const { elementType: Element = "label", children, ...otherProps } = props;
-      const classes = (0, import_dedupe17.default)("mobius", "mobius-label", props.className);
+      const classes = (0, import_dedupe18.default)("mobius", "mobius-label", props.className);
       otherProps.className = classes;
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Element, { ref, ...otherProps, className: classes, children });
+      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Element, { ref, ...otherProps, className: classes, children });
     };
     Label.displayName = "Label";
   }
@@ -2483,20 +2575,20 @@ var init_Label2 = __esm({
 });
 
 // src/components/Checkbox/CheckboxGroup.tsx
-var import_dedupe18, import_react17, import_CheckboxGroup, import_jsx_runtime22, CheckboxGroup;
+var import_dedupe19, import_react18, import_CheckboxGroup, import_jsx_runtime24, CheckboxGroup;
 var init_CheckboxGroup = __esm({
   "src/components/Checkbox/CheckboxGroup.tsx"() {
     "use strict";
     "use client";
-    import_dedupe18 = __toESM(require("classnames/dedupe"));
-    import_react17 = require("react");
+    import_dedupe19 = __toESM(require("classnames/dedupe"));
+    import_react18 = require("react");
     init_hooks();
     init_spaceDelimitedList();
     init_ErrorMessage2();
     init_Label2();
     init_Checkbox();
     import_CheckboxGroup = require("@simplybusiness/mobius/src/components/Checkbox/CheckboxGroup.css");
-    import_jsx_runtime22 = require("react/jsx-runtime");
+    import_jsx_runtime24 = require("react/jsx-runtime");
     CheckboxGroup = ({ ref, ...props }) => {
       const {
         label,
@@ -2514,10 +2606,10 @@ var init_CheckboxGroup = __esm({
         lastItemDisables = false,
         ...rest
       } = props;
-      const [selected, setSelected] = (0, import_react17.useState)(defaultValue);
-      const isInitializedRef = (0, import_react17.useRef)(false);
-      const prevDefaultValueRef = (0, import_react17.useRef)(defaultValue);
-      (0, import_react17.useEffect)(() => {
+      const [selected, setSelected] = (0, import_react18.useState)(defaultValue);
+      const isInitializedRef = (0, import_react18.useRef)(false);
+      const prevDefaultValueRef = (0, import_react18.useRef)(defaultValue);
+      (0, import_react18.useEffect)(() => {
         const hasChanged = defaultValue.length !== prevDefaultValueRef.current.length || defaultValue.some(
           (val, index) => val !== prevDefaultValueRef.current[index]
         );
@@ -2527,7 +2619,7 @@ var init_CheckboxGroup = __esm({
           isInitializedRef.current = true;
         }
       }, [defaultValue]);
-      const checkboxGroupClasses = (0, import_dedupe18.default)(
+      const checkboxGroupClasses = (0, import_dedupe19.default)(
         "mobius",
         "mobius-checkbox-group",
         className,
@@ -2539,19 +2631,19 @@ var init_CheckboxGroup = __esm({
         }
       );
       const validationClasses = useValidationClasses({ isInvalid });
-      const labelClasses = (0, import_dedupe18.default)(
+      const labelClasses = (0, import_dedupe19.default)(
         {
           "--is-disabled": isDisabled
         },
         validationClasses
       );
-      const errorMessageId = (0, import_react17.useId)();
+      const errorMessageId = (0, import_react18.useId)();
       const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
       const describedBy = spaceDelimitedList([
         shouldErrorMessageShow,
         props["aria-describedby"]
       ]);
-      const labelId = (0, import_react17.useId)();
+      const labelId = (0, import_react18.useId)();
       const handleChange = (event, isLastItem = false) => {
         const {
           target: { value, checked }
@@ -2569,12 +2661,12 @@ var init_CheckboxGroup = __esm({
         setSelected(newValue);
         onChange?.(newValue);
       };
-      const childrenArray = import_react17.Children.toArray(children);
+      const childrenArray = import_react18.Children.toArray(children);
       const lastCheckbox = childrenArray.filter(
-        (child) => (0, import_react17.isValidElement)(child) && child.type === Checkbox
+        (child) => (0, import_react18.isValidElement)(child) && child.type === Checkbox
       ).pop();
       const lastCheckboxIsChecked = lastCheckbox && selected.includes(lastCheckbox.props.value);
-      return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
         "div",
         {
           ...rest,
@@ -2583,16 +2675,16 @@ var init_CheckboxGroup = __esm({
           className: checkboxGroupClasses,
           role: "group",
           style: {
-            "--checkbox-items-per-row": itemsPerRow || import_react17.Children.count(children)
+            "--checkbox-items-per-row": itemsPerRow || import_react18.Children.count(children)
           },
           children: [
-            label && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Label, { elementType: "span", id: labelId, className: labelClasses, children: label }),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "mobius-checkbox-group__wrapper", children: childrenArray.map((child) => {
-              if ((0, import_react17.isValidElement)(child)) {
+            label && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Label, { elementType: "span", id: labelId, className: labelClasses, children: label }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "mobius-checkbox-group__wrapper", children: childrenArray.map((child) => {
+              if ((0, import_react18.isValidElement)(child)) {
                 const isLastItem = child === lastCheckbox;
                 const isChildDisabled = isDisabled || lastItemDisables && lastCheckboxIsChecked && !isLastItem;
                 const childProps = child.props;
-                return (0, import_react17.cloneElement)(
+                return (0, import_react18.cloneElement)(
                   child,
                   {
                     isDisabled: isChildDisabled,
@@ -2608,7 +2700,7 @@ var init_CheckboxGroup = __esm({
               }
               return child;
             }) }),
-            errorMessage && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ErrorMessage, { id: errorMessageId, errorMessage })
+            errorMessage && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ErrorMessage, { id: errorMessageId, errorMessage })
           ]
         }
       );
@@ -2635,23 +2727,23 @@ var init_Checkbox2 = __esm({
 });
 
 // src/components/Container/Container.tsx
-var import_dedupe19, import_Container, import_jsx_runtime23, Container;
+var import_dedupe20, import_Container, import_jsx_runtime25, Container;
 var init_Container = __esm({
   "src/components/Container/Container.tsx"() {
     "use strict";
-    import_dedupe19 = __toESM(require("classnames/dedupe"));
+    import_dedupe20 = __toESM(require("classnames/dedupe"));
     init_utils();
     import_Container = require("@simplybusiness/mobius/src/components/Container/Container.css");
-    import_jsx_runtime23 = require("react/jsx-runtime");
+    import_jsx_runtime25 = require("react/jsx-runtime");
     Container = ({ ref, ...props }) => {
       const { elementType: Element = "div", size = "md", ...otherProps } = props;
-      const classes = (0, import_dedupe19.default)(
+      const classes = (0, import_dedupe20.default)(
         "mobius",
         "mobius-container",
         sizeClasses(size),
         otherProps.className
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Element, { ref, ...otherProps, className: classes });
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Element, { ref, ...otherProps, className: classes });
     };
     Container.displayName = "Container";
   }
@@ -2704,17 +2796,17 @@ var init_validation = __esm({
 });
 
 // src/components/DateField/DateField.tsx
-var import_dedupe20, import_react18, import_jsx_runtime24, MIN_MAX_ERROR, DateField;
+var import_dedupe21, import_react19, import_jsx_runtime26, MIN_MAX_ERROR, DateField;
 var init_DateField = __esm({
   "src/components/DateField/DateField.tsx"() {
     "use strict";
     "use client";
-    import_dedupe20 = __toESM(require("classnames/dedupe"));
-    import_react18 = require("react");
+    import_dedupe21 = __toESM(require("classnames/dedupe"));
+    import_react19 = require("react");
     init_mergeRefs();
     init_TextField2();
     init_validation();
-    import_jsx_runtime24 = require("react/jsx-runtime");
+    import_jsx_runtime26 = require("react/jsx-runtime");
     MIN_MAX_ERROR = '"min" value should not be greater than "max" value.';
     DateField = ({ ref, ...props }) => {
       const {
@@ -2727,10 +2819,10 @@ var init_DateField = __esm({
         value,
         ...otherProps
       } = props;
-      const [error3, setError] = (0, import_react18.useState)(errorMessage);
-      const [isInvalid, setIsInvalid] = (0, import_react18.useState)(void 0);
-      const localRef = (0, import_react18.useRef)(null);
-      const classes = (0, import_dedupe20.default)("mobius-date-field", className);
+      const [error3, setError] = (0, import_react19.useState)(errorMessage);
+      const [isInvalid, setIsInvalid] = (0, import_react19.useState)(void 0);
+      const localRef = (0, import_react19.useRef)(null);
+      const classes = (0, import_dedupe21.default)("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;
@@ -2743,7 +2835,7 @@ var init_DateField = __esm({
         setError(props.errorMessage);
         setIsInvalid(false);
       };
-      (0, import_react18.useEffect)(() => {
+      (0, import_react19.useEffect)(() => {
         if (!isValidDate(min, format)) {
           setInvalidState(`Invalid min date: ${min}`);
           return;
@@ -2776,7 +2868,7 @@ var init_DateField = __esm({
         validate();
         otherProps.onBlur?.(event);
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         TextField,
         {
           ref: mergeRefs([localRef, ref]),
@@ -2807,23 +2899,23 @@ var init_DateField2 = __esm({
 });
 
 // src/components/Drawer/Content.tsx
-var import_jsx_runtime25, Content;
+var import_jsx_runtime27, Content;
 var init_Content = __esm({
   "src/components/Drawer/Content.tsx"() {
     "use strict";
-    import_jsx_runtime25 = require("react/jsx-runtime");
-    Content = ({ ref, children, ...otherProps }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ref, ...otherProps, className: "mobius-drawer__content", children });
+    import_jsx_runtime27 = require("react/jsx-runtime");
+    Content = ({ ref, children, ...otherProps }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { ref, ...otherProps, className: "mobius-drawer__content", children });
     Content.displayName = "Content";
   }
 });
 
 // src/components/Drawer/DrawerContext.tsx
-var import_react19, DrawerContext;
+var import_react20, DrawerContext;
 var init_DrawerContext = __esm({
   "src/components/Drawer/DrawerContext.tsx"() {
     "use strict";
-    import_react19 = require("react");
-    DrawerContext = (0, import_react19.createContext)({
+    import_react20 = require("react");
+    DrawerContext = (0, import_react20.createContext)({
       onClose: () => {
       },
       closeLabel: void 0,
@@ -2833,19 +2925,19 @@ var init_DrawerContext = __esm({
 });
 
 // src/components/Drawer/Drawer.tsx
-var import_dedupe21, import_react20, import_Drawer, import_jsx_runtime26, TRANSITION_CSS_VARIABLE, Drawer;
+var import_dedupe22, import_react21, import_Drawer, import_jsx_runtime28, TRANSITION_CSS_VARIABLE, Drawer;
 var init_Drawer = __esm({
   "src/components/Drawer/Drawer.tsx"() {
     "use strict";
     "use client";
-    import_dedupe21 = __toESM(require("classnames/dedupe"));
-    import_react20 = require("react");
+    import_dedupe22 = __toESM(require("classnames/dedupe"));
+    import_react21 = require("react");
     init_hooks();
     init_utils();
     init_VisuallyHidden2();
     init_DrawerContext();
     import_Drawer = require("@simplybusiness/mobius/src/components/Drawer/Drawer.css");
-    import_jsx_runtime26 = require("react/jsx-runtime");
+    import_jsx_runtime28 = require("react/jsx-runtime");
     TRANSITION_CSS_VARIABLE = "--drawer-transition-duration";
     Drawer = ({ ref, ...props }) => {
       const {
@@ -2858,8 +2950,8 @@ var init_Drawer = __esm({
         onClose,
         children
       } = props;
-      const dialogRef = (0, import_react20.useRef)(null);
-      const [shouldTransition, setShouldTransition] = (0, import_react20.useState)(false);
+      const dialogRef = (0, import_react21.useRef)(null);
+      const [shouldTransition, setShouldTransition] = (0, import_react21.useState)(false);
       const { close } = useDialog({
         ref: dialogRef,
         isOpen,
@@ -2870,9 +2962,9 @@ var init_Drawer = __esm({
           CSSVariable: TRANSITION_CSS_VARIABLE
         }
       });
-      const hiddenId = `dialog-screen-reader-announce-${(0, import_react20.useId)()}`;
-      const headerId = `dialog-header-${(0, import_react20.useId)()}`;
-      const dialogClasses = (0, import_dedupe21.default)(
+      const hiddenId = `dialog-screen-reader-announce-${(0, import_react21.useId)()}`;
+      const headerId = `dialog-header-${(0, import_react21.useId)()}`;
+      const dialogClasses = (0, import_dedupe22.default)(
         "mobius",
         "mobius-drawer",
         `--${direction}`,
@@ -2881,10 +2973,10 @@ var init_Drawer = __esm({
           "--should-transition": shouldTransition
         }
       );
-      (0, import_react20.useEffect)(() => {
+      (0, import_react21.useEffect)(() => {
         setShouldTransition(supportsDialog());
       }, []);
-      const contextValue = (0, import_react20.useMemo)(
+      const contextValue = (0, import_react21.useMemo)(
         () => ({
           onClose: close,
           closeLabel,
@@ -2892,18 +2984,18 @@ var init_Drawer = __esm({
         }),
         [close, closeLabel, headerId]
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
         "dialog",
         {
-          id: (0, import_react20.useId)(),
+          id: (0, import_react21.useId)(),
           ref: mergeRefs([dialogRef, ref]),
           onCancel: close,
           className: dialogClasses,
           "aria-describedby": hiddenId,
           "aria-labelledby": headerId,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { id: hiddenId, children: announce }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DrawerContext.Provider, { value: contextValue, children })
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { id: hiddenId, children: announce }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DrawerContext.Provider, { value: contextValue, children })
           ]
         }
       );
@@ -2913,21 +3005,21 @@ var init_Drawer = __esm({
 });
 
 // src/components/Drawer/useDrawer.ts
-var import_react21, useDrawer;
+var import_react22, useDrawer;
 var init_useDrawer = __esm({
   "src/components/Drawer/useDrawer.ts"() {
     "use strict";
-    import_react21 = require("react");
+    import_react22 = require("react");
     init_DrawerContext();
     useDrawer = () => {
-      const { onClose, closeLabel, headerId } = (0, import_react21.useContext)(DrawerContext);
+      const { onClose, closeLabel, headerId } = (0, import_react22.useContext)(DrawerContext);
       return { onClose, closeLabel, headerId };
     };
   }
 });
 
 // src/components/Drawer/Header.tsx
-var import_icons7, import_jsx_runtime27, Header;
+var import_icons7, import_jsx_runtime29, Header;
 var init_Header = __esm({
   "src/components/Drawer/Header.tsx"() {
     "use strict";
@@ -2935,12 +3027,12 @@ var init_Header = __esm({
     init_Button2();
     init_Icon2();
     init_useDrawer();
-    import_jsx_runtime27 = require("react/jsx-runtime");
+    import_jsx_runtime29 = require("react/jsx-runtime");
     Header = ({ ref, children, ...otherProps }) => {
       const { onClose, closeLabel, headerId } = useDrawer();
-      return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("header", { ref, ...otherProps, className: "mobius-drawer__header", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("h2", { id: headerId, children }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("header", { ref, ...otherProps, className: "mobius-drawer__header", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("h2", { id: headerId, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
           Button,
           {
             "aria-label": "Close",
@@ -2949,7 +3041,7 @@ var init_Header = __esm({
             className: "mobius-drawer__close",
             size: "sm",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon, { icon: import_icons7.cross }),
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon, { icon: import_icons7.cross }),
               " ",
               closeLabel
             ]
@@ -2978,17 +3070,17 @@ var init_Drawer2 = __esm({
 });
 
 // src/components/DropdownMenu/DropdownMenu.tsx
-var import_react22, import_react_accessible_dropdown_menu_hook, import_dedupe22, import_DropdownMenu, import_jsx_runtime28, DropdownMenu;
+var import_react23, import_react_accessible_dropdown_menu_hook, import_dedupe23, import_DropdownMenu, import_jsx_runtime30, DropdownMenu;
 var init_DropdownMenu = __esm({
   "src/components/DropdownMenu/DropdownMenu.tsx"() {
     "use strict";
     "use client";
-    import_react22 = require("react");
+    import_react23 = require("react");
     import_react_accessible_dropdown_menu_hook = __toESM(require("react-accessible-dropdown-menu-hook"));
-    import_dedupe22 = __toESM(require("classnames/dedupe"));
+    import_dedupe23 = __toESM(require("classnames/dedupe"));
     init_Button2();
     import_DropdownMenu = require("@simplybusiness/mobius/src/components/DropdownMenu/DropdownMenu.css");
-    import_jsx_runtime28 = require("react/jsx-runtime");
+    import_jsx_runtime30 = require("react/jsx-runtime");
     DropdownMenu = ({ ref, ...props }) => {
       const {
         elementType: Element = "nav",
@@ -2997,21 +3089,21 @@ var init_DropdownMenu = __esm({
         children,
         ...otherProps
       } = props;
-      const [activeId, setActiveId] = (0, import_react22.useState)(null);
-      const numberOfItems = import_react22.Children.count(children);
+      const [activeId, setActiveId] = (0, import_react23.useState)(null);
+      const numberOfItems = import_react23.Children.count(children);
       const {
         buttonProps,
         itemProps,
         isOpen: open,
         setIsOpen
       } = (0, import_react_accessible_dropdown_menu_hook.default)(numberOfItems);
-      const classes = (0, import_dedupe22.default)(
+      const classes = (0, import_dedupe23.default)(
         "mobius",
         "mobius-dropdown-menu",
         otherProps.className
       );
-      const triggerClasses = (0, import_dedupe22.default)("mobius", "mobius-dropdown-menu__trigger");
-      const listClasses = (0, import_dedupe22.default)("mobius", "mobius-dropdown-menu__list", {
+      const triggerClasses = (0, import_dedupe23.default)("mobius", "mobius-dropdown-menu__trigger");
+      const listClasses = (0, import_dedupe23.default)("mobius", "mobius-dropdown-menu__list", {
         "--is-open": open
       });
       const handleChildClick = ({ onClick }, index) => {
@@ -3021,16 +3113,16 @@ var init_DropdownMenu = __esm({
           onClick();
         }
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Element, { ref, ...otherProps, className: classes, children: [
-        trigger ? (0, import_react22.cloneElement)(trigger, {
+      return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Element, { ref, ...otherProps, className: classes, children: [
+        trigger ? (0, import_react23.cloneElement)(trigger, {
           className: triggerClasses,
           open,
           label,
           ...buttonProps
-        }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Button, { className: triggerClasses, ...buttonProps, children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("ul", { className: listClasses, role: "menu", children: import_react22.Children.map(children, (child, index) => {
-          if ((0, import_react22.isValidElement)(child)) {
-            return (0, import_react22.cloneElement)(child, {
+        }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Button, { className: triggerClasses, ...buttonProps, children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("ul", { className: listClasses, role: "menu", children: import_react23.Children.map(children, (child, index) => {
+          if ((0, import_react23.isValidElement)(child)) {
+            return (0, import_react23.cloneElement)(child, {
               onClick: () => handleChildClick(child.props, index),
               active: index === activeId,
               ...itemProps[index]
@@ -3045,13 +3137,13 @@ var init_DropdownMenu = __esm({
 });
 
 // src/components/DropdownMenu/Item.tsx
-var import_react23, import_dedupe23, import_jsx_runtime29, Item;
+var import_react24, import_dedupe24, import_jsx_runtime31, Item;
 var init_Item = __esm({
   "src/components/DropdownMenu/Item.tsx"() {
     "use strict";
-    import_react23 = require("react");
-    import_dedupe23 = __toESM(require("classnames/dedupe"));
-    import_jsx_runtime29 = require("react/jsx-runtime");
+    import_react24 = require("react");
+    import_dedupe24 = __toESM(require("classnames/dedupe"));
+    import_jsx_runtime31 = require("react/jsx-runtime");
     Item = ({ ref, ...props }) => {
       const {
         elementType: Element = "li",
@@ -3060,26 +3152,26 @@ var init_Item = __esm({
         children,
         ...otherProps
       } = props;
-      const classes = (0, import_dedupe23.default)(
+      const classes = (0, import_dedupe24.default)(
         "mobius",
         "mobius-dropdown-menu__item",
         { "--is-active": active },
         otherProps.className
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Element, { ref, onClick, ...otherProps, children: import_react23.Children.map(children, (child) => {
-        if ((0, import_react23.isValidElement)(child)) {
-          const childClasses = (0, import_dedupe23.default)(
+      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Element, { ref, onClick, ...otherProps, children: import_react24.Children.map(children, (child) => {
+        if ((0, import_react24.isValidElement)(child)) {
+          const childClasses = (0, import_dedupe24.default)(
             child.props.className,
             classes
           );
-          return (0, import_react23.cloneElement)(
+          return (0, import_react24.cloneElement)(
             child,
             {
               className: childClasses
             }
           );
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: classes, children: child });
+        return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: classes, children: child });
       }) });
     };
     Item.displayName = "DropdownMenu.Item";
@@ -3104,23 +3196,23 @@ var init_DropdownMenu2 = __esm({
 });
 
 // src/components/Fieldset/Fieldset.tsx
-var import_dedupe24, import_react24, import_Fieldset, import_jsx_runtime30, useFieldset, Fieldset;
+var import_dedupe25, import_react25, import_Fieldset, import_jsx_runtime32, useFieldset, Fieldset;
 var init_Fieldset = __esm({
   "src/components/Fieldset/Fieldset.tsx"() {
     "use strict";
     "use client";
-    import_dedupe24 = __toESM(require("classnames/dedupe"));
-    import_react24 = require("react");
+    import_dedupe25 = __toESM(require("classnames/dedupe"));
+    import_react25 = require("react");
     init_Flex2();
     import_Fieldset = require("@simplybusiness/mobius/src/components/Fieldset/Fieldset.css");
-    import_jsx_runtime30 = require("react/jsx-runtime");
+    import_jsx_runtime32 = require("react/jsx-runtime");
     useFieldset = (props) => {
       const { legend } = props;
       let legendProps = {};
       let containerProps = {
         role: "group"
       };
-      const legendId = (0, import_react24.useId)();
+      const legendId = (0, import_react25.useId)();
       if (legend) {
         legendProps = {
           ...legendProps,
@@ -3140,14 +3232,14 @@ var init_Fieldset = __esm({
       const {
         children,
         legend,
-        legendComponent = /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("legend", {}),
+        legendComponent = /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("legend", {}),
         ...otherProps
       } = props;
       const { legendProps, containerProps } = useFieldset(props);
-      const classes = (0, import_dedupe24.default)("mobius", "mobius-fieldset", props.className);
+      const classes = (0, import_dedupe25.default)("mobius", "mobius-fieldset", props.className);
       legendProps.className = "mobius-fieldset__legend";
-      return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Flex, { ...containerProps, ...otherProps, className: classes, children: [
-        legend && (0, import_react24.cloneElement)(legendComponent, { ...legendProps }, [legend]),
+      return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Flex, { ...containerProps, ...otherProps, className: classes, children: [
+        legend && (0, import_react25.cloneElement)(legendComponent, { ...legendProps }, [legend]),
         children
       ] });
     };
@@ -3164,13 +3256,13 @@ var init_Fieldset2 = __esm({
 });
 
 // src/components/Grid/Grid.tsx
-var import_dedupe25, import_jsx_runtime31, Grid;
+var import_dedupe26, import_jsx_runtime33, Grid;
 var init_Grid = __esm({
   "src/components/Grid/Grid.tsx"() {
     "use strict";
-    import_dedupe25 = __toESM(require("classnames/dedupe"));
+    import_dedupe26 = __toESM(require("classnames/dedupe"));
     init_utils();
-    import_jsx_runtime31 = require("react/jsx-runtime");
+    import_jsx_runtime33 = require("react/jsx-runtime");
     Grid = ({ ref: _ref, ...props }) => {
       const {
         columns = 12,
@@ -3185,7 +3277,7 @@ var init_Grid = __esm({
         style,
         ...rest
       } = props;
-      const classes = (0, import_dedupe25.default)("mobius", "mobius-grid", className);
+      const classes = (0, import_dedupe26.default)("mobius", "mobius-grid", className);
       const styles = filterUndefinedProps({
         boxSizing: "border-box",
         display: "grid",
@@ -3199,22 +3291,22 @@ var init_Grid = __esm({
         justifyItems,
         ...style
       });
-      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { style: styles, className: classes, ...rest });
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: styles, className: classes, ...rest });
     };
     Grid.displayName = "Grid";
   }
 });
 
 // src/components/Grid/Item.tsx
-var import_react25, import_dedupe26, import_jsx_runtime32, getBreakpointMap, DEFAULT_SPAN, GridItem;
+var import_react26, import_dedupe27, import_jsx_runtime34, getBreakpointMap, DEFAULT_SPAN, GridItem;
 var init_Item2 = __esm({
   "src/components/Grid/Item.tsx"() {
     "use strict";
     "use client";
-    import_react25 = require("react");
-    import_dedupe26 = __toESM(require("classnames/dedupe"));
+    import_react26 = require("react");
+    import_dedupe27 = __toESM(require("classnames/dedupe"));
     init_hooks();
-    import_jsx_runtime32 = require("react/jsx-runtime");
+    import_jsx_runtime34 = require("react/jsx-runtime");
     getBreakpointMap = (config) => Object.entries(config).reduce(
       (prev, [key, value]) => {
         const previous = Object.values(prev);
@@ -3249,9 +3341,9 @@ var init_Item2 = __esm({
         xl,
         xxl
       });
-      const [responsiveSpan, setResponsiveSpan] = (0, import_react25.useState)();
-      const classes = (0, import_dedupe26.default)("mobius-grid__item", className);
-      (0, import_react25.useEffect)(() => {
+      const [responsiveSpan, setResponsiveSpan] = (0, import_react26.useState)();
+      const classes = (0, import_dedupe27.default)("mobius-grid__item", className);
+      (0, import_react26.useEffect)(() => {
         setResponsiveSpan(breakpointMap[breakpointSize]);
       }, [breakpointSize, breakpointMap]);
       const styles = {
@@ -3259,7 +3351,7 @@ var init_Item2 = __esm({
         alignSelf,
         justifySelf
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { style: { ...styles }, className: classes, ...rest });
+      return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { style: { ...styles }, className: classes, ...rest });
     };
     GridItem.displayName = "GridItem";
   }
@@ -3280,20 +3372,20 @@ var init_Grid2 = __esm({
 });
 
 // src/components/Image/Image.tsx
-var import_dedupe27, import_jsx_runtime33, Image;
+var import_dedupe28, import_jsx_runtime35, Image;
 var init_Image = __esm({
   "src/components/Image/Image.tsx"() {
     "use strict";
-    import_dedupe27 = __toESM(require("classnames/dedupe"));
-    import_jsx_runtime33 = require("react/jsx-runtime");
+    import_dedupe28 = __toESM(require("classnames/dedupe"));
+    import_jsx_runtime35 = require("react/jsx-runtime");
     Image = ({
       ref,
       alt,
       elementType: Component = "img",
       ...otherProps
     }) => {
-      const classes = (0, import_dedupe27.default)("mobius", "mobius-image", otherProps.className);
-      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Component, { alt, ref, ...otherProps, className: classes });
+      const classes = (0, import_dedupe28.default)("mobius", "mobius-image", otherProps.className);
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Component, { alt, ref, ...otherProps, className: classes });
     };
     Image.displayName = "Image";
   }
@@ -3308,13 +3400,13 @@ var init_Image2 = __esm({
 });
 
 // src/components/Link/Link.tsx
-var import_dedupe28, import_Link, import_jsx_runtime34, Link;
+var import_dedupe29, import_Link, import_jsx_runtime36, Link;
 var init_Link = __esm({
   "src/components/Link/Link.tsx"() {
     "use strict";
-    import_dedupe28 = __toESM(require("classnames/dedupe"));
+    import_dedupe29 = __toESM(require("classnames/dedupe"));
     import_Link = require("@simplybusiness/mobius/src/components/Link/Link.css");
-    import_jsx_runtime34 = require("react/jsx-runtime");
+    import_jsx_runtime36 = require("react/jsx-runtime");
     Link = ({ ref, ...props }) => {
       const {
         isDisabled = false,
@@ -3328,7 +3420,7 @@ var init_Link = __esm({
         pointerEvents: "none"
       };
       const styles = { ...style, ...isDisabled && disabledStyles };
-      const classes = (0, import_dedupe28.default)(
+      const classes = (0, import_dedupe29.default)(
         "mobius",
         "mobius-link",
         className,
@@ -3337,7 +3429,7 @@ var init_Link = __esm({
           "--is-disabled": isDisabled
         }
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         Component,
         {
           ref,
@@ -3362,12 +3454,12 @@ var init_Link2 = __esm({
 });
 
 // src/components/LinkButton/LinkButton.tsx
-var import_dedupe29, import_jsx_runtime35;
+var import_dedupe30, import_jsx_runtime37;
 var init_LinkButton = __esm({
   "src/components/LinkButton/LinkButton.tsx"() {
     "use strict";
-    import_dedupe29 = __toESM(require("classnames/dedupe"));
-    import_jsx_runtime35 = require("react/jsx-runtime");
+    import_dedupe30 = __toESM(require("classnames/dedupe"));
+    import_jsx_runtime37 = require("react/jsx-runtime");
   }
 });
 
@@ -3380,14 +3472,14 @@ var init_LinkButton2 = __esm({
 });
 
 // src/components/List/List.tsx
-var import_react26, import_dedupe30, import_List, import_jsx_runtime36, List;
+var import_react27, import_dedupe31, import_List, import_jsx_runtime38, List;
 var init_List = __esm({
   "src/components/List/List.tsx"() {
     "use strict";
-    import_react26 = require("react");
-    import_dedupe30 = __toESM(require("classnames/dedupe"));
+    import_react27 = require("react");
+    import_dedupe31 = __toESM(require("classnames/dedupe"));
     import_List = require("@simplybusiness/mobius/src/components/List/List.css");
-    import_jsx_runtime36 = require("react/jsx-runtime");
+    import_jsx_runtime38 = require("react/jsx-runtime");
     List = ({ ref, ...props }) => {
       const Component = props.isOrdered ? "ol" : "ul";
       const { children, icon, ...otherProps } = props;
@@ -3396,7 +3488,7 @@ var init_List = __esm({
         ...restProps,
         reversed: isReversed
       };
-      const classes = (0, import_dedupe30.default)(
+      const classes = (0, import_dedupe31.default)(
         "mobius",
         "mobius-list",
         {
@@ -3405,9 +3497,9 @@ var init_List = __esm({
         },
         otherProps.className
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Component, { ref, ...mappedProps, className: classes, children: import_react26.Children.map(children, (child) => {
-        if ((0, import_react26.isValidElement)(child)) {
-          return (0, import_react26.cloneElement)(child, {
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Component, { ref, ...mappedProps, className: classes, children: import_react27.Children.map(children, (child) => {
+        if ((0, import_react27.isValidElement)(child)) {
+          return (0, import_react27.cloneElement)(child, {
             parentIcon: icon
           });
         }
@@ -3419,16 +3511,16 @@ var init_List = __esm({
 });
 
 // src/components/List/ListItem.tsx
-var import_dedupe31, import_jsx_runtime37, ListItem;
+var import_dedupe32, import_jsx_runtime39, ListItem;
 var init_ListItem = __esm({
   "src/components/List/ListItem.tsx"() {
     "use strict";
-    import_dedupe31 = __toESM(require("classnames/dedupe"));
-    import_jsx_runtime37 = require("react/jsx-runtime");
+    import_dedupe32 = __toESM(require("classnames/dedupe"));
+    import_jsx_runtime39 = require("react/jsx-runtime");
     ListItem = ({ ref, ...props }) => {
       const { parentIcon, icon, children, ...otherProps } = props;
       const iconContent = icon || parentIcon;
-      const classes = (0, import_dedupe31.default)(
+      const classes = (0, import_dedupe32.default)(
         "mobius",
         "mobius-list__item",
         {
@@ -3436,15 +3528,15 @@ var init_ListItem = __esm({
         },
         props.className
       );
-      const contentClasses = (0, import_dedupe31.default)("mobius", "mobius-list__item-content");
-      const iconClasses = (0, import_dedupe31.default)("mobius", "mobius-list__icon");
+      const contentClasses = (0, import_dedupe32.default)("mobius", "mobius-list__item-content");
+      const iconClasses = (0, import_dedupe32.default)("mobius", "mobius-list__icon");
       if (iconContent) {
-        return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("li", { ref, ...otherProps, className: classes, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: contentClasses, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: iconClasses, children: iconContent }),
+        return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("li", { ref, ...otherProps, className: classes, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: contentClasses, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: iconClasses, children: iconContent }),
           children
         ] }) });
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("li", { ref, ...otherProps, className: classes, children });
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("li", { ref, ...otherProps, className: classes, children });
     };
     ListItem.displayName = "ListItem";
   }
@@ -3460,23 +3552,23 @@ var init_List2 = __esm({
 });
 
 // src/components/LoadingIndicator/LoadingIndicator.tsx
-var import_dedupe32, import_icons8, import_LoadingIndicator, import_jsx_runtime38, LoadingIndicator;
+var import_dedupe33, import_icons8, import_LoadingIndicator, import_jsx_runtime40, LoadingIndicator;
 var init_LoadingIndicator = __esm({
   "src/components/LoadingIndicator/LoadingIndicator.tsx"() {
     "use strict";
-    import_dedupe32 = __toESM(require("classnames/dedupe"));
+    import_dedupe33 = __toESM(require("classnames/dedupe"));
     import_icons8 = require("@simplybusiness/icons");
     init_Icon2();
     import_LoadingIndicator = require("@simplybusiness/mobius/src/components/LoadingIndicator/LoadingIndicator.css");
-    import_jsx_runtime38 = require("react/jsx-runtime");
+    import_jsx_runtime40 = require("react/jsx-runtime");
     LoadingIndicator = ({ ref, ...props }) => {
       const { icon = import_icons8.loading, ...otherProps } = props;
-      const classes = (0, import_dedupe32.default)(
+      const classes = (0, import_dedupe33.default)(
         "mobius",
         "mobius-loading-indicator",
         otherProps.className
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icon, { icon, spin: true, ref, ...otherProps, className: classes });
+      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Icon, { icon, spin: true, ref, ...otherProps, className: classes });
     };
     LoadingIndicator.displayName = "LoadingIndicator";
   }
@@ -3491,16 +3583,16 @@ var init_LoadingIndicator2 = __esm({
 });
 
 // src/components/Logo/Logo.tsx
-var import_dedupe33, import_jsx_runtime39, Logo;
+var import_dedupe34, import_jsx_runtime41, Logo;
 var init_Logo = __esm({
   "src/components/Logo/Logo.tsx"() {
     "use strict";
-    import_dedupe33 = __toESM(require("classnames/dedupe"));
-    import_jsx_runtime39 = require("react/jsx-runtime");
+    import_dedupe34 = __toESM(require("classnames/dedupe"));
+    import_jsx_runtime41 = require("react/jsx-runtime");
     Logo = ({ ref, ...props }) => {
       const { className, width, height, ...otherProps } = props;
-      const classes = (0, import_dedupe33.default)("mobius", "mobius-logo", className);
-      return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+      const classes = (0, import_dedupe34.default)("mobius", "mobius-logo", className);
+      return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
         "svg",
         {
           width,
@@ -3510,7 +3602,7 @@ var init_Logo = __esm({
           viewBox: "0 0 144 37",
           ...otherProps,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
               "linearGradient",
               {
                 id: "logo-gradient",
@@ -3519,27 +3611,27 @@ var init_Logo = __esm({
                 y1: "76.042%",
                 y2: "26.973%",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("stop", { stopColor: "#4632D8", offset: "0%" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("stop", { stopColor: "#9084E8", offset: "100%" })
+                  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("stop", { stopColor: "#4632D8", offset: "0%" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("stop", { stopColor: "#9084E8", offset: "100%" })
                 ]
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("g", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("g", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                 "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__ */ (0, import_jsx_runtime39.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                 "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__ */ (0, import_jsx_runtime39.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                 "path",
                 {
                   fill: "#0E0A2B",
@@ -3564,23 +3656,23 @@ var init_Logo2 = __esm({
 });
 
 // src/components/Modal/Content.tsx
-var import_jsx_runtime40, Content2;
+var import_jsx_runtime42, Content2;
 var init_Content2 = __esm({
   "src/components/Modal/Content.tsx"() {
     "use strict";
-    import_jsx_runtime40 = require("react/jsx-runtime");
-    Content2 = ({ ref, children, ...otherProps }) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { ref, ...otherProps, className: "mobius-modal__content", children });
+    import_jsx_runtime42 = require("react/jsx-runtime");
+    Content2 = ({ ref, children, ...otherProps }) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { ref, ...otherProps, className: "mobius-modal__content", children });
     Content2.displayName = "Content";
   }
 });
 
 // src/components/Modal/ModalContext.tsx
-var import_react27, ModalContext;
+var import_react28, ModalContext;
 var init_ModalContext = __esm({
   "src/components/Modal/ModalContext.tsx"() {
     "use strict";
-    import_react27 = require("react");
-    ModalContext = (0, import_react27.createContext)({
+    import_react28 = require("react");
+    ModalContext = (0, import_react28.createContext)({
       onClose: () => {
       },
       closeLabel: void 0
@@ -3589,21 +3681,21 @@ var init_ModalContext = __esm({
 });
 
 // src/components/Modal/useModal.ts
-var import_react28, useModal;
+var import_react29, useModal;
 var init_useModal = __esm({
   "src/components/Modal/useModal.ts"() {
     "use strict";
-    import_react28 = require("react");
+    import_react29 = require("react");
     init_ModalContext();
     useModal = () => {
-      const { onClose, closeLabel } = (0, import_react28.useContext)(ModalContext);
+      const { onClose, closeLabel } = (0, import_react29.useContext)(ModalContext);
       return { onClose, closeLabel };
     };
   }
 });
 
 // src/components/Modal/Header.tsx
-var import_icons9, import_jsx_runtime41, Header2;
+var import_icons9, import_jsx_runtime43, Header2;
 var init_Header2 = __esm({
   "src/components/Modal/Header.tsx"() {
     "use strict";
@@ -3611,12 +3703,12 @@ var init_Header2 = __esm({
     init_Button2();
     init_Icon2();
     init_useModal();
-    import_jsx_runtime41 = require("react/jsx-runtime");
+    import_jsx_runtime43 = require("react/jsx-runtime");
     Header2 = ({ ref, children, ...otherProps }) => {
       const { onClose, closeLabel } = useModal();
-      return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("header", { ref, ...otherProps, className: "mobius-modal__header", children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("header", { ref, ...otherProps, className: "mobius-modal__header", children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
           Button,
           {
             "aria-label": "Close",
@@ -3624,7 +3716,7 @@ var init_Header2 = __esm({
             onPress: onClose,
             className: "mobius-modal__close",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon, { icon: import_icons9.cross }),
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Icon, { icon: import_icons9.cross }),
               " ",
               closeLabel
             ]
@@ -3637,19 +3729,19 @@ var init_Header2 = __esm({
 });
 
 // src/components/Modal/Modal.tsx
-var import_dedupe34, import_react29, import_Modal, import_jsx_runtime42, TRANSITION_CSS_VARIABLE2, Modal;
+var import_dedupe35, import_react30, import_Modal, import_jsx_runtime44, TRANSITION_CSS_VARIABLE2, Modal;
 var init_Modal = __esm({
   "src/components/Modal/Modal.tsx"() {
     "use strict";
     "use client";
-    import_dedupe34 = __toESM(require("classnames/dedupe"));
-    import_react29 = require("react");
+    import_dedupe35 = __toESM(require("classnames/dedupe"));
+    import_react30 = require("react");
     init_hooks();
     init_utils();
     init_polyfill_tests();
     init_ModalContext();
     import_Modal = require("@simplybusiness/mobius/src/components/Modal/Modal.css");
-    import_jsx_runtime42 = require("react/jsx-runtime");
+    import_jsx_runtime44 = require("react/jsx-runtime");
     TRANSITION_CSS_VARIABLE2 = "--modal-transition-duration";
     Modal = ({ ref, ...props }) => {
       const {
@@ -3663,11 +3755,11 @@ var init_Modal = __esm({
         animation,
         ...rest
       } = props;
-      const [shouldTransition, setShouldTransition] = (0, import_react29.useState)(false);
-      (0, import_react29.useEffect)(() => {
+      const [shouldTransition, setShouldTransition] = (0, import_react30.useState)(false);
+      (0, import_react30.useEffect)(() => {
         setShouldTransition(supportsDialog());
       }, []);
-      const dialogRef = (0, import_react29.useRef)(null);
+      const dialogRef = (0, import_react30.useRef)(null);
       const { close } = useDialog({
         ref: dialogRef,
         isOpen,
@@ -3678,7 +3770,7 @@ var init_Modal = __esm({
           CSSVariable: TRANSITION_CSS_VARIABLE2
         }
       });
-      const modalClasses = (0, import_dedupe34.default)(
+      const modalClasses = (0, import_dedupe35.default)(
         "mobius",
         "mobius-modal",
         {
@@ -3691,21 +3783,21 @@ var init_Modal = __esm({
         },
         className
       );
-      const contextValue = (0, import_react29.useMemo)(
+      const contextValue = (0, import_react30.useMemo)(
         () => ({
           onClose: close,
           closeLabel
         }),
         [close, closeLabel]
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         "dialog",
         {
           ref: mergeRefs([dialogRef, ref]),
           onCancel: close,
           className: modalClasses,
           ...rest,
-          children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ModalContext.Provider, { value: contextValue, children })
+          children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ModalContext.Provider, { value: contextValue, children })
         }
       );
     };
@@ -3730,18 +3822,18 @@ var init_Modal2 = __esm({
 });
 
 // src/components/Option/Option.tsx
-var import_jsx_runtime43, Option2;
+var import_jsx_runtime45, Option2;
 var init_Option2 = __esm({
   "src/components/Option/Option.tsx"() {
     "use strict";
-    import_jsx_runtime43 = require("react/jsx-runtime");
+    import_jsx_runtime45 = require("react/jsx-runtime");
     Option2 = ({ ref, ...props }) => {
       const { isDisabled, ...rest } = props;
       const mappedProps = {
         ...rest,
         disabled: isDisabled
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("option", { ...mappedProps, ref });
+      return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("option", { ...mappedProps, ref });
     };
     Option2.displayName = "Option";
   }
@@ -3756,17 +3848,17 @@ var init_Option3 = __esm({
 });
 
 // src/components/PasswordField/ShowHideButton.tsx
-var import_icons10, import_jsx_runtime44, ShowHideButton;
+var import_icons10, import_jsx_runtime46, ShowHideButton;
 var init_ShowHideButton = __esm({
   "src/components/PasswordField/ShowHideButton.tsx"() {
     "use strict";
     import_icons10 = require("@simplybusiness/icons");
     init_src();
-    import_jsx_runtime44 = require("react/jsx-runtime");
+    import_jsx_runtime46 = require("react/jsx-runtime");
     ShowHideButton = ({
       show = false,
       onClick
-    }) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    }) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       "button",
       {
         className: "mobius-password-field__show-button",
@@ -3777,35 +3869,35 @@ var init_ShowHideButton = __esm({
         },
         "aria-label": `${show ? "Hide" : "Show"} password`,
         "data-testid": "show-hide-button",
-        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Icon, { icon: show ? import_icons10.eyeSlash : import_icons10.eye, "aria-hidden": "true" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Icon, { icon: show ? import_icons10.eyeSlash : import_icons10.eye, "aria-hidden": "true" })
       }
     );
   }
 });
 
 // src/components/PasswordField/PasswordField.tsx
-var import_dedupe35, import_react30, import_PasswordField, import_jsx_runtime45, PasswordField;
+var import_dedupe36, import_react31, import_PasswordField, import_jsx_runtime47, PasswordField;
 var init_PasswordField = __esm({
   "src/components/PasswordField/PasswordField.tsx"() {
     "use strict";
     "use client";
-    import_dedupe35 = __toESM(require("classnames/dedupe"));
-    import_react30 = require("react");
+    import_dedupe36 = __toESM(require("classnames/dedupe"));
+    import_react31 = require("react");
     init_mergeRefs();
     init_TextField2();
     init_ShowHideButton();
     import_PasswordField = require("@simplybusiness/mobius/src/components/PasswordField/PasswordField.css");
-    import_jsx_runtime45 = require("react/jsx-runtime");
+    import_jsx_runtime47 = require("react/jsx-runtime");
     PasswordField = ({
       ref,
       className,
       autoComplete = "current-password",
       ...props
     }) => {
-      const [show, setShow] = (0, import_react30.useState)(false);
+      const [show, setShow] = (0, import_react31.useState)(false);
       const type = show ? "text" : "password";
-      const classes = (0, import_dedupe35.default)("mobius-password-field", className);
-      const localRef = (0, import_react30.useRef)(null);
+      const classes = (0, import_dedupe36.default)("mobius-password-field", className);
+      const localRef = (0, import_react31.useRef)(null);
       const handleShowHideButtonClick = () => {
         const selectionStart = localRef.current?.selectionStart;
         const selectionEnd = localRef.current?.selectionEnd;
@@ -3817,7 +3909,7 @@ var init_PasswordField = __esm({
           }
         });
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
         TextField,
         {
           ref: mergeRefs([localRef, ref]),
@@ -3825,7 +3917,7 @@ var init_PasswordField = __esm({
           ...props,
           autoComplete,
           type,
-          suffixInside: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ShowHideButton, { onClick: handleShowHideButtonClick, show })
+          suffixInside: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ShowHideButton, { onClick: handleShowHideButtonClick, show })
         }
       );
     };
@@ -3842,17 +3934,17 @@ var init_PasswordField2 = __esm({
 });
 
 // src/components/Popover/Popover.tsx
-var import_react31, import_icons11, import_dedupe36, import_react32, import_mobius_hooks6, import_Popover, import_jsx_runtime46;
+var import_react32, import_icons11, import_dedupe37, import_react33, import_mobius_hooks6, import_Popover, import_jsx_runtime48;
 var init_Popover = __esm({
   "src/components/Popover/Popover.tsx"() {
     "use strict";
-    import_react31 = require("@floating-ui/react");
+    import_react32 = require("@floating-ui/react");
     import_icons11 = require("@simplybusiness/icons");
-    import_dedupe36 = __toESM(require("classnames/dedupe"));
-    import_react32 = require("react");
+    import_dedupe37 = __toESM(require("classnames/dedupe"));
+    import_react33 = require("react");
     import_mobius_hooks6 = require("@simplybusiness/mobius-hooks");
     import_Popover = require("@simplybusiness/mobius/src/components/Popover/Popover.css");
-    import_jsx_runtime46 = require("react/jsx-runtime");
+    import_jsx_runtime48 = require("react/jsx-runtime");
   }
 });
 
@@ -3876,17 +3968,17 @@ function warnAboutInvalidValues(value, minValue, maxValue) {
     console.warn("Progress value is greater than maxValue");
   }
 }
-var import_dedupe37, import_react33, import_Progress, import_jsx_runtime47, sanitizedValue, getLabelComponent, DEFAULT_VALUE, DEFAULT_MIN_VALUE, DEFAULT_MAX_VALUE, Progress;
+var import_dedupe38, import_react34, import_Progress, import_jsx_runtime49, sanitizedValue, getLabelComponent, DEFAULT_VALUE, DEFAULT_MIN_VALUE, DEFAULT_MAX_VALUE, Progress;
 var init_Progress = __esm({
   "src/components/Progress/Progress.tsx"() {
     "use strict";
     "use client";
-    import_dedupe37 = __toESM(require("classnames/dedupe"));
-    import_react33 = require("react");
+    import_dedupe38 = __toESM(require("classnames/dedupe"));
+    import_react34 = require("react");
     init_Label2();
     init_VisuallyHidden2();
     import_Progress = require("@simplybusiness/mobius/src/components/Progress/Progress.css");
-    import_jsx_runtime47 = require("react/jsx-runtime");
+    import_jsx_runtime49 = require("react/jsx-runtime");
     sanitizedValue = (value, defaultValue) => {
       if (value === void 0 || Number.isNaN(value)) {
         return defaultValue;
@@ -3895,7 +3987,7 @@ var init_Progress = __esm({
     };
     getLabelComponent = (label, progressLabelId, showLabel) => {
       if (showLabel) {
-        return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
           Label,
           {
             id: progressLabelId,
@@ -3905,7 +3997,7 @@ var init_Progress = __esm({
           }
         );
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
         Label,
         {
           id: progressLabelId,
@@ -3919,8 +4011,8 @@ var init_Progress = __esm({
     DEFAULT_MIN_VALUE = 0;
     DEFAULT_MAX_VALUE = 100;
     Progress = ({ ref, ...props }) => {
-      const progressId = (0, import_react33.useId)();
-      const progressLabelId = (0, import_react33.useId)();
+      const progressId = (0, import_react34.useId)();
+      const progressLabelId = (0, import_react34.useId)();
       const {
         id,
         label,
@@ -3945,7 +4037,7 @@ var init_Progress = __esm({
         100
       );
       const barWidth = `${percentage}%`;
-      const classes = (0, import_dedupe37.default)("mobius", "mobius-progress", className, {
+      const classes = (0, import_dedupe38.default)("mobius", "mobius-progress", className, {
         "--is-primary": variant === "primary",
         "--is-secondary": variant === "secondary"
       });
@@ -3955,7 +4047,7 @@ var init_Progress = __esm({
       progressBarProps["aria-valuenow"] = value.toString();
       progressBarProps["aria-valuetext"] = valueFormatter instanceof Function ? valueFormatter(value, minValue, maxValue) : barWidth;
       const labelComponent = getLabelComponent(label, progressLabelId, showLabel);
-      return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
         "div",
         {
           id: id || progressId,
@@ -3966,8 +4058,8 @@ var init_Progress = __esm({
           "aria-labelledby": progressLabelId,
           children: [
             labelComponent,
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "mobius-progress__track", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "mobius-progress__bar", style: { width: barWidth } }) }),
-            showValueLabel && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Label, { "data-testid": "value-label", elementType: "span", children: progressBarProps["aria-valuetext"] })
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "mobius-progress__track", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "mobius-progress__bar", style: { width: barWidth } }) }),
+            showValueLabel && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Label, { "data-testid": "value-label", elementType: "span", children: progressBarProps["aria-valuetext"] })
           ]
         }
       );
@@ -3985,17 +4077,17 @@ var init_Progress2 = __esm({
 });
 
 // src/components/Radio/Radio.tsx
-var import_dedupe38, import_react34, import_Radio, import_jsx_runtime48, Radio;
+var import_dedupe39, import_react35, import_Radio, import_jsx_runtime50, Radio;
 var init_Radio = __esm({
   "src/components/Radio/Radio.tsx"() {
     "use strict";
     "use client";
-    import_dedupe38 = __toESM(require("classnames/dedupe"));
-    import_react34 = require("react");
+    import_dedupe39 = __toESM(require("classnames/dedupe"));
+    import_react35 = require("react");
     init_ErrorMessage2();
     init_Label2();
     import_Radio = require("@simplybusiness/mobius/src/components/Radio/Radio.css");
-    import_jsx_runtime48 = require("react/jsx-runtime");
+    import_jsx_runtime50 = require("react/jsx-runtime");
     Radio = ({ ref, ...props }) => {
       const {
         children,
@@ -4019,19 +4111,19 @@ var init_Radio = __esm({
       const isMultiline = label && children;
       const isControlled = selected !== void 0;
       const isChecked = isControlled ? selected === value : defaultChecked;
-      const contentRef = (0, import_react34.useRef)(null);
-      const prevOverflowRef = (0, import_react34.useRef)({
+      const contentRef = (0, import_react35.useRef)(null);
+      const prevOverflowRef = (0, import_react35.useRef)({
         vertical: false,
         horizontal: false
       });
-      const hasIconFirst = (0, import_react34.useMemo)(() => {
-        if (!children || import_react34.Children.count(children) === 0) return false;
-        const firstChild = import_react34.Children.toArray(children)[0];
-        if (!(0, import_react34.isValidElement)(firstChild)) return false;
+      const hasIconFirst = (0, import_react35.useMemo)(() => {
+        if (!children || import_react35.Children.count(children) === 0) return false;
+        const firstChild = import_react35.Children.toArray(children)[0];
+        if (!(0, import_react35.isValidElement)(firstChild)) return false;
         const props2 = firstChild.props;
         return "icon" in props2 && props2.icon !== void 0;
       }, [children]);
-      (0, import_react34.useLayoutEffect)(() => {
+      (0, import_react35.useLayoutEffect)(() => {
         if (!contentRef.current || !onOverflow) return;
         if (orientation === "vertical") {
           return;
@@ -4060,13 +4152,13 @@ var init_Radio = __esm({
         "--is-multiline": !!isMultiline,
         "--is-required": isRequired
       };
-      const containerClasses = (0, import_dedupe38.default)(
+      const containerClasses = (0, import_dedupe39.default)(
         "mobius-radio__label",
         radioClasses,
         className,
         { "--has-icon-first": hasIconFirst }
       );
-      const inputClasses = (0, import_dedupe38.default)("mobius-radio__input", radioClasses);
+      const inputClasses = (0, import_dedupe39.default)("mobius-radio__input", radioClasses);
       const { "aria-describedby": _ariaDescribedBy, ...rest } = otherProps;
       const handleChange = (event) => {
         if (setSelected) {
@@ -4080,9 +4172,9 @@ var init_Radio = __esm({
           onChange(adaptedEvent);
         }
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Label, { className: containerClasses, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Label, { className: containerClasses, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
             "input",
             {
               "aria-describedby": otherProps["aria-describedby"],
@@ -4099,12 +4191,12 @@ var init_Radio = __esm({
               ...rest
             }
           ),
-          isMultiline ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { ref: contentRef, className: "mobius-radio__content--multiline", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "mobius-radio__content-first-line", children: label }),
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "mobius-radio__extra-content", children })
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { ref: contentRef, className: "mobius-radio__content", children: label || children })
+          isMultiline ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { ref: contentRef, className: "mobius-radio__content--multiline", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "mobius-radio__content-first-line", children: label }),
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "mobius-radio__extra-content", children })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { ref: contentRef, className: "mobius-radio__content", children: label || children })
         ] }),
-        errorMessage && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ErrorMessage, { errorMessage })
+        errorMessage && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ErrorMessage, { errorMessage })
       ] });
     };
     Radio.displayName = "Radio";
@@ -4112,19 +4204,19 @@ var init_Radio = __esm({
 });
 
 // src/components/Radio/RadioGroup.tsx
-var import_dedupe39, import_react35, import_jsx_runtime49, getDefaultVal, RadioGroup;
+var import_dedupe40, import_react36, import_jsx_runtime51, getDefaultVal, RadioGroup;
 var init_RadioGroup = __esm({
   "src/components/Radio/RadioGroup.tsx"() {
     "use strict";
     "use client";
-    import_dedupe39 = __toESM(require("classnames/dedupe"));
-    import_react35 = require("react");
+    import_dedupe40 = __toESM(require("classnames/dedupe"));
+    import_react36 = require("react");
     init_hooks();
     init_spaceDelimitedList();
     init_ErrorMessage2();
     init_Label2();
     init_Stack2();
-    import_jsx_runtime49 = require("react/jsx-runtime");
+    import_jsx_runtime51 = require("react/jsx-runtime");
     getDefaultVal = (children, defaultValue) => {
       if (Array.isArray(children) && defaultValue) {
         const option = children?.find((item) => item.props.value === defaultValue);
@@ -4152,15 +4244,15 @@ var init_RadioGroup = __esm({
         ...rest
       } = props;
       const defaultSelected = getDefaultVal(children, value || defaultValue);
-      const [selected, setSelected] = (0, import_react35.useState)(defaultSelected);
-      const overflowsRef = (0, import_react35.useRef)({});
-      const [hasOverflow, setHasOverflow] = (0, import_react35.useState)(false);
-      (0, import_react35.useEffect)(() => {
+      const [selected, setSelected] = (0, import_react36.useState)(defaultSelected);
+      const overflowsRef = (0, import_react36.useRef)({});
+      const [hasOverflow, setHasOverflow] = (0, import_react36.useState)(false);
+      (0, import_react36.useEffect)(() => {
         if (value !== void 0) {
           setSelected(value);
         }
       }, [value]);
-      const handleOverflow = (0, import_react35.useCallback)(
+      const handleOverflow = (0, import_react36.useCallback)(
         (radioValue, overflow) => {
           overflowsRef.current = {
             ...overflowsRef.current,
@@ -4184,26 +4276,26 @@ var init_RadioGroup = __esm({
         [`--is-${effectiveOrientation}`]: true,
         [className || ""]: true
       };
-      const radioGroupClasses = (0, import_dedupe39.default)(
+      const radioGroupClasses = (0, import_dedupe40.default)(
         "mobius",
         "mobius-radio-group",
         radioClasses,
         validationClasses
       );
-      const radioWrapperClasses = (0, import_dedupe39.default)("mobius-radio__wrapper", {
+      const radioWrapperClasses = (0, import_dedupe40.default)("mobius-radio__wrapper", {
         [`--is-${effectiveOrientation}`]: true
       });
-      const labelClasses = (0, import_dedupe39.default)(radioClasses, validationClasses);
-      const errorMessageId = (0, import_react35.useId)();
-      const defaultNameAttrId = (0, import_react35.useId)();
+      const labelClasses = (0, import_dedupe40.default)(radioClasses, validationClasses);
+      const errorMessageId = (0, import_react36.useId)();
+      const defaultNameAttrId = (0, import_react36.useId)();
       const nameAttribute = name || defaultNameAttrId;
       const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
       const describedBy = spaceDelimitedList([
         shouldErrorMessageShow,
         props["aria-describedby"]
       ]);
-      const labelId = (0, import_react35.useId)();
-      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      const labelId = (0, import_react36.useId)();
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
         "div",
         {
           ...rest,
@@ -4219,12 +4311,12 @@ var init_RadioGroup = __esm({
           ref,
           className: radioGroupClasses,
           role: "radiogroup",
-          children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Stack, { gap: "xs", children: [
-            label && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Label, { htmlFor: name, id: labelId, className: labelClasses, children: label }),
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: radioWrapperClasses, children: import_react35.Children.map(children, (child) => {
-              if ((0, import_react35.isValidElement)(child)) {
+          children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Stack, { gap: "xs", children: [
+            label && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Label, { htmlFor: name, id: labelId, className: labelClasses, children: label }),
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: radioWrapperClasses, children: import_react36.Children.map(children, (child) => {
+              if ((0, import_react36.isValidElement)(child)) {
                 const childValue = child.props.value;
-                return (0, import_react35.cloneElement)(
+                return (0, import_react36.cloneElement)(
                   child,
                   {
                     orientation: effectiveOrientation,
@@ -4242,7 +4334,7 @@ var init_RadioGroup = __esm({
               }
               return child;
             }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ErrorMessage, { id: errorMessageId, errorMessage })
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ErrorMessage, { id: errorMessageId, errorMessage })
           ] })
         }
       );
@@ -4261,47 +4353,47 @@ var init_Radio2 = __esm({
 });
 
 // src/components/Segment/SegmentGroup.tsx
-var import_dedupe40, import_jsx_runtime50, SegmentGroup;
+var import_dedupe41, import_jsx_runtime52, SegmentGroup;
 var init_SegmentGroup = __esm({
   "src/components/Segment/SegmentGroup.tsx"() {
     "use strict";
-    import_dedupe40 = __toESM(require("classnames/dedupe"));
-    import_jsx_runtime50 = require("react/jsx-runtime");
+    import_dedupe41 = __toESM(require("classnames/dedupe"));
+    import_jsx_runtime52 = require("react/jsx-runtime");
     SegmentGroup = (props) => {
       const { children, horizontal, gap, className, ...rest } = props;
       const gapClass = gap ? `gap-${gap}` : "";
-      const classes = (0, import_dedupe40.default)(
+      const classes = (0, import_dedupe41.default)(
         "mobius",
         "mobius-segment-group",
         className,
         { "--is-horizontal": horizontal },
         gapClass
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: classes, ...rest, children });
+      return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: classes, ...rest, children });
     };
     SegmentGroup.displayName = "SegmentGroup";
   }
 });
 
 // src/components/Segment/Segment.tsx
-var import_dedupe41, import_Segment, import_jsx_runtime51, Segment;
+var import_dedupe42, import_Segment, import_jsx_runtime53, Segment;
 var init_Segment = __esm({
   "src/components/Segment/Segment.tsx"() {
     "use strict";
-    import_dedupe41 = __toESM(require("classnames/dedupe"));
+    import_dedupe42 = __toESM(require("classnames/dedupe"));
     import_Segment = require("@simplybusiness/mobius/src/components/Segment/Segment.css");
-    import_jsx_runtime51 = require("react/jsx-runtime");
+    import_jsx_runtime53 = require("react/jsx-runtime");
     Segment = (props) => {
       const { heading, children, colour, inverted, className, ...rest } = props;
-      const classes = (0, import_dedupe41.default)(
+      const classes = (0, import_dedupe42.default)(
         "mobius",
         "mobius-segment",
         colour,
         { inverted },
         className
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: classes, ...rest, children: [
-        heading && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "mobius-segment__heading", children: heading }),
+      return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: classes, ...rest, children: [
+        heading && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "mobius-segment__heading", children: heading }),
         children
       ] });
     };
@@ -4319,14 +4411,14 @@ var init_Segment2 = __esm({
 });
 
 // src/components/Select/Select.tsx
-var import_icons12, import_dedupe42, import_react36, import_Select, import_jsx_runtime52, Select;
+var import_icons12, import_dedupe43, import_react37, import_Select, import_jsx_runtime54, Select;
 var init_Select = __esm({
   "src/components/Select/Select.tsx"() {
     "use strict";
     "use client";
     import_icons12 = require("@simplybusiness/icons");
-    import_dedupe42 = __toESM(require("classnames/dedupe"));
-    import_react36 = require("react");
+    import_dedupe43 = __toESM(require("classnames/dedupe"));
+    import_react37 = require("react");
     init_hooks();
     init_useLabel2();
     init_spaceDelimitedList();
@@ -4335,7 +4427,7 @@ var init_Select = __esm({
     init_Label2();
     init_Stack2();
     import_Select = require("@simplybusiness/mobius/src/components/Select/Select.css");
-    import_jsx_runtime52 = require("react/jsx-runtime");
+    import_jsx_runtime54 = require("react/jsx-runtime");
     Select = ({ ref, ...props }) => {
       const {
         label,
@@ -4356,24 +4448,24 @@ var init_Select = __esm({
         "--is-required": typeof isRequired === "boolean" && isRequired,
         "--is-optional": typeof isRequired === "boolean" && !isRequired
       };
-      const sharedClasses = (0, import_dedupe42.default)(validationClasses, stateClasses);
-      const wrapperClasses = (0, import_dedupe42.default)(
+      const sharedClasses = (0, import_dedupe43.default)(validationClasses, stateClasses);
+      const wrapperClasses = (0, import_dedupe43.default)(
         "mobius-select__wrapper",
         sharedClasses,
         otherProps.className
       );
-      const selectClasses = (0, import_dedupe42.default)(
+      const selectClasses = (0, import_dedupe43.default)(
         "mobius-select",
         sharedClasses,
         otherProps.className
       );
-      const labelClasses = (0, import_dedupe42.default)(
+      const labelClasses = (0, import_dedupe43.default)(
         "mobius-label",
         sharedClasses,
         otherProps.className
       );
-      const iconClasses = (0, import_dedupe42.default)("mobius-select__icon", sharedClasses);
-      const errorMessageId = (0, import_react36.useId)();
+      const iconClasses = (0, import_dedupe43.default)("mobius-select__icon", sharedClasses);
+      const errorMessageId = (0, import_react37.useId)();
       const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
       const describedBy = spaceDelimitedList([
         shouldErrorMessageShow,
@@ -4384,10 +4476,10 @@ var init_Select = __esm({
           onChange(e);
         }
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Stack, { className: "mobius mobius-select__outer", gap: "xs", children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Label, { ...labelProps, className: labelClasses, children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: wrapperClasses, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Stack, { className: "mobius mobius-select__outer", gap: "xs", children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Label, { ...labelProps, className: labelClasses, children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: wrapperClasses, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
             "select",
             {
               ...otherProps,
@@ -4403,9 +4495,9 @@ var init_Select = __esm({
               onChange: handleChange
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: iconClasses, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Icon, { icon: import_icons12.chevronDown }) })
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: iconClasses, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Icon, { icon: import_icons12.chevronDown }) })
         ] }),
-        errorMessage && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ErrorMessage, { id: errorMessageId, errorMessage })
+        errorMessage && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ErrorMessage, { id: errorMessageId, errorMessage })
       ] });
     };
     Select.displayName = "Select";
@@ -4421,15 +4513,15 @@ var init_Select2 = __esm({
 });
 
 // src/components/Slider/Slider.tsx
-var import_dedupe43, import_react37, import_Slider, import_jsx_runtime53;
+var import_dedupe44, import_react38, import_Slider, import_jsx_runtime55;
 var init_Slider = __esm({
   "src/components/Slider/Slider.tsx"() {
     "use strict";
     "use client";
-    import_dedupe43 = __toESM(require("classnames/dedupe"));
-    import_react37 = require("react");
+    import_dedupe44 = __toESM(require("classnames/dedupe"));
+    import_react38 = require("react");
     import_Slider = require("@simplybusiness/mobius/src/components/Slider/Slider.css");
-    import_jsx_runtime53 = require("react/jsx-runtime");
+    import_jsx_runtime55 = require("react/jsx-runtime");
   }
 });
 
@@ -4442,19 +4534,19 @@ var init_Slider2 = __esm({
 });
 
 // src/components/SVG/SVG.tsx
-var import_react38, import_dedupe44, import_jsx_runtime54, SVG;
+var import_react39, import_dedupe45, import_jsx_runtime56, SVG;
 var init_SVG = __esm({
   "src/components/SVG/SVG.tsx"() {
     "use strict";
-    import_react38 = require("react");
-    import_dedupe44 = __toESM(require("classnames/dedupe"));
-    import_jsx_runtime54 = require("react/jsx-runtime");
+    import_react39 = require("react");
+    import_dedupe45 = __toESM(require("classnames/dedupe"));
+    import_jsx_runtime56 = require("react/jsx-runtime");
     SVG = ({ ref, ...props }) => {
       const { children, className, ...otherProps } = props;
-      const classes = (0, import_dedupe44.default)("mobius", "mobius-svg", className);
-      const svgNode = import_react38.Children.only(children);
+      const classes = (0, import_dedupe45.default)("mobius", "mobius-svg", className);
+      const svgNode = import_react39.Children.only(children);
       const { children: svgChildren, viewBox, xmlns } = svgNode.props;
-      return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
         "svg",
         {
           viewBox,
@@ -4479,16 +4571,16 @@ var init_SVG2 = __esm({
 });
 
 // src/components/Switch/Switch.tsx
-var import_react39, import_dedupe45, import_Switch, import_jsx_runtime55, Switch;
+var import_react40, import_dedupe46, import_Switch, import_jsx_runtime57, Switch;
 var init_Switch = __esm({
   "src/components/Switch/Switch.tsx"() {
     "use strict";
     "use client";
-    import_react39 = require("react");
-    import_dedupe45 = __toESM(require("classnames/dedupe"));
+    import_react40 = require("react");
+    import_dedupe46 = __toESM(require("classnames/dedupe"));
     init_VisuallyHidden2();
     import_Switch = require("@simplybusiness/mobius/src/components/Switch/Switch.css");
-    import_jsx_runtime55 = require("react/jsx-runtime");
+    import_jsx_runtime57 = require("react/jsx-runtime");
     Switch = ({ ref, ...props }) => {
       const {
         checked = false,
@@ -4497,11 +4589,11 @@ var init_Switch = __esm({
         isDisabled = false,
         ...otherProps
       } = props;
-      const [enabled, setEnabled] = (0, import_react39.useState)(checked);
-      (0, import_react39.useEffect)(() => {
+      const [enabled, setEnabled] = (0, import_react40.useState)(checked);
+      (0, import_react40.useEffect)(() => {
         setEnabled(checked);
       }, [checked]);
-      const classes = (0, import_dedupe45.default)(
+      const classes = (0, import_dedupe46.default)(
         "mobius",
         "mobius-switch",
         {
@@ -4516,9 +4608,9 @@ var init_Switch = __esm({
           onChange(event);
         }
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("label", { ref, className: classes, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { children: enabled ? "On" : "Off" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("label", { ref, className: classes, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { children: enabled ? "On" : "Off" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
           "input",
           {
             type: "checkbox",
@@ -4529,7 +4621,7 @@ var init_Switch = __esm({
             ...otherProps
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "mobius-switch__slider" })
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "mobius-switch__slider" })
       ] });
     };
     Switch.displayName = "Switch";
@@ -4545,114 +4637,114 @@ var init_Switch2 = __esm({
 });
 
 // src/components/Table/Table.tsx
-var import_dedupe46, import_Table, import_jsx_runtime56, Table;
+var import_dedupe47, import_Table, import_jsx_runtime58, Table;
 var init_Table = __esm({
   "src/components/Table/Table.tsx"() {
     "use strict";
-    import_dedupe46 = __toESM(require("classnames/dedupe"));
+    import_dedupe47 = __toESM(require("classnames/dedupe"));
     import_Table = require("@simplybusiness/mobius/src/components/Table/Table.css");
-    import_jsx_runtime56 = require("react/jsx-runtime");
+    import_jsx_runtime58 = require("react/jsx-runtime");
     Table = ({ ref, ...props }) => {
-      const classes = (0, import_dedupe46.default)("mobius", "mobius-table", props.className);
-      return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("table", { ref, ...props, className: classes });
+      const classes = (0, import_dedupe47.default)("mobius", "mobius-table", props.className);
+      return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("table", { ref, ...props, className: classes });
     };
     Table.displayName = "Table";
   }
 });
 
 // src/components/Table/Head.tsx
-var import_dedupe47, import_jsx_runtime57, Head;
+var import_dedupe48, import_jsx_runtime59, Head;
 var init_Head = __esm({
   "src/components/Table/Head.tsx"() {
     "use strict";
-    import_dedupe47 = __toESM(require("classnames/dedupe"));
-    import_jsx_runtime57 = require("react/jsx-runtime");
+    import_dedupe48 = __toESM(require("classnames/dedupe"));
+    import_jsx_runtime59 = require("react/jsx-runtime");
     Head = ({ ref, ...props }) => {
-      const classes = (0, import_dedupe47.default)("mobius", "mobius-table__head", props.className);
-      return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("thead", { ref, ...props, className: classes });
+      const classes = (0, import_dedupe48.default)("mobius", "mobius-table__head", props.className);
+      return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("thead", { ref, ...props, className: classes });
     };
     Head.displayName = "Table.Head";
   }
 });
 
 // src/components/Table/Body.tsx
-var import_dedupe48, import_jsx_runtime58, Body;
+var import_dedupe49, import_jsx_runtime60, Body;
 var init_Body = __esm({
   "src/components/Table/Body.tsx"() {
     "use strict";
-    import_dedupe48 = __toESM(require("classnames/dedupe"));
-    import_jsx_runtime58 = require("react/jsx-runtime");
+    import_dedupe49 = __toESM(require("classnames/dedupe"));
+    import_jsx_runtime60 = require("react/jsx-runtime");
     Body = ({ ref, ...props }) => {
-      const classes = (0, import_dedupe48.default)("mobius", "mobius-table__body", props.className);
-      return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("tbody", { ref, ...props, className: classes });
+      const classes = (0, import_dedupe49.default)("mobius", "mobius-table__body", props.className);
+      return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("tbody", { ref, ...props, className: classes });
     };
     Body.displayName = "Table.Body";
   }
 });
 
 // src/components/Table/Foot.tsx
-var import_dedupe49, import_jsx_runtime59, Foot;
+var import_dedupe50, import_jsx_runtime61, Foot;
 var init_Foot = __esm({
   "src/components/Table/Foot.tsx"() {
     "use strict";
-    import_dedupe49 = __toESM(require("classnames/dedupe"));
-    import_jsx_runtime59 = require("react/jsx-runtime");
+    import_dedupe50 = __toESM(require("classnames/dedupe"));
+    import_jsx_runtime61 = require("react/jsx-runtime");
     Foot = ({ ref, ...props }) => {
-      const classes = (0, import_dedupe49.default)("mobius", "mobius-table__foot", props.className);
-      return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("tfoot", { ref, ...props, className: classes });
+      const classes = (0, import_dedupe50.default)("mobius", "mobius-table__foot", props.className);
+      return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("tfoot", { ref, ...props, className: classes });
     };
     Foot.displayName = "Table.Foot";
   }
 });
 
 // src/components/Table/Row.tsx
-var import_dedupe50, import_jsx_runtime60, Row;
+var import_dedupe51, import_jsx_runtime62, Row;
 var init_Row = __esm({
   "src/components/Table/Row.tsx"() {
     "use strict";
-    import_dedupe50 = __toESM(require("classnames/dedupe"));
-    import_jsx_runtime60 = require("react/jsx-runtime");
+    import_dedupe51 = __toESM(require("classnames/dedupe"));
+    import_jsx_runtime62 = require("react/jsx-runtime");
     Row = ({ ref, ...props }) => {
-      const classes = (0, import_dedupe50.default)("mobius", "mobius-table__row", props.className);
-      return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("tr", { ref, ...props, className: classes });
+      const classes = (0, import_dedupe51.default)("mobius", "mobius-table__row", props.className);
+      return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("tr", { ref, ...props, className: classes });
     };
     Row.displayName = "Table.Row";
   }
 });
 
 // src/components/Table/HeaderCell.tsx
-var import_dedupe51, import_jsx_runtime61, HeaderCell;
+var import_dedupe52, import_jsx_runtime63, HeaderCell;
 var init_HeaderCell = __esm({
   "src/components/Table/HeaderCell.tsx"() {
     "use strict";
-    import_dedupe51 = __toESM(require("classnames/dedupe"));
-    import_jsx_runtime61 = require("react/jsx-runtime");
+    import_dedupe52 = __toESM(require("classnames/dedupe"));
+    import_jsx_runtime63 = require("react/jsx-runtime");
     HeaderCell = ({ ref, ...props }) => {
-      const classes = (0, import_dedupe51.default)(
+      const classes = (0, import_dedupe52.default)(
         "mobius",
         "mobius-table__head-cell",
         props.className
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("th", { ...props, ref, className: classes });
+      return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("th", { ...props, ref, className: classes });
     };
     HeaderCell.displayName = "Table.HeaderCell";
   }
 });
 
 // src/components/Table/Cell.tsx
-var import_dedupe52, import_jsx_runtime62, Cell;
+var import_dedupe53, import_jsx_runtime64, Cell;
 var init_Cell = __esm({
   "src/components/Table/Cell.tsx"() {
     "use strict";
-    import_dedupe52 = __toESM(require("classnames/dedupe"));
-    import_jsx_runtime62 = require("react/jsx-runtime");
+    import_dedupe53 = __toESM(require("classnames/dedupe"));
+    import_jsx_runtime64 = require("react/jsx-runtime");
     Cell = ({ ref, ...props }) => {
-      const classes = (0, import_dedupe52.default)(
+      const classes = (0, import_dedupe53.default)(
         "mobius",
         "mobius-table__body-cell",
         props.className
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("td", { ref, ...props, className: classes });
+      return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("td", { ref, ...props, className: classes });
     };
     Cell.displayName = "Table.Cell";
   }
@@ -4682,37 +4774,6 @@ var init_Table2 = __esm({
   }
 });
 
-// src/components/Text/Text.tsx
-var import_dedupe53, import_Text, import_jsx_runtime63, getElementType, Text;
-var init_Text = __esm({
-  "src/components/Text/Text.tsx"() {
-    "use strict";
-    import_dedupe53 = __toESM(require("classnames/dedupe"));
-    import_Text = require("@simplybusiness/mobius/src/components/Text/Text.css");
-    import_jsx_runtime63 = require("react/jsx-runtime");
-    getElementType = (variant, elementType) => {
-      if (variant) {
-        return ["h1", "h2", "h3", "h4"].includes(variant) ? variant : "p";
-      }
-      return elementType || "p";
-    };
-    Text = ({ ref, elementType: Component = "p", ...props }) => {
-      const { variant, className, spacing, ...otherProps } = props;
-      const elementType = getElementType(variant, Component);
-      const variantType = variant || elementType;
-      const classes = (0, import_dedupe53.default)(
-        "mobius",
-        "mobius-text",
-        { [`--is-${variantType}`]: variantType },
-        { [`--has-line-height-${spacing}`]: spacing },
-        className
-      );
-      return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Component, { ref, ...otherProps, className: classes });
-    };
-    Text.displayName = "Text";
-  }
-});
-
 // src/components/Text/index.tsx
 var init_Text2 = __esm({
   "src/components/Text/index.tsx"() {
@@ -4722,12 +4783,12 @@ var init_Text2 = __esm({
 });
 
 // src/components/TextAreaInput/TextAreaInput.tsx
-var import_dedupe54, import_jsx_runtime64, TextAreaInput;
+var import_dedupe54, import_jsx_runtime65, TextAreaInput;
 var init_TextAreaInput = __esm({
   "src/components/TextAreaInput/TextAreaInput.tsx"() {
     "use strict";
     import_dedupe54 = __toESM(require("classnames/dedupe"));
-    import_jsx_runtime64 = require("react/jsx-runtime");
+    import_jsx_runtime65 = require("react/jsx-runtime");
     TextAreaInput = ({ ref, ...props }) => {
       const { isSelected, isDisabled, isReadOnly, isRequired, ...otherProps } = props;
       const classes = (0, import_dedupe54.default)(
@@ -4740,7 +4801,7 @@ var init_TextAreaInput = __esm({
         },
         otherProps.className
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
         "textarea",
         {
           ref,
@@ -4764,7 +4825,7 @@ var init_TextAreaInput2 = __esm({
 });
 
 // src/components/TextArea/TextArea.tsx
-var import_dedupe55, import_TextArea, import_jsx_runtime65, TextArea;
+var import_dedupe55, import_TextArea, import_jsx_runtime66, TextArea;
 var init_TextArea = __esm({
   "src/components/TextArea/TextArea.tsx"() {
     "use strict";
@@ -4776,7 +4837,7 @@ var init_TextArea = __esm({
     init_Stack2();
     init_TextAreaInput2();
     import_TextArea = require("@simplybusiness/mobius/src/components/TextArea/TextArea.css");
-    import_jsx_runtime65 = require("react/jsx-runtime");
+    import_jsx_runtime66 = require("react/jsx-runtime");
     TextArea = ({ ref, ...props }) => {
       const {
         isDisabled,
@@ -4796,9 +4857,9 @@ var init_TextArea = __esm({
         },
         validationClasses
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(Stack, { className: classes, gap: "xs", children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Label, { ...labelProps, className: labelClasses, children: props.label }),
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(Stack, { className: classes, gap: "xs", children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Label, { ...labelProps, className: labelClasses, children: props.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
           TextAreaInput,
           {
             ...otherProps,
@@ -4809,7 +4870,7 @@ var init_TextArea = __esm({
             "aria-invalid": errorMessage != null
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(ErrorMessage, { ...errorMessageProps, errorMessage })
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(ErrorMessage, { ...errorMessageProps, errorMessage })
       ] });
     };
     TextArea.displayName = "TextArea";
@@ -4824,53 +4885,6 @@ var init_TextArea2 = __esm({
   }
 });
 
-// src/components/TextOrHTML/TextOrHTML.tsx
-var import_react40, import_jsx_runtime66, isHTML, TextOrHTML;
-var init_TextOrHTML = __esm({
-  "src/components/TextOrHTML/TextOrHTML.tsx"() {
-    "use strict";
-    import_react40 = require("react");
-    init_Text();
-    import_jsx_runtime66 = require("react/jsx-runtime");
-    isHTML = (text) => /^\s*<[a-z]/i.test(text);
-    TextOrHTML = ({
-      ref,
-      text,
-      htmlClassName,
-      htmlElementType,
-      textWrapper = false,
-      autoDetect = false,
-      ...textProps
-    }) => {
-      const textIsHTML = autoDetect && isHTML(text);
-      const shouldWrapInText = autoDetect ? textWrapper || !textIsHTML : textWrapper;
-      const resolvedElementType = htmlElementType ?? (textIsHTML ? "div" : "span");
-      const DangerousComponent = resolvedElementType;
-      const dangerousHTML = (0, import_react40.useMemo)(() => ({ __html: text }), [text]);
-      const dangerousElement = /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-        DangerousComponent,
-        {
-          className: htmlClassName,
-          dangerouslySetInnerHTML: dangerousHTML
-        }
-      );
-      if (shouldWrapInText) {
-        return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Text, { ref, ...textProps, children: dangerousElement });
-      }
-      return dangerousElement;
-    };
-    TextOrHTML.displayName = "TextOrHTML";
-  }
-});
-
-// src/components/TextOrHTML/index.tsx
-var init_TextOrHTML2 = __esm({
-  "src/components/TextOrHTML/index.tsx"() {
-    "use strict";
-    init_TextOrHTML();
-  }
-});
-
 // src/components/Title/Title.tsx
 var import_dedupe56, import_Title, import_jsx_runtime67, Title;
 var init_Title = __esm({