@simplybusiness/mobius 10.4.2 → 10.4.3

package/dist/cjs/components/index.js

@@ -1081,17 +1081,17 @@ var MaskedField_exports = {};
 __export(MaskedField_exports, {
   MaskedField: () => MaskedField
 });
-var import_react48, import_react_imask, import_jsx_runtime75, useAcceptHandler, useCombinedRef, useBlurHandler, ControlledMaskedField, UncontrolledMaskedField, MaskedField;
+var import_react50, import_react_imask, import_jsx_runtime76, useAcceptHandler, useCombinedRef, useBlurHandler, ControlledMaskedField, UncontrolledMaskedField, MaskedField;
 var init_MaskedField = __esm({
   "src/components/MaskedField/MaskedField.tsx"() {
     "use strict";
     "use client";
-    import_react48 = require("react");
+    import_react50 = require("react");
     import_react_imask = require("react-imask");
     init_TextField2();
-    import_jsx_runtime75 = require("react/jsx-runtime");
+    import_jsx_runtime76 = require("react/jsx-runtime");
     useAcceptHandler = (onChange, useMaskedValue, name) => {
-      return (0, import_react48.useCallback)(
+      return (0, import_react50.useCallback)(
         (maskedValue, maskInstance) => {
           if (!onChange) {
             return;
@@ -1107,7 +1107,7 @@ var init_MaskedField = __esm({
       );
     };
     useCombinedRef = (imaskRef, forwardedRef) => {
-      return (0, import_react48.useCallback)(
+      return (0, import_react50.useCallback)(
         (element) => {
           imaskRef.current = element;
           if (typeof forwardedRef === "function") {
@@ -1120,7 +1120,7 @@ var init_MaskedField = __esm({
       );
     };
     useBlurHandler = (onBlur, maskRef, useMaskedValue, name) => {
-      return (0, import_react48.useCallback)(
+      return (0, import_react50.useCallback)(
         (event) => {
           if (!onBlur || !maskRef.current) {
             return;
@@ -1150,7 +1150,7 @@ var init_MaskedField = __esm({
       const { ref: imaskRef, maskRef, setValue } = (0, import_react_imask.useIMask)(mask, { onAccept });
       const combinedRef = useCombinedRef(imaskRef, forwardedRef);
       const handleBlur = useBlurHandler(onBlur, maskRef, useMaskedValue, name);
-      (0, import_react48.useEffect)(() => {
+      (0, import_react50.useEffect)(() => {
         if (!maskRef.current) {
           return;
         }
@@ -1161,7 +1161,7 @@ var init_MaskedField = __esm({
           setValue(stringValue);
         }
       }, [value, maskRef, setValue, imaskRef]);
-      return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
         TextField,
         {
           ...textFieldProps,
@@ -1185,7 +1185,7 @@ var init_MaskedField = __esm({
       const { ref: imaskRef, maskRef } = (0, import_react_imask.useIMask)(mask, { onAccept });
       const combinedRef = useCombinedRef(imaskRef, forwardedRef);
       const handleBlur = useBlurHandler(onBlur, maskRef, useMaskedValue, name);
-      return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
         TextField,
         {
           ...textFieldProps,
@@ -1199,7 +1199,7 @@ var init_MaskedField = __esm({
     MaskedField = ({ ref: forwardedRef, ...props }) => {
       const { value, defaultValue, ...rest } = props;
       if ("value" in props) {
-        return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
           ControlledMaskedField,
           {
             ...rest,
@@ -1208,7 +1208,7 @@ var init_MaskedField = __esm({
           }
         );
       } else {
-        return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
           UncontrolledMaskedField,
           {
             ...rest,
@@ -4053,59 +4053,231 @@ var PasswordField = ({
 PasswordField.displayName = "PasswordField";
 
 // src/components/Popover/Popover.tsx
-var import_react35 = require("@floating-ui/react");
 var import_icons12 = require("@simplybusiness/icons");
 var import_dedupe42 = __toESM(require("classnames/dedupe"));
-var import_react36 = require("react");
+var import_react38 = require("react");
+var import_react_dom = require("react-dom");
 var import_mobius_hooks6 = require("@simplybusiness/mobius-hooks");
 init_Icon2();
-var import_Popover = require("@simplybusiness/mobius/src/components/Popover/Popover.css");
+
+// src/components/Popover/Arrow.tsx
 var import_jsx_runtime51 = require("react/jsx-runtime");
+var Arrow = ({ ref, width = 20, className, style }) => {
+  const height = width / 2;
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+    "svg",
+    {
+      ref,
+      className,
+      "aria-hidden": "true",
+      width,
+      height,
+      viewBox: `0 0 ${width} ${height}`,
+      style,
+      children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("path", { d: `M0,0 H${width} L${width / 2},${height} Z` })
+    }
+  );
+};
+
+// src/components/Popover/useAutoUpdate.ts
+var import_react35 = require("react");
+var useAutoUpdate = ({
+  referenceRef,
+  floatingRef,
+  onUpdate,
+  enabled
+}) => {
+  (0, import_react35.useEffect)(() => {
+    if (!enabled) return;
+    const reference = referenceRef.current;
+    const floating = floatingRef.current;
+    const scrollOpts = {
+      capture: true,
+      passive: true
+    };
+    window.addEventListener("scroll", onUpdate, scrollOpts);
+    window.addEventListener("resize", onUpdate, { passive: true });
+    const observer = typeof ResizeObserver === "function" ? new ResizeObserver(onUpdate) : null;
+    if (observer && reference) observer.observe(reference);
+    if (observer && floating) observer.observe(floating);
+    return () => {
+      window.removeEventListener("scroll", onUpdate, scrollOpts);
+      window.removeEventListener("resize", onUpdate);
+      observer?.disconnect();
+    };
+  }, [enabled, onUpdate, referenceRef, floatingRef]);
+};
+
+// src/components/Popover/useFloatingPosition.ts
+var import_react36 = require("react");
+var ABSOLUTE_FLOATING_STYLES = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  width: "max-content"
+};
+var FIXED_FLOATING_STYLES = {
+  position: "fixed",
+  top: 0,
+  left: 0,
+  width: "max-content"
+};
+var INITIAL_ARROW_STYLES = {
+  position: "absolute"
+};
+var VIEWPORT_PADDING = 0;
+var createsFixedContainingBlock = (el) => {
+  const style = window.getComputedStyle(el);
+  return style.transform !== "none" || style.filter !== "none" || style.backdropFilter !== "none" || style.perspective !== "none" || /\b(transform|filter|perspective)\b/.test(style.willChange);
+};
+var useFloatingPosition = ({
+  referenceRef,
+  floatingRef,
+  arrowRef,
+  isOpen,
+  offsetPx,
+  arrowWidth,
+  useFixedStrategy
+}) => {
+  const update = (0, import_react36.useCallback)(() => {
+    const reference = referenceRef.current;
+    const floating = floatingRef.current;
+    if (!reference || !floating) return;
+    const refRect = reference.getBoundingClientRect();
+    const floatingWidth = floating.offsetWidth;
+    const floatingHeight = floating.offsetHeight;
+    const scrollX = useFixedStrategy ? 0 : window.scrollX;
+    const scrollY = useFixedStrategy ? 0 : window.scrollY;
+    const parent = floating.parentElement;
+    const parentIsCb = useFixedStrategy && !!parent && createsFixedContainingBlock(parent);
+    const boundsRect = parentIsCb ? parent.getBoundingClientRect() : {
+      left: 0,
+      top: 0,
+      right: window.innerWidth,
+      bottom: window.innerHeight
+    };
+    const bottomTopViewport = refRect.bottom + offsetPx;
+    const topTopViewport = refRect.top - floatingHeight - offsetPx;
+    const overflowsBottom = bottomTopViewport + floatingHeight > boundsRect.bottom;
+    const fitsTop = topTopViewport >= boundsRect.top;
+    const nextPlacement = overflowsBottom && fitsTop ? "top" : "bottom";
+    const topViewport = nextPlacement === "bottom" ? bottomTopViewport : topTopViewport;
+    const rawLeftViewport = refRect.left + refRect.width / 2 - floatingWidth / 2;
+    const minLeftViewport = boundsRect.left + VIEWPORT_PADDING;
+    const maxLeftViewport = Math.max(
+      minLeftViewport,
+      boundsRect.right - floatingWidth - VIEWPORT_PADDING
+    );
+    const leftViewport = Math.min(
+      Math.max(minLeftViewport, rawLeftViewport),
+      maxLeftViewport
+    );
+    const cbOffsetLeft = parentIsCb ? boundsRect.left : 0;
+    const cbOffsetTop = parentIsCb ? boundsRect.top : 0;
+    floating.style.top = `${topViewport + scrollY - cbOffsetTop}px`;
+    floating.style.left = `${leftViewport + scrollX - cbOffsetLeft}px`;
+    const arrow = arrowRef.current;
+    if (!arrow) return;
+    const arrowHalf = arrowWidth / 2;
+    const refCenterX = refRect.left + refRect.width / 2;
+    const rawArrowLeft = refCenterX - leftViewport - arrowHalf;
+    const maxArrowLeft = Math.max(0, floatingWidth - arrowWidth);
+    const arrowLeft = Math.min(Math.max(0, rawArrowLeft), maxArrowLeft);
+    arrow.style.left = `${arrowLeft}px`;
+    if (nextPlacement === "bottom") {
+      arrow.style.bottom = "100%";
+      arrow.style.top = "";
+      arrow.style.transform = "rotate(180deg)";
+    } else {
+      arrow.style.top = "100%";
+      arrow.style.bottom = "";
+      arrow.style.transform = "";
+    }
+  }, [
+    referenceRef,
+    floatingRef,
+    arrowRef,
+    offsetPx,
+    arrowWidth,
+    useFixedStrategy
+  ]);
+  (0, import_react36.useLayoutEffect)(() => {
+    if (!isOpen) return;
+    update();
+  }, [isOpen, update]);
+  return {
+    initialFloatingStyles: useFixedStrategy ? FIXED_FLOATING_STYLES : ABSOLUTE_FLOATING_STYLES,
+    initialArrowStyles: INITIAL_ARROW_STYLES,
+    update
+  };
+};
+
+// src/components/Popover/useOutsidePress.ts
+var import_react37 = require("react");
+var useOutsidePress = ({
+  referenceRef,
+  floatingRef,
+  enabled,
+  onOutsidePress
+}) => {
+  (0, import_react37.useEffect)(() => {
+    if (!enabled) return;
+    const handler = (event) => {
+      const target = event.target;
+      if (!target) return;
+      if (referenceRef.current?.contains(target)) return;
+      if (floatingRef.current?.contains(target)) return;
+      onOutsidePress(event);
+    };
+    document.addEventListener("pointerdown", handler);
+    return () => document.removeEventListener("pointerdown", handler);
+  }, [enabled, onOutsidePress, referenceRef, floatingRef]);
+};
+
+// src/components/Popover/Popover.tsx
+var import_Popover = require("@simplybusiness/mobius/src/components/Popover/Popover.css");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var OFFSET_FROM_CONTENT_DEFAULT = 10;
+var ARROW_WIDTH = 20;
 var Popover = (props) => {
   const { trigger, children, onOpen, onClose, className } = props;
-  const arrowRef = (0, import_react36.useRef)(null);
-  const floatingContainerRef = (0, import_react36.useRef)(null);
-  const [isOpen, setIsOpen] = (0, import_react36.useState)(false);
-  const { refs, floatingStyles, context } = (0, import_react35.useFloating)({
-    open: isOpen,
-    onOpenChange: setIsOpen,
-    whileElementsMounted: import_react35.autoUpdate,
-    middleware: [
-      (0, import_react35.arrow)({
-        element: arrowRef
-      }),
-      (0, import_react35.offset)(OFFSET_FROM_CONTENT_DEFAULT),
-      (0, import_react35.shift)(),
-      (0, import_react35.flip)()
-    ]
+  const referenceRef = (0, import_react38.useRef)(null);
+  const floatingRef = (0, import_react38.useRef)(null);
+  const arrowRef = (0, import_react38.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react38.useState)(false);
+  const [portalTarget, setPortalTarget] = (0, import_react38.useState)(null);
+  const isInsideDialog = portalTarget !== null && portalTarget.tagName === "DIALOG";
+  const { initialFloatingStyles, initialArrowStyles, update } = useFloatingPosition({
+    referenceRef,
+    floatingRef,
+    arrowRef,
+    isOpen,
+    offsetPx: OFFSET_FROM_CONTENT_DEFAULT,
+    arrowWidth: ARROW_WIDTH,
+    useFixedStrategy: isInsideDialog
   });
-  const dismiss = (0, import_react35.useDismiss)(context, {
-    bubbles: true,
-    outsidePress: (event) => {
-      const toggle = refs.reference.current;
-      const isToggleClick = !toggle?.contains(event.target);
-      if (isToggleClick) {
-        onClose?.();
-      }
-      return true;
+  useAutoUpdate({
+    referenceRef,
+    floatingRef,
+    onUpdate: update,
+    enabled: isOpen
+  });
+  useOutsidePress({
+    referenceRef,
+    floatingRef,
+    enabled: isOpen,
+    onOutsidePress: () => {
+      onClose?.();
+      setIsOpen(false);
     }
   });
-  const { getReferenceProps, getFloatingProps } = (0, import_react35.useInteractions)([dismiss]);
   const containerClasses = (0, import_dedupe42.default)(
     "mobius",
     "mobius-popover__container",
     className
   );
-  const setFloatingRef = (0, import_react36.useCallback)(
-    (node) => {
-      refs.setFloating(node);
-      floatingContainerRef.current = node;
-    },
-    [refs]
-  );
-  (0, import_react36.useEffect)(() => {
-    const el = floatingContainerRef.current;
+  (0, import_react38.useEffect)(() => {
+    const el = floatingRef.current;
     if (!el) return;
     const preventLabelActivation = (e) => {
       const target = e.target;
@@ -4122,77 +4294,82 @@ var Popover = (props) => {
       onClose?.();
       return;
     }
+    const dialog = referenceRef.current?.closest("dialog");
+    setPortalTarget(dialog ?? document.body);
     setIsOpen(true);
     onOpen?.();
   };
-  const triggerComponent = (0, import_react36.cloneElement)(trigger, {
-    ref: refs.setReference,
+  const setReferenceRef = (0, import_react38.useCallback)((node) => {
+    referenceRef.current = node;
+  }, []);
+  const triggerComponent = (0, import_react38.cloneElement)(trigger, {
+    ref: setReferenceRef,
     className: (0, import_dedupe42.default)(
       trigger.props.className,
       "mobius-popover__toggle"
     ),
-    onClick: toggleVisibility,
-    ...getReferenceProps()
+    onClick: toggleVisibility
   });
   (0, import_mobius_hooks6.useWindowEvent)("keydown", (e) => {
-    if (e.key === "Escape") {
+    if (e.key === "Escape" && isOpen) {
+      setIsOpen(false);
       onClose?.();
       e.preventDefault();
       e.stopPropagation();
     }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
-    triggerComponent,
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
-      "div",
-      {
-        className: containerClasses,
-        ref: setFloatingRef,
-        style: floatingStyles,
-        ...getFloatingProps(),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "mobius-popover", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("header", { className: "mobius-popover__header", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-              Button,
-              {
-                type: "button",
-                className: "mobius-popover__close-button",
-                onClick: toggleVisibility,
-                "aria-label": "Close",
-                variant: "ghost",
-                children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-                  Icon,
-                  {
-                    icon: import_icons12.cross,
-                    size: "md",
-                    className: "mobius-popover__close-icon"
-                  }
-                )
-              }
-            ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "mobius-popover__body", children })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-            import_react35.FloatingArrow,
+  const floatingElement = isOpen ? /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+    "div",
+    {
+      className: containerClasses,
+      ref: floatingRef,
+      style: initialFloatingStyles,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "mobius-popover", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("header", { className: "mobius-popover__header", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+            Button,
             {
-              ref: arrowRef,
-              context,
-              width: 20,
-              className: "mobius-popover__arrow-icon"
+              type: "button",
+              className: "mobius-popover__close-button",
+              onClick: toggleVisibility,
+              "aria-label": "Close",
+              variant: "ghost",
+              children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+                Icon,
+                {
+                  icon: import_icons12.cross,
+                  size: "md",
+                  className: "mobius-popover__close-icon"
+                }
+              )
             }
-          )
-        ]
-      }
-    )
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "mobius-popover__body", children })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+          Arrow,
+          {
+            ref: arrowRef,
+            style: initialArrowStyles,
+            className: "mobius-popover__arrow-icon",
+            width: ARROW_WIDTH
+          }
+        )
+      ]
+    }
+  ) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
+    triggerComponent,
+    floatingElement && portalTarget ? (0, import_react_dom.createPortal)(floatingElement, portalTarget) : null
   ] });
 };
 
 // src/components/Progress/Progress.tsx
 var import_dedupe43 = __toESM(require("classnames/dedupe"));
-var import_react37 = require("react");
+var import_react39 = require("react");
 init_Label2();
 var import_Progress = require("@simplybusiness/mobius/src/components/Progress/Progress.css");
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 function warnAboutInvalidValues(value, minValue, maxValue) {
   if (minValue > maxValue) {
     console.warn("minValue is greater than maxValue");
@@ -4212,7 +4389,7 @@ var sanitizedValue = (value, defaultValue) => {
 };
 var getLabelComponent = (label, progressLabelId, showLabel) => {
   if (showLabel) {
-    return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       Label,
       {
         id: progressLabelId,
@@ -4222,7 +4399,7 @@ var getLabelComponent = (label, progressLabelId, showLabel) => {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     Label,
     {
       id: progressLabelId,
@@ -4236,8 +4413,8 @@ var DEFAULT_VALUE = 0;
 var DEFAULT_MIN_VALUE = 0;
 var DEFAULT_MAX_VALUE = 100;
 var Progress = ({ ref, ...props }) => {
-  const progressId = (0, import_react37.useId)();
-  const progressLabelId = (0, import_react37.useId)();
+  const progressId = (0, import_react39.useId)();
+  const progressLabelId = (0, import_react39.useId)();
   const {
     id,
     label,
@@ -4272,7 +4449,7 @@ var Progress = ({ ref, ...props }) => {
   progressBarProps["aria-valuenow"] = value.toString();
   progressBarProps["aria-valuetext"] = valueFormatter instanceof Function ? valueFormatter(value, minValue, maxValue) : barWidth;
   const labelComponent = getLabelComponent(label, progressLabelId, showLabel);
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
     "div",
     {
       id: id || progressId,
@@ -4283,8 +4460,8 @@ var Progress = ({ ref, ...props }) => {
       "aria-labelledby": progressLabelId,
       children: [
         labelComponent,
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "mobius-progress__track", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "mobius-progress__bar", style: { width: barWidth } }) }),
-        showValueLabel && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Label, { "data-testid": "value-label", elementType: "span", children: progressBarProps["aria-valuetext"] })
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "mobius-progress__track", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "mobius-progress__bar", style: { width: barWidth } }) }),
+        showValueLabel && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Label, { "data-testid": "value-label", elementType: "span", children: progressBarProps["aria-valuetext"] })
       ]
     }
   );
@@ -4293,11 +4470,11 @@ Progress.displayName = "Progress";
 
 // src/components/Radio/Radio.tsx
 var import_dedupe44 = __toESM(require("classnames/dedupe"));
-var import_react38 = require("react");
+var import_react40 = require("react");
 init_ErrorMessage2();
 init_Label2();
 var import_Radio = require("@simplybusiness/mobius/src/components/Radio/Radio.css");
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var Radio = ({ ref, ...props }) => {
   const {
     children,
@@ -4321,19 +4498,19 @@ var Radio = ({ ref, ...props }) => {
   const isMultiline = label && children;
   const isControlled = selected !== void 0;
   const isChecked = isControlled ? selected === value : defaultChecked;
-  const contentRef = (0, import_react38.useRef)(null);
-  const prevOverflowRef = (0, import_react38.useRef)({
+  const contentRef = (0, import_react40.useRef)(null);
+  const prevOverflowRef = (0, import_react40.useRef)({
     vertical: false,
     horizontal: false
   });
-  const hasIconFirst = (0, import_react38.useMemo)(() => {
-    if (!children || import_react38.Children.count(children) === 0) return false;
-    const firstChild = import_react38.Children.toArray(children)[0];
-    if (!(0, import_react38.isValidElement)(firstChild)) return false;
+  const hasIconFirst = (0, import_react40.useMemo)(() => {
+    if (!children || import_react40.Children.count(children) === 0) return false;
+    const firstChild = import_react40.Children.toArray(children)[0];
+    if (!(0, import_react40.isValidElement)(firstChild)) return false;
     const props2 = firstChild.props;
     return "icon" in props2 && props2.icon !== void 0;
   }, [children]);
-  (0, import_react38.useLayoutEffect)(() => {
+  (0, import_react40.useLayoutEffect)(() => {
     if (!contentRef.current || !onOverflow) return;
     if (orientation === "vertical") {
       return;
@@ -4382,9 +4559,9 @@ var Radio = ({ ref, ...props }) => {
       onChange(adaptedEvent);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Label, { className: containerClasses, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Label, { className: containerClasses, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
         "input",
         {
           "aria-describedby": otherProps["aria-describedby"],
@@ -4401,25 +4578,25 @@ var Radio = ({ ref, ...props }) => {
           ...rest
         }
       ),
-      isMultiline ? /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { ref: contentRef, className: "mobius-radio__content--multiline", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "mobius-radio__content-first-line", children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "mobius-radio__extra-content", children })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { ref: contentRef, className: "mobius-radio__content", children: label || children })
+      isMultiline ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { ref: contentRef, className: "mobius-radio__content--multiline", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "mobius-radio__content-first-line", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "mobius-radio__extra-content", children })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { ref: contentRef, className: "mobius-radio__content", children: label || children })
     ] }),
-    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ErrorMessage, { errorMessage })
+    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ErrorMessage, { errorMessage })
   ] });
 };
 Radio.displayName = "Radio";
 
 // src/components/Radio/RadioGroup.tsx
 var import_dedupe45 = __toESM(require("classnames/dedupe"));
-var import_react39 = require("react");
+var import_react41 = require("react");
 init_hooks();
 init_spaceDelimitedList();
 init_ErrorMessage2();
 init_Label2();
 init_Stack2();
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var getDefaultVal = (children, defaultValue) => {
   if (Array.isArray(children) && defaultValue) {
     const option = children?.find((item) => item.props.value === defaultValue);
@@ -4447,15 +4624,15 @@ var RadioGroup = ({ ref, ...props }) => {
     ...rest
   } = props;
   const defaultSelected = getDefaultVal(children, value || defaultValue);
-  const [selected, setSelected] = (0, import_react39.useState)(defaultSelected);
-  const overflowsRef = (0, import_react39.useRef)({});
-  const [hasOverflow, setHasOverflow] = (0, import_react39.useState)(false);
-  (0, import_react39.useEffect)(() => {
+  const [selected, setSelected] = (0, import_react41.useState)(defaultSelected);
+  const overflowsRef = (0, import_react41.useRef)({});
+  const [hasOverflow, setHasOverflow] = (0, import_react41.useState)(false);
+  (0, import_react41.useEffect)(() => {
     if (value !== void 0) {
       setSelected(value);
     }
   }, [value]);
-  const handleOverflow = (0, import_react39.useCallback)(
+  const handleOverflow = (0, import_react41.useCallback)(
     (radioValue, overflow) => {
       overflowsRef.current = {
         ...overflowsRef.current,
@@ -4489,16 +4666,16 @@ var RadioGroup = ({ ref, ...props }) => {
     [`--is-${effectiveOrientation}`]: true
   });
   const labelClasses = (0, import_dedupe45.default)(radioClasses, validationClasses);
-  const errorMessageId = (0, import_react39.useId)();
-  const defaultNameAttrId = (0, import_react39.useId)();
+  const errorMessageId = (0, import_react41.useId)();
+  const defaultNameAttrId = (0, import_react41.useId)();
   const nameAttribute = name || defaultNameAttrId;
   const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
   const describedBy = spaceDelimitedList([
     shouldErrorMessageShow,
     props["aria-describedby"]
   ]);
-  const labelId = (0, import_react39.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  const labelId = (0, import_react41.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     "div",
     {
       ...rest,
@@ -4514,12 +4691,12 @@ var RadioGroup = ({ ref, ...props }) => {
       ref,
       className: radioGroupClasses,
       role: "radiogroup",
-      children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Stack, { gap: "xs", children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Label, { htmlFor: name, id: labelId, className: labelClasses, children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: radioWrapperClasses, children: import_react39.Children.map(children, (child) => {
-          if ((0, import_react39.isValidElement)(child)) {
+      children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Stack, { gap: "xs", children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Label, { htmlFor: name, id: labelId, className: labelClasses, children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: radioWrapperClasses, children: import_react41.Children.map(children, (child) => {
+          if ((0, import_react41.isValidElement)(child)) {
             const childValue = child.props.value;
-            return (0, import_react39.cloneElement)(
+            return (0, import_react41.cloneElement)(
               child,
               {
                 orientation: effectiveOrientation,
@@ -4537,7 +4714,7 @@ var RadioGroup = ({ ref, ...props }) => {
           }
           return child;
         }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ErrorMessage, { id: errorMessageId, errorMessage })
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ErrorMessage, { id: errorMessageId, errorMessage })
       ] })
     }
   );
@@ -4546,7 +4723,7 @@ RadioGroup.displayName = "RadioGroup";
 
 // src/components/Segment/SegmentGroup.tsx
 var import_dedupe46 = __toESM(require("classnames/dedupe"));
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var SegmentGroup = (props) => {
   const { children, horizontal, gap, className, ...rest } = props;
   const gapClass = gap ? `gap-${gap}` : "";
@@ -4557,14 +4734,14 @@ var SegmentGroup = (props) => {
     { "--is-horizontal": horizontal },
     gapClass
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: classes, ...rest, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: classes, ...rest, children });
 };
 SegmentGroup.displayName = "SegmentGroup";
 
 // src/components/Segment/Segment.tsx
 var import_dedupe47 = __toESM(require("classnames/dedupe"));
 var import_Segment = require("@simplybusiness/mobius/src/components/Segment/Segment.css");
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var Segment = ({ ref, ...props }) => {
   const { heading, children, colour, inverted, className, ...rest } = props;
   const classes = (0, import_dedupe47.default)(
@@ -4574,8 +4751,8 @@ var Segment = ({ ref, ...props }) => {
     { inverted },
     className
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { ref, className: classes, ...rest, children: [
-    heading && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "mobius-segment__heading", children: heading }),
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { ref, className: classes, ...rest, children: [
+    heading && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "mobius-segment__heading", children: heading }),
     children
   ] });
 };
@@ -4584,7 +4761,7 @@ Segment.displayName = "Segment";
 // src/components/Select/Select.tsx
 var import_icons13 = require("@simplybusiness/icons");
 var import_dedupe48 = __toESM(require("classnames/dedupe"));
-var import_react40 = require("react");
+var import_react42 = require("react");
 init_hooks();
 init_useLabel2();
 init_spaceDelimitedList();
@@ -4593,7 +4770,7 @@ init_Icon2();
 init_Label2();
 init_Stack2();
 var import_Select = require("@simplybusiness/mobius/src/components/Select/Select.css");
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var Select = ({ ref, ...props }) => {
   const {
     label,
@@ -4631,7 +4808,7 @@ var Select = ({ ref, ...props }) => {
     otherProps.className
   );
   const iconClasses = (0, import_dedupe48.default)("mobius-select__icon", sharedClasses);
-  const errorMessageId = (0, import_react40.useId)();
+  const errorMessageId = (0, import_react42.useId)();
   const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
   const describedBy = spaceDelimitedList([
     shouldErrorMessageShow,
@@ -4642,10 +4819,10 @@ var Select = ({ ref, ...props }) => {
       onChange(e);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Stack, { className: "mobius mobius-select__outer", gap: "xs", children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Label, { ...labelProps, className: labelClasses, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: wrapperClasses, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Stack, { className: "mobius mobius-select__outer", gap: "xs", children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Label, { ...labelProps, className: labelClasses, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: wrapperClasses, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
         "select",
         {
           ...otherProps,
@@ -4661,21 +4838,21 @@ var Select = ({ ref, ...props }) => {
           onChange: handleChange
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: iconClasses, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Icon, { icon: import_icons13.chevronDown }) })
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: iconClasses, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Icon, { icon: import_icons13.chevronDown }) })
     ] }),
-    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(ErrorMessage, { id: errorMessageId, errorMessage })
+    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ErrorMessage, { id: errorMessageId, errorMessage })
   ] });
 };
 Select.displayName = "Select";
 
 // src/components/Slider/Slider.tsx
 var import_dedupe49 = __toESM(require("classnames/dedupe"));
-var import_react42 = require("react");
+var import_react44 = require("react");
 init_hooks();
 init_Label2();
 
 // src/components/Slider/helpers.ts
-var import_react41 = require("react");
+var import_react43 = require("react");
 function numberFormatter(value, formatOptions, locale = navigator.languages?.[0] || "en-GB") {
   if (!formatOptions) {
     return value?.toString() || "";
@@ -4685,7 +4862,7 @@ function numberFormatter(value, formatOptions, locale = navigator.languages?.[0]
 
 // src/components/Slider/Slider.tsx
 var import_Slider = require("@simplybusiness/mobius/src/components/Slider/Slider.css");
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var Slider = (props) => {
   const {
     id,
@@ -4706,11 +4883,11 @@ var Slider = (props) => {
     formatOptions,
     isDisabled = false
   } = props;
-  const trackRef = (0, import_react42.useRef)(null);
-  const [currentValue, setCurrentValue] = (0, import_react42.useState)(
+  const trackRef = (0, import_react44.useRef)(null);
+  const [currentValue, setCurrentValue] = (0, import_react44.useState)(
     value || defaultValue || 0
   );
-  const [isDragging, setIsDraggging] = (0, import_react42.useState)(false);
+  const [isDragging, setIsDraggging] = (0, import_react44.useState)(false);
   const { labelProps, fieldProps } = useLabel({
     id,
     label,
@@ -4740,12 +4917,12 @@ var Slider = (props) => {
       onChangeEnd(currentValue);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: classes, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "mobius-slider__label-wrapper", children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Label, { ...labelProps, children: label }),
-      label && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("output", { style: { flex: "1 0 auto", textAlign: "end" }, children: formattedValue })
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: classes, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "mobius-slider__label-wrapper", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Label, { ...labelProps, children: label }),
+      label && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("output", { style: { flex: "1 0 auto", textAlign: "end" }, children: formattedValue })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { ref: trackRef, className: "mobius-slider__track-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { ref: trackRef, className: "mobius-slider__track-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
       "input",
       {
         className: "mobius-slider__track",
@@ -4764,9 +4941,9 @@ var Slider = (props) => {
         ...fieldProps
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "mobius-slider__labels", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "mobius-slider__min-label", "data-testid": "min-label", children: minLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "mobius-slider__max-label", "data-testid": "max-label", children: maxLabel })
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "mobius-slider__labels", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "mobius-slider__min-label", "data-testid": "min-label", children: minLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "mobius-slider__max-label", "data-testid": "max-label", children: maxLabel })
     ] })
   ] });
 };
@@ -4775,15 +4952,15 @@ var Slider = (props) => {
 init_Stack2();
 
 // src/components/SVG/SVG.tsx
-var import_react43 = require("react");
+var import_react45 = require("react");
 var import_dedupe50 = __toESM(require("classnames/dedupe"));
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var SVG = ({ ref, ...props }) => {
   const { children, className, ...otherProps } = props;
   const classes = (0, import_dedupe50.default)("mobius", "mobius-svg", className);
-  const svgNode = import_react43.Children.only(children);
+  const svgNode = import_react45.Children.only(children);
   const { children: svgChildren, viewBox, xmlns } = svgNode.props;
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     "svg",
     {
       viewBox,
@@ -4798,10 +4975,10 @@ var SVG = ({ ref, ...props }) => {
 SVG.displayName = "SVG";
 
 // src/components/Switch/Switch.tsx
-var import_react44 = require("react");
+var import_react46 = require("react");
 var import_dedupe51 = __toESM(require("classnames/dedupe"));
 var import_Switch = require("@simplybusiness/mobius/src/components/Switch/Switch.css");
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var Switch = ({ ref, ...props }) => {
   const {
     checked = false,
@@ -4810,8 +4987,8 @@ var Switch = ({ ref, ...props }) => {
     isDisabled = false,
     ...otherProps
   } = props;
-  const [enabled, setEnabled] = (0, import_react44.useState)(checked);
-  (0, import_react44.useEffect)(() => {
+  const [enabled, setEnabled] = (0, import_react46.useState)(checked);
+  (0, import_react46.useEffect)(() => {
     setEnabled(checked);
   }, [checked]);
   const classes = (0, import_dedupe51.default)(
@@ -4829,9 +5006,9 @@ var Switch = ({ ref, ...props }) => {
       onChange(event);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("label", { ref, className: classes, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { children: enabled ? "On" : "Off" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("label", { ref, className: classes, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { children: enabled ? "On" : "Off" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       "input",
       {
         type: "checkbox",
@@ -4842,7 +5019,7 @@ var Switch = ({ ref, ...props }) => {
         ...otherProps
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "mobius-switch__slider" })
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "mobius-switch__slider" })
   ] });
 };
 Switch.displayName = "Switch";
@@ -4850,72 +5027,72 @@ Switch.displayName = "Switch";
 // src/components/Table/Table.tsx
 var import_dedupe52 = __toESM(require("classnames/dedupe"));
 var import_Table = require("@simplybusiness/mobius/src/components/Table/Table.css");
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var Table = ({ ref, ...props }) => {
   const classes = (0, import_dedupe52.default)("mobius", "mobius-table", props.className);
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("table", { ref, ...props, className: classes });
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("table", { ref, ...props, className: classes });
 };
 Table.displayName = "Table";
 
 // src/components/Table/Head.tsx
 var import_dedupe53 = __toESM(require("classnames/dedupe"));
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var Head = ({ ref, ...props }) => {
   const classes = (0, import_dedupe53.default)("mobius", "mobius-table__head", props.className);
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("thead", { ref, ...props, className: classes });
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("thead", { ref, ...props, className: classes });
 };
 Head.displayName = "Table.Head";
 
 // src/components/Table/Body.tsx
 var import_dedupe54 = __toESM(require("classnames/dedupe"));
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var Body = ({ ref, ...props }) => {
   const classes = (0, import_dedupe54.default)("mobius", "mobius-table__body", props.className);
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("tbody", { ref, ...props, className: classes });
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("tbody", { ref, ...props, className: classes });
 };
 Body.displayName = "Table.Body";
 
 // src/components/Table/Foot.tsx
 var import_dedupe55 = __toESM(require("classnames/dedupe"));
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 var Foot = ({ ref, ...props }) => {
   const classes = (0, import_dedupe55.default)("mobius", "mobius-table__foot", props.className);
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("tfoot", { ref, ...props, className: classes });
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("tfoot", { ref, ...props, className: classes });
 };
 Foot.displayName = "Table.Foot";
 
 // src/components/Table/Row.tsx
 var import_dedupe56 = __toESM(require("classnames/dedupe"));
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 var Row = ({ ref, ...props }) => {
   const classes = (0, import_dedupe56.default)("mobius", "mobius-table__row", props.className);
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("tr", { ref, ...props, className: classes });
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("tr", { ref, ...props, className: classes });
 };
 Row.displayName = "Table.Row";
 
 // src/components/Table/HeaderCell.tsx
 var import_dedupe57 = __toESM(require("classnames/dedupe"));
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 var HeaderCell = ({ ref, scope = "col", ...props }) => {
   const classes = (0, import_dedupe57.default)(
     "mobius",
     "mobius-table__head-cell",
     props.className
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("th", { ...props, ref, scope, className: classes });
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("th", { ...props, ref, scope, className: classes });
 };
 HeaderCell.displayName = "Table.HeaderCell";
 
 // src/components/Table/Cell.tsx
 var import_dedupe58 = __toESM(require("classnames/dedupe"));
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 var Cell = ({ ref, ...props }) => {
   const classes = (0, import_dedupe58.default)(
     "mobius",
     "mobius-table__body-cell",
     props.className
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("td", { ref, ...props, className: classes });
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("td", { ref, ...props, className: classes });
 };
 Cell.displayName = "Table.Cell";
 
@@ -4939,7 +5116,7 @@ init_Stack2();
 
 // src/components/TextAreaInput/TextAreaInput.tsx
 var import_dedupe59 = __toESM(require("classnames/dedupe"));
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 var TextAreaInput = ({ ref, ...props }) => {
   const { isSelected, isDisabled, isReadOnly, isRequired, ...otherProps } = props;
   const classes = (0, import_dedupe59.default)(
@@ -4952,7 +5129,7 @@ var TextAreaInput = ({ ref, ...props }) => {
     },
     otherProps.className
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
     "textarea",
     {
       ref,
@@ -4967,7 +5144,7 @@ TextAreaInput.displayName = "TextAreaInput";
 
 // src/components/TextArea/TextArea.tsx
 var import_TextArea = require("@simplybusiness/mobius/src/components/TextArea/TextArea.css");
-var import_jsx_runtime69 = require("react/jsx-runtime");
+var import_jsx_runtime70 = require("react/jsx-runtime");
 var TextArea = ({ ref, ...props }) => {
   const {
     isDisabled,
@@ -4987,9 +5164,9 @@ var TextArea = ({ ref, ...props }) => {
     },
     validationClasses
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(Stack, { className: classes, gap: "xs", children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Label, { ...labelProps, className: labelClasses, children: props.label }),
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(Stack, { className: classes, gap: "xs", children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Label, { ...labelProps, className: labelClasses, children: props.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
       TextAreaInput,
       {
         ...otherProps,
@@ -5000,7 +5177,7 @@ var TextArea = ({ ref, ...props }) => {
         "aria-invalid": errorMessage != null
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(ErrorMessage, { ...errorMessageProps, errorMessage })
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ErrorMessage, { ...errorMessageProps, errorMessage })
   ] });
 };
 TextArea.displayName = "TextArea";
@@ -5012,7 +5189,7 @@ init_TextOrHTML2();
 // src/components/Title/Title.tsx
 var import_dedupe61 = __toESM(require("classnames/dedupe"));
 var import_Title = require("@simplybusiness/mobius/src/components/Title/Title.css");
-var import_jsx_runtime70 = require("react/jsx-runtime");
+var import_jsx_runtime71 = require("react/jsx-runtime");
 var Title = ({ ref, ...props }) => {
   const {
     elementType: Element = "div",
@@ -5024,9 +5201,9 @@ var Title = ({ ref, ...props }) => {
   const headerClasses = (0, import_dedupe61.default)("mobius", "mobius-title__header");
   const contentClasses = (0, import_dedupe61.default)("mobius", "mobius-title__description");
   const containerClasses = (0, import_dedupe61.default)("mobius", "mobius-title__container");
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Element, { ref, ...otherProps, className: classes, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(Flex, { flexDirection: "column", className: containerClasses, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("p", { className: headerClasses, children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("p", { className: contentClasses, children: description })
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Element, { ref, ...otherProps, className: classes, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(Flex, { flexDirection: "column", className: containerClasses, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("p", { className: headerClasses, children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("p", { className: contentClasses, children: description })
   ] }) });
 };
 Title.displayName = "Title";
@@ -5044,7 +5221,7 @@ var toastState = {
 
 // src/components/Toast/Toast.tsx
 var import_Toast = require("@simplybusiness/mobius/src/components/Toast/Toast.css");
-var import_jsx_runtime71 = require("react/jsx-runtime");
+var import_jsx_runtime72 = require("react/jsx-runtime");
 var variantIcons = {
   info: import_icons14.circleInfo,
   success: import_icons14.circleCheck,
@@ -5057,8 +5234,8 @@ var variantColors = {
   warning: "var(--color-warning)",
   error: "var(--color-error)"
 };
-var ToastIcon = ({ variant }) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "mobius-toast__icon", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Icon, { icon: variantIcons[variant], color: variantColors[variant] }) });
-var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "mobius-toast__close-icon", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Icon, { icon: import_icons14.cross }) });
+var ToastIcon = ({ variant }) => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { className: "mobius-toast__icon", children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Icon, { icon: variantIcons[variant], color: variantColors[variant] }) });
+var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { className: "mobius-toast__close-icon", children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Icon, { icon: import_icons14.cross }) });
 var ToastContent = ({
   toastId,
   variant,
@@ -5067,15 +5244,15 @@ var ToastContent = ({
   action,
   cancel,
   showCloseButton = toastState.showCloseButton
-}) => /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: (0, import_dedupe62.default)("mobius", "mobius-toast", `--${variant}`), children: [
-  /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ToastIcon, { variant }),
-  /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "mobius-toast__body", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "mobius-toast__content", children: [
-      title && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "mobius-toast__title", children: title }),
-      description && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "mobius-toast__description", children: description })
+}) => /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: (0, import_dedupe62.default)("mobius", "mobius-toast", `--${variant}`), children: [
+  /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ToastIcon, { variant }),
+  /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "mobius-toast__body", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "mobius-toast__content", children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "mobius-toast__title", children: title }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "mobius-toast__description", children: description })
     ] }),
-    (action || cancel) && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "mobius-toast__actions", children: [
-      cancel && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+    (action || cancel) && /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "mobius-toast__actions", children: [
+      cancel && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
         "button",
         {
           type: "button",
@@ -5087,7 +5264,7 @@ var ToastContent = ({
           children: cancel.label
         }
       ),
-      action && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+      action && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
         "button",
         {
           type: "button",
@@ -5101,19 +5278,19 @@ var ToastContent = ({
       )
     ] })
   ] }),
-  showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+  showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
     "button",
     {
       type: "button",
       className: "mobius-toast__close",
       onClick: () => import_sonner.toast.dismiss(toastId),
       "aria-label": "Close",
-      children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(CloseIcon, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(CloseIcon, {})
     }
   )
 ] });
 var createCustomToast = (message, variant, options) => import_sonner.toast.custom(
-  (id) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+  (id) => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
     ToastContent,
     {
       toastId: id,
@@ -5145,9 +5322,9 @@ var toast = {
 };
 
 // src/components/Toast/Toaster.tsx
-var import_react45 = require("react");
+var import_react47 = require("react");
 var import_sonner2 = require("sonner");
-var import_jsx_runtime72 = require("react/jsx-runtime");
+var import_jsx_runtime73 = require("react/jsx-runtime");
 var Toaster = ({
   position = "top-right",
   closeButton = true,
@@ -5156,10 +5333,10 @@ var Toaster = ({
   visibleToasts = 3,
   gap = 8
 }) => {
-  (0, import_react45.useEffect)(() => {
+  (0, import_react47.useEffect)(() => {
     toastState.showCloseButton = closeButton;
   }, [closeButton]);
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
     import_sonner2.Toaster,
     {
       position,
@@ -5175,7 +5352,7 @@ Toaster.displayName = "Toaster";
 
 // src/components/Trust/Trust.tsx
 var import_dedupe63 = __toESM(require("classnames/dedupe"));
-var import_react46 = require("react");
+var import_react48 = require("react");
 init_utils();
 
 // src/components/Trust/constants.ts
@@ -5240,7 +5417,7 @@ var TRUSTPILOT_WIDGET = {
 };
 
 // src/components/Trust/Trust.tsx
-var import_jsx_runtime73 = require("react/jsx-runtime");
+var import_jsx_runtime74 = require("react/jsx-runtime");
 var Trust = ({ ref, ...props }) => {
   const {
     elementType: Element = "div",
@@ -5252,8 +5429,8 @@ var Trust = ({ ref, ...props }) => {
     stars,
     className
   } = props;
-  const [isMounted, setIsMounted] = (0, import_react46.useState)(false);
-  const trustRef = (0, import_react46.useRef)(null);
+  const [isMounted, setIsMounted] = (0, import_react48.useState)(false);
+  const trustRef = (0, import_react48.useRef)(null);
   const {
     templateId,
     className: variantClassName,
@@ -5280,24 +5457,24 @@ var Trust = ({ ref, ...props }) => {
     },
     className
   );
-  (0, import_react46.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     const hasTrustpilotLoaded = trustRef.current && window?.Trustpilot && window?.Trustpilot.loadFromElement;
     if (isMounted && hasTrustpilotLoaded) {
       window.Trustpilot.loadFromElement(trustRef.current, true);
     }
   }, [isMounted]);
-  (0, import_react46.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     setIsMounted(true);
   }, []);
-  if (!isMounted) return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { style: styles });
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+  if (!isMounted) return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { style: styles });
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
     Element,
     {
       ref: mergeRefs([trustRef, ref]),
       className: classes,
       style: styles,
       ...dataProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
         "a",
         {
           href: link,
@@ -5313,11 +5490,11 @@ var Trust = ({ ref, ...props }) => {
 
 // src/components/ExpandableText/ExpandableText.tsx
 var import_dedupe64 = __toESM(require("classnames/dedupe"));
-var import_react47 = require("react");
+var import_react49 = require("react");
 init_hooks();
 init_TextOrHTML2();
 var import_ExpandableText = require("@simplybusiness/mobius/src/components/ExpandableText/ExpandableText.css");
-var import_jsx_runtime74 = require("react/jsx-runtime");
+var import_jsx_runtime75 = require("react/jsx-runtime");
 var ExpandableText = ({ ref, ...props }) => {
   const {
     text,
@@ -5331,14 +5508,14 @@ var ExpandableText = ({ ref, ...props }) => {
     onToggle,
     ...otherProps
   } = props;
-  const [isExpanded, setIsExpanded] = (0, import_react47.useState)(false);
-  const [isCollapsed, setIsCollapsed] = (0, import_react47.useState)(false);
-  const textRef = (0, import_react47.useRef)(null);
+  const [isExpanded, setIsExpanded] = (0, import_react49.useState)(false);
+  const [isCollapsed, setIsCollapsed] = (0, import_react49.useState)(false);
+  const textRef = (0, import_react49.useRef)(null);
   const { down } = useBreakpoint();
-  const baseId = (0, import_react47.useId)();
+  const baseId = (0, import_react49.useId)();
   const expandButtonId = `expandable-text-expand-${baseId}`;
   const shouldCollapse = breakpoint ? down(breakpoint) : true;
-  (0, import_react47.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     if (!shouldCollapse || !textRef.current) {
       setIsCollapsed(false);
       return;
@@ -5348,7 +5525,7 @@ var ExpandableText = ({ ref, ...props }) => {
     setIsCollapsed(isOverflowing);
   }, [text, shouldCollapse, maxLines]);
   if (breakpoint && !shouldCollapse) {
-    return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { ref, className, ...otherProps, children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(TextOrHTML, { text, textWrapper: true, ...textProps }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { ref, className, ...otherProps, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(TextOrHTML, { text, textWrapper: true, ...textProps }) });
   }
   const handleAccordionChange = (expanded) => {
     setIsExpanded(expanded);
@@ -5361,7 +5538,7 @@ var ExpandableText = ({ ref, ...props }) => {
   const textContainerStyle = {
     "--line-clamp": maxLines
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
     "div",
     {
       ref,
@@ -5369,7 +5546,7 @@ var ExpandableText = ({ ref, ...props }) => {
       "data-testid": "expandable-text",
       ...otherProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
           "div",
           {
             ref: textRef,
@@ -5377,10 +5554,10 @@ var ExpandableText = ({ ref, ...props }) => {
             style: textContainerStyle,
             "data-testid": "expandable-text-content",
             "aria-describedby": isCollapsed ? expandButtonId : void 0,
-            children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(TextOrHTML, { elementType: "span", textWrapper: true, text, ...textProps })
+            children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(TextOrHTML, { elementType: "span", textWrapper: true, text, ...textProps })
           }
         ),
-        isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+        isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
           Accordion,
           {
             showText,
@@ -5403,7 +5580,7 @@ ExpandableText.displayName = "ExpandableText";
 // src/components/MaskedField/index.tsx
 var import_component = __toESM(require("@loadable/component"));
 init_TextField2();
-var import_jsx_runtime76 = require("react/jsx-runtime");
+var import_jsx_runtime77 = require("react/jsx-runtime");
 var LoadableMaskedField = (0, import_component.default)(() => Promise.resolve().then(() => (init_MaskedField(), MaskedField_exports)), {
   resolveComponent: (mod) => mod.MaskedField
 });
@@ -5415,11 +5592,11 @@ function MaskedField2(props) {
     ref: forwardedRef,
     ...textFieldProps
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
     LoadableMaskedField,
     {
       ...props,
-      fallback: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+      fallback: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
         TextField,
         {
           ...textFieldProps,