@simplybusiness/mobius 8.0.2 → 9.0.1

package/dist/esm/index.js

@@ -8,549 +8,73 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
 
 // src/components/Accordion/Accordion.tsx
 import classNames4 from "classnames/dedupe";
-import { useEffect as useEffect11, useState as useState6, useId as useId3 } from "react";
-
-// src/hooks/useBodyScrollLock/useBodyScrollLock.ts
-import { useEffect } from "react";
-function useBodyScrollLock({
-  enabled = true
-} = {}) {
-  function disableScrollLock() {
-    document.body.style.removeProperty("overflow");
-    document.body.style.removeProperty("scrollbar-gutter");
-    document.documentElement.style.removeProperty("scrollbar-gutter");
-  }
-  function enableScrollLock() {
-    document.body.style.overflow = "hidden";
-    document.body.style.scrollbarGutter = "stable";
-    document.documentElement.style.scrollbarGutter = "stable";
-  }
-  useEffect(() => {
-    if (enabled) {
-      enableScrollLock();
-    } else {
-      disableScrollLock();
-    }
-    return () => {
-      disableScrollLock();
-    };
-  }, [enabled]);
-}
-
-// src/hooks/useBreakpoint/useBreakpoint.tsx
-import debounce from "lodash.debounce";
-import { useCallback, useEffect as useEffect2, useState } from "react";
-var DEFAULT_BREAKPOINTS = [
-  { size: "xs", value: 320 },
-  { size: "sm", value: 480 },
-  { size: "md", value: 670 },
-  { size: "lg", value: 960 },
-  { size: "xl", value: 1200 },
-  { size: "xxl", value: 1320 }
-];
-var getBreakpoint = (breakpoints, windowWidth) => {
-  const closest = breakpoints.findIndex(
-    (breakpoint) => breakpoint.value >= windowWidth + 1
-  );
-  const smallest = breakpoints[0];
-  const largest = breakpoints[breakpoints.length - 1];
-  const match = breakpoints[closest - 1];
-  if (closest === 0) return smallest;
-  if (closest === -1) return largest;
-  return match;
-};
-var useBreakpoint = (customBreakpoints) => {
-  const window2 = globalThis?.window || void 0;
-  const isClientSide = typeof window2 !== "undefined";
-  const breakpoints = customBreakpoints || DEFAULT_BREAKPOINTS;
-  const defaultBreakpoint = breakpoints[0];
-  const [windowWidth, setWindowWidth] = useState(
-    isClientSide ? window2.innerWidth : defaultBreakpoint.value
-  );
-  const [currentBreakpoint, setCurrentBreakpoint] = useState(defaultBreakpoint);
-  const handleResize = () => {
-    setWindowWidth(window2.innerWidth);
-  };
-  useEffect2(() => {
-    if (!windowWidth || breakpoints.length === 0) {
-      setCurrentBreakpoint(breakpoints[0]);
-      return;
-    }
-    const newBreakpoint = getBreakpoint(breakpoints, windowWidth);
-    if (currentBreakpoint.size === newBreakpoint?.size) return;
-    setCurrentBreakpoint(newBreakpoint);
-  }, [currentBreakpoint, windowWidth, breakpoints]);
-  useEffect2(() => {
-    window2.addEventListener("resize", debounce(handleResize, 200), {
-      passive: true
-    });
-    return () => window2.removeEventListener("resize", handleResize);
-  }, [window2]);
-  const up = useCallback(
-    (size) => {
-      const sizeIndex = breakpoints.findIndex((item) => item.size === size);
-      if (sizeIndex === -1) {
-        return false;
-      }
-      const currentIndex = breakpoints.findIndex(
-        (item) => item.size === currentBreakpoint.size
-      );
-      return currentIndex >= sizeIndex;
-    },
-    [currentBreakpoint, breakpoints]
-  );
-  const down = useCallback(
-    (size) => {
-      const sizeIndex = breakpoints.findIndex((item) => item.size === size);
-      if (sizeIndex === -1) {
-        return true;
-      }
-      const currentIndex = breakpoints.findIndex(
-        (item) => item.size === currentBreakpoint.size
-      );
-      return currentIndex <= sizeIndex;
-    },
-    [currentBreakpoint, breakpoints]
-  );
-  return {
-    breakpoint: isClientSide ? currentBreakpoint : defaultBreakpoint,
-    up,
-    down
-  };
-};
+import { useEffect, useState, useId } from "react";
+import { usePrefersReducedMotion } from "@simplybusiness/mobius-hooks";
 
-// src/hooks/useButton/useButton.tsx
-import { useCallback as useCallback2 } from "react";
-function useButton({
-  elementType = "button",
-  type = "button",
-  isDisabled = false,
-  href,
-  target,
-  rel,
-  role,
-  name,
-  value,
-  onClick,
-  onPress
-}) {
-  const realOnClick = useCallback2(
-    (event) => {
-      if (isDisabled) {
-        return;
-      }
-      onClick?.(event);
-      onPress?.(event);
-    },
-    [isDisabled, onClick, onPress]
-  );
-  function getRole() {
-    if (role) {
-      return role;
-    }
-    if (elementType === "a") {
-      return void 0;
-    }
-    return "button";
-  }
-  const extraProps = elementType === "button" ? { type } : {
-    role: getRole()
-  };
-  return {
-    buttonProps: {
-      href: elementType === "a" ? href : void 0,
-      target: elementType === "a" ? target : void 0,
-      rel: elementType === "a" ? rel : void 0,
-      tabIndex: isDisabled ? -1 : 0,
-      disabled: isDisabled || void 0,
-      "aria-disabled": isDisabled || void 0,
-      name: elementType === "input" || elementType === "button" ? name : void 0,
-      value: elementType === "input" || elementType === "button" ? value : void 0,
-      ...extraProps,
-      onClick: realOnClick
-    }
-  };
-}
-
-// src/hooks/useDebouncedValue/useDebouncedValue.tsx
-import { useEffect as useEffect3, useState as useState2 } from "react";
-function useDebouncedValue(value, delay = 0) {
-  const [debouncedValue, setDebouncedValue] = useState2(value);
-  useEffect3(() => {
-    let timeout = null;
-    if (delay === 0) {
-      setDebouncedValue(value);
-    } else {
-      timeout = setTimeout(() => {
-        setDebouncedValue(value);
-      }, delay);
-    }
-    return () => {
-      if (timeout) {
-        clearTimeout(timeout);
-        timeout = null;
-      }
-    };
-  }, [value, delay]);
-  return debouncedValue;
-}
+// src/components/Accordion/AccordionLink.tsx
+import classNames3 from "classnames/dedupe";
 
-// src/hooks/useDialog/useDialog.ts
-import { useCallback as useCallback3, useEffect as useEffect5, useState as useState4 } from "react";
+// src/components/Flex/Flex.tsx
+import classNames from "classnames/dedupe";
 
 // src/utils/filterUndefinedProps.ts
 var filterUndefinedProps = (props) => {
   const filteredProps = {};
   Object.keys(props).forEach((key) => {
     if (props[key] !== void 0) {
-      filteredProps[key] = props[key];
-    }
-  });
-  return filteredProps;
-};
-
-// src/utils/getSpacingValue.ts
-var getSpacingValue = (padding) => {
-  if (typeof padding === "string") {
-    return `var(--size-${padding})`;
-  }
-  if (typeof padding === "number") {
-    return `${padding}px`;
-  }
-  return void 0;
-};
-
-// src/utils/mergeRefs.ts
-function mergeRefs(refs) {
-  return (value) => {
-    refs.forEach((ref) => {
-      if (typeof ref === "function") {
-        ref(value);
-      } else if (ref != null) {
-        ref.current = value;
-      }
-    });
-  };
-}
-
-// src/utils/polyfill-tests.ts
-var supportsDialog = () => typeof HTMLDialogElement === "function";
-
-// src/utils/sizeClasses.ts
-var sizeClasses = (size) => {
-  if (!size) {
-    return {};
-  }
-  return {
-    "--is-xxs": size === "xxs",
-    "--is-xs": size === "xs",
-    "--is-sm": size === "sm",
-    "--is-md": size === "md",
-    "--is-lg": size === "lg",
-    "--is-xl": size === "xl",
-    "--is-xxl": size === "xxl"
-  };
-};
-
-// src/utils/spaceDelimitedList.ts
-function spaceDelimitedList(list) {
-  return list.filter(Boolean).join(" ") || void 0;
-}
-
-// src/hooks/useDialogPolyfill/useDialogPolyfill.ts
-import { useEffect as useEffect4, useRef, useState as useState3 } from "react";
-var useDialogPolyfill = () => {
-  const [hasDialogSupport, setHasDialogSupport] = useState3(false);
-  const hasAlreadyLoaded = useRef(false);
-  useEffect4(() => {
-    setHasDialogSupport(supportsDialog());
-  }, []);
-  const polyfillDialog = async (ref) => {
-    if (!hasAlreadyLoaded.current && !hasDialogSupport && typeof window !== "undefined" && ref.current !== null) {
-      const { default: dialogPolyfill } = await import("dialog-polyfill");
-      hasAlreadyLoaded.current = true;
-      try {
-        if (ref.current) {
-          dialogPolyfill.registerDialog(ref.current);
-        }
-      } catch (error3) {
-        console.error("Failed to load dialog-polyfill", error3);
-      }
-    }
-  };
-  return {
-    polyfillDialog
-  };
-};
-
-// src/hooks/useDialog/useDialog.ts
-var TRANSITION_CLASS_NAME = "--transition";
-var FALLBACK_TRANSITION_DURATION = 0;
-var useDialog = (props) => {
-  const { ref, isOpen, transition, onOpen, onClose } = props;
-  const [hasDialogSupport, setHasDialogSupport] = useState4(false);
-  const shouldTransition = hasDialogSupport && transition.isEnabled;
-  const { polyfillDialog } = useDialogPolyfill();
-  useEffect5(() => {
-    setHasDialogSupport(supportsDialog());
-  }, []);
-  const TRANSITION_DURATION_IN_MS = ref.current && Number(
-    getComputedStyle(ref.current).getPropertyValue(transition.CSSVariable).replace("ms", "")
-  ) || FALLBACK_TRANSITION_DURATION;
-  useBodyScrollLock({ enabled: isOpen });
-  const open = useCallback3(() => {
-    ref.current?.showModal();
-    onOpen?.();
-  }, [onOpen, ref]);
-  const close = useCallback3(() => {
-    ref.current?.close();
-    onClose?.();
-  }, [onClose, ref]);
-  const handleClose = useCallback3(
-    (event) => {
-      if (event) {
-        event.preventDefault();
-        event.stopPropagation();
-      }
-      if (shouldTransition) {
-        ref.current?.classList.remove(TRANSITION_CLASS_NAME);
-        setTimeout(() => close(), TRANSITION_DURATION_IN_MS);
-      } else {
-        close();
-      }
-    },
-    [TRANSITION_DURATION_IN_MS, close, ref, shouldTransition]
-  );
-  useEffect5(() => {
-    async function toggleDialog() {
-      if (isOpen && !ref.current?.open) {
-        await polyfillDialog(ref);
-        open();
-        setTimeout(() => {
-          ref.current?.classList.add(TRANSITION_CLASS_NAME);
-        }, 0);
-      } else if (!isOpen && ref.current?.open) {
-        handleClose();
-      }
-    }
-    void toggleDialog();
-  }, [handleClose, isOpen, open, ref, polyfillDialog]);
-  return {
-    open,
-    close: handleClose
-  };
-};
-
-// src/hooks/useLabel/useLabel.tsx
-import { useId, useRef as useRef2 } from "react";
-function useLabel({
-  id: providedId,
-  label,
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledby,
-  labelElementType = "label"
-}) {
-  let labelProps = {};
-  let fieldProps = {};
-  const hasWarnedAboutMissingLabels = useRef2(false);
-  const fallbackId = useId();
-  const id = providedId || fallbackId;
-  const labelId = useId();
-  if (label) {
-    ariaLabelledby = ariaLabelledby ? `${labelId} ${ariaLabelledby}` : labelId;
-    labelProps = {
-      id: labelId,
-      htmlFor: labelElementType === "label" ? id : void 0
-    };
-  } else if (!ariaLabelledby && !ariaLabel && !hasWarnedAboutMissingLabels.current) {
-    hasWarnedAboutMissingLabels.current = true;
-    console.warn(
-      "If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility"
-    );
-  }
-  fieldProps = {
-    id,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledby
-  };
-  return {
-    labelProps,
-    fieldProps
-  };
-}
-
-// src/hooks/useOnClickOutside/useOnClickOutside.tsx
-import { useEffect as useEffect6, useEffectEvent } from "react";
-var useOnClickOutside = (ref, handler) => {
-  const stableHandler = useEffectEvent(handler);
-  useEffect6(() => {
-    const listener = (event) => {
-      if (!ref.current || ref.current.contains(event.target)) {
-        return;
-      }
-      event.preventDefault();
-      event.stopPropagation();
-      stableHandler(event);
-    };
-    const handleEscapeKeyPress = (event) => {
-      if (event.key === "Escape") {
-        event.preventDefault();
-        event.stopPropagation();
-        stableHandler(event);
-      }
-    };
-    document.addEventListener("mousedown", listener);
-    document.addEventListener("touchstart", listener);
-    document.addEventListener("keydown", handleEscapeKeyPress);
-    return () => {
-      document.removeEventListener("mousedown", listener);
-      document.removeEventListener("touchstart", listener);
-      document.removeEventListener("keydown", handleEscapeKeyPress);
-    };
-  }, [ref]);
-};
-
-// src/hooks/useOnUnmount/useOnUnmount.tsx
-import { useEffect as useEffect7, useEffectEvent as useEffectEvent2 } from "react";
-function useOnUnmount(callback) {
-  const stableCallback = useEffectEvent2(callback);
-  useEffect7(() => () => stableCallback(), []);
-}
-
-// src/hooks/usePrefersReducedMotion/usePrefersReducedMotion.tsx
-import { useEffect as useEffect8, useState as useState5 } from "react";
-function usePrefersReducedMotion() {
-  const [prefersReducedMotion, setPrefersReducedMotion] = useState5(false);
-  useEffect8(() => {
-    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
-    setPrefersReducedMotion(mediaQuery.matches);
-    const listener = (event) => {
-      setPrefersReducedMotion(event.matches);
-    };
-    mediaQuery.addEventListener("change", listener);
-    return () => {
-      mediaQuery.removeEventListener("change", listener);
-    };
-  }, []);
-  return prefersReducedMotion;
-}
-
-// src/hooks/useRenderCount/useRenderCount.ts
-import { useEffect as useEffect9, useRef as useRef3 } from "react";
-function useRenderCount() {
-  const count = useRef3(1);
-  useEffect9(() => {
-    count.current += 1;
-  });
-  return count.current;
-}
-
-// src/hooks/useTextField/useTextField.tsx
-import { useId as useId2 } from "react";
-function useTextField(props) {
-  const {
-    isDisabled = false,
-    isReadOnly = false,
-    isRequired = false,
-    inputElementType = "input"
-  } = props;
-  const { labelProps, fieldProps } = useLabel(props);
-  const descriptionId = useId2();
-  const descriptionProps = { id: descriptionId };
-  const errorMessageId = useId2();
-  const errorMessageProps = { id: errorMessageId };
-  const ariaDescribedBy = spaceDelimitedList([
-    props.description && descriptionId,
-    props.errorMessage && errorMessageId,
-    props["aria-describedby"]
-  ]);
-  return {
-    descriptionProps,
-    errorMessageProps,
-    labelProps,
-    inputProps: {
-      defaultValue: props.defaultValue,
-      value: props.value,
-      onChange: props.onChange,
-      disabled: isDisabled,
-      readOnly: isReadOnly,
-      required: isRequired,
-      "aria-required": isRequired === true ? true : void 0,
-      "aria-invalid": props.isInvalid,
-      "aria-describedby": ariaDescribedBy,
-      "aria-errormessage": props["aria-errormessage"],
-      role: props.role,
-      type: inputElementType === "input" ? props.type : void 0,
-      pattern: inputElementType === "input" ? props.pattern : void 0,
-      autoComplete: props.autoComplete,
-      maxLength: props.maxLength,
-      minLength: props.minLength,
-      name: props.name,
-      placeholder: props.placeholder,
-      inputMode: props.inputMode,
-      // Clipboard events
-      onCopy: props.onCopy,
-      onCut: props.onCut,
-      onPaste: props.onPaste,
-      // Composition events
-      onCompositionEnd: props.onCompositionEnd,
-      onCompositionStart: props.onCompositionStart,
-      onCompositionUpdate: props.onCompositionUpdate,
-      // Selection events
-      onSelect: props.onSelect,
-      // Input events
-      onBeforeInput: props.onBeforeInput,
-      onInput: props.onInput,
-      // Focus events
-      onFocus: props.onFocus,
-      onBlur: props.onBlur,
-      ...fieldProps
+      filteredProps[key] = props[key];
     }
-  };
-}
+  });
+  return filteredProps;
+};
 
-// src/hooks/useValidationClasses/useValidationClasses.ts
-var useValidationClasses = (props) => {
-  const { isInvalid } = props;
-  if (isInvalid) {
-    return "--is-invalid";
+// src/utils/getSpacingValue.ts
+var getSpacingValue = (padding) => {
+  if (typeof padding === "string") {
+    return `var(--size-${padding})`;
   }
-  if (isInvalid === false) {
-    return "--is-valid";
+  if (typeof padding === "number") {
+    return `${padding}px`;
   }
-  return "";
+  return void 0;
 };
 
-// src/hooks/useWindowEvent/useWindowEvent.tsx
-import { useEffect as useEffect10, useEffectEvent as useEffectEvent3 } from "react";
-function normaliseOptions(options, otherOptions = {}) {
-  if (typeof options === "undefined") {
-    return otherOptions;
-  }
-  if (typeof options === "boolean") {
-    return { capture: options, ...otherOptions };
-  }
-  return { ...options, ...otherOptions };
-}
-function useWindowEvent(type, listener, options) {
-  const stableListener = useEffectEvent3(listener);
-  useEffect10(() => {
-    const controller = new AbortController();
-    const { signal } = controller;
-    const normalisedOptions = normaliseOptions(options, { signal });
-    window.addEventListener(type, stableListener, normalisedOptions);
-    return () => {
-      controller.abort();
-      window.removeEventListener(type, stableListener, normalisedOptions);
-    };
-  }, [type, options]);
+// src/utils/mergeRefs.ts
+function mergeRefs(refs) {
+  return (value) => {
+    refs.forEach((ref) => {
+      if (typeof ref === "function") {
+        ref(value);
+      } else if (ref != null) {
+        ref.current = value;
+      }
+    });
+  };
 }
 
-// src/components/Accordion/AccordionLink.tsx
-import classNames3 from "classnames/dedupe";
+// src/utils/polyfill-tests.ts
+var supportsDialog = () => typeof HTMLDialogElement === "function";
 
-// src/components/Flex/Flex.tsx
-import classNames from "classnames/dedupe";
+// src/utils/sizeClasses.ts
+var sizeClasses = (size) => {
+  if (!size) {
+    return {};
+  }
+  return {
+    "--is-xxs": size === "xxs",
+    "--is-xs": size === "xs",
+    "--is-sm": size === "sm",
+    "--is-md": size === "md",
+    "--is-lg": size === "lg",
+    "--is-xl": size === "xl",
+    "--is-xxl": size === "xxl"
+  };
+};
+
+// src/utils/spaceDelimitedList.ts
+function spaceDelimitedList(list) {
+  return list.filter(Boolean).join(" ") || void 0;
+}
 
 // src/components/Flex/propUtils.ts
 var buildFlexStyles = (props) => {
@@ -790,7 +314,7 @@ var Accordion = ({ ref, ...props }) => {
     headerChildren,
     ...rest
   } = props;
-  const [accordionState, setAccordionState] = useState6({
+  const [accordionState, setAccordionState] = useState({
     open: startOpen,
     withAnimation: false
   });
@@ -829,13 +353,13 @@ var Accordion = ({ ref, ...props }) => {
       withAnimation: true
     });
   };
-  useEffect11(() => {
+  useEffect(() => {
     setAccordionState({
       open: startOpen,
       withAnimation: true
     });
   }, [startOpen]);
-  const baseId = useId3();
+  const baseId = useId();
   const accordionId = `accordion-header-${baseId}`;
   const contentId = `accordion-panel-${baseId}`;
   return /* @__PURE__ */ jsxs3("div", { ref, ...rest, className: containerClasses, children: [
@@ -880,7 +404,7 @@ var Accordion = ({ ref, ...props }) => {
 Accordion.displayName = "Accordion";
 
 // src/components/Accordion/AccordionList.tsx
-import { useState as useState7, Fragment } from "react";
+import { useState as useState2, Fragment } from "react";
 import classNames6 from "classnames/dedupe";
 
 // src/components/Divider/Divider.tsx
@@ -901,69 +425,398 @@ var Divider = ({
       ...rest,
       children: /* @__PURE__ */ jsx5("div", { className: "mobius-divider__inner" })
     }
-  );
+  );
+};
+Divider.displayName = "Divider";
+
+// src/components/Accordion/AccordionList.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var AccordionList = (props) => {
+  const {
+    className,
+    content,
+    onOpen,
+    onClose,
+    allowMultiple = false,
+    ...rest
+  } = props;
+  const [openIds, setOpenIds] = useState2(/* @__PURE__ */ new Set());
+  const classes = classNames6("mobius", "mobius-accordion-list", className);
+  const handleAccordionChange = (id, isOpen) => {
+    setOpenIds((prev) => {
+      const newSet = new Set(prev);
+      if (isOpen) {
+        if (!allowMultiple) {
+          newSet.clear();
+        }
+        newSet.add(id);
+      } else {
+        newSet.delete(id);
+      }
+      return newSet;
+    });
+    if (isOpen) {
+      onOpen?.(id);
+    } else {
+      onClose?.(id);
+    }
+  };
+  return /* @__PURE__ */ jsx6("div", { className: classes, ...rest, children: content.map((item, index) => {
+    const { id, header, details } = item;
+    const isOpen = openIds.has(id);
+    return /* @__PURE__ */ jsxs4(Fragment, { children: [
+      /* @__PURE__ */ jsx6(
+        Accordion,
+        {
+          startOpen: isOpen,
+          showText: header,
+          hideText: header,
+          onChange: (isOpen2) => handleAccordionChange(id, isOpen2),
+          children: details
+        }
+      ),
+      index < content.length - 1 && /* @__PURE__ */ jsx6(Divider, {})
+    ] }, id);
+  }) });
+};
+AccordionList.displayName = "AccordionList";
+
+// src/components/AddressLookup/AddressLookup.tsx
+import { search } from "@simplybusiness/icons";
+import { useCallback as useCallback4, useState as useState9 } from "react";
+
+// src/components/Combobox/Combobox.tsx
+import classNames14 from "classnames/dedupe";
+import { useEffect as useEffect6, useId as useId4, useRef as useRef4, useState as useState8 } from "react";
+import { useOnUnmount } from "@simplybusiness/mobius-hooks";
+
+// src/hooks/useBreakpoint/useBreakpoint.tsx
+import {
+  useDebouncedValue,
+  useIsClient,
+  useWindowEvent
+} from "@simplybusiness/mobius-hooks";
+import { useCallback, useMemo, useState as useState3 } from "react";
+var DEFAULT_BREAKPOINTS = [
+  { size: "xs", value: 320 },
+  { size: "sm", value: 480 },
+  { size: "md", value: 670 },
+  { size: "lg", value: 960 },
+  { size: "xl", value: 1200 },
+  { size: "xxl", value: 1320 }
+];
+var PASSIVE = { passive: true };
+var getBreakpoint = (breakpoints, windowWidth) => {
+  const closest = breakpoints.findIndex(
+    (breakpoint) => breakpoint.value >= windowWidth + 1
+  );
+  const smallest = breakpoints[0];
+  const largest = breakpoints[breakpoints.length - 1];
+  const match = breakpoints[closest - 1];
+  if (closest === 0) return smallest;
+  if (closest === -1) return largest;
+  return match;
+};
+var useBreakpoint = (customBreakpoints) => {
+  const isClientSide = useIsClient();
+  const breakpoints = customBreakpoints || DEFAULT_BREAKPOINTS;
+  const defaultBreakpoint = breakpoints[0];
+  const [windowWidth, setWindowWidth] = useState3(
+    typeof globalThis?.window !== "undefined" ? window.innerWidth : defaultBreakpoint.value
+  );
+  useWindowEvent("resize", () => setWindowWidth(window.innerWidth), PASSIVE);
+  const debouncedWidth = useDebouncedValue(windowWidth, 200);
+  const currentBreakpoint = useMemo(
+    () => !isClientSide || breakpoints.length === 0 ? defaultBreakpoint : getBreakpoint(breakpoints, debouncedWidth),
+    [isClientSide, breakpoints, defaultBreakpoint, debouncedWidth]
+  );
+  const up = useCallback(
+    (size) => {
+      const sizeIndex = breakpoints.findIndex((item) => item.size === size);
+      if (sizeIndex === -1) {
+        return false;
+      }
+      const currentIndex = breakpoints.findIndex(
+        (item) => item.size === currentBreakpoint.size
+      );
+      return currentIndex >= sizeIndex;
+    },
+    [currentBreakpoint, breakpoints]
+  );
+  const down = useCallback(
+    (size) => {
+      const sizeIndex = breakpoints.findIndex((item) => item.size === size);
+      if (sizeIndex === -1) {
+        return true;
+      }
+      const currentIndex = breakpoints.findIndex(
+        (item) => item.size === currentBreakpoint.size
+      );
+      return currentIndex <= sizeIndex;
+    },
+    [currentBreakpoint, breakpoints]
+  );
+  return {
+    breakpoint: currentBreakpoint,
+    up,
+    down
+  };
+};
+
+// src/hooks/useButton/useButton.tsx
+import { useCallback as useCallback2 } from "react";
+function useButton({
+  elementType = "button",
+  type = "button",
+  isDisabled = false,
+  href,
+  target,
+  rel,
+  role,
+  name,
+  value,
+  onClick,
+  onPress
+}) {
+  const realOnClick = useCallback2(
+    (event) => {
+      if (isDisabled) {
+        return;
+      }
+      onClick?.(event);
+      onPress?.(event);
+    },
+    [isDisabled, onClick, onPress]
+  );
+  function getRole() {
+    if (role) {
+      return role;
+    }
+    if (elementType === "a") {
+      return void 0;
+    }
+    return "button";
+  }
+  const extraProps = elementType === "button" ? { type } : {
+    role: getRole()
+  };
+  return {
+    buttonProps: {
+      href: elementType === "a" ? href : void 0,
+      target: elementType === "a" ? target : void 0,
+      rel: elementType === "a" ? rel : void 0,
+      tabIndex: isDisabled ? -1 : 0,
+      disabled: isDisabled || void 0,
+      "aria-disabled": isDisabled || void 0,
+      name: elementType === "input" || elementType === "button" ? name : void 0,
+      value: elementType === "input" || elementType === "button" ? value : void 0,
+      ...extraProps,
+      onClick: realOnClick
+    }
+  };
+}
+
+// src/hooks/useDialog/useDialog.ts
+import { useCallback as useCallback3, useEffect as useEffect3, useState as useState5 } from "react";
+import { useBodyScrollLock } from "@simplybusiness/mobius-hooks";
+
+// src/hooks/useDialogPolyfill/useDialogPolyfill.ts
+import { useEffect as useEffect2, useRef, useState as useState4 } from "react";
+var useDialogPolyfill = () => {
+  const [hasDialogSupport, setHasDialogSupport] = useState4(false);
+  const hasAlreadyLoaded = useRef(false);
+  useEffect2(() => {
+    setHasDialogSupport(supportsDialog());
+  }, []);
+  const polyfillDialog = async (ref) => {
+    if (!hasAlreadyLoaded.current && !hasDialogSupport && typeof window !== "undefined" && ref.current !== null) {
+      const { default: dialogPolyfill } = await import("dialog-polyfill");
+      hasAlreadyLoaded.current = true;
+      try {
+        if (ref.current) {
+          dialogPolyfill.registerDialog(ref.current);
+        }
+      } catch (error3) {
+        console.error("Failed to load dialog-polyfill", error3);
+      }
+    }
+  };
+  return {
+    polyfillDialog
+  };
 };
-Divider.displayName = "Divider";
 
-// src/components/Accordion/AccordionList.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-var AccordionList = (props) => {
-  const {
-    className,
-    content,
-    onOpen,
-    onClose,
-    allowMultiple = false,
-    ...rest
-  } = props;
-  const [openIds, setOpenIds] = useState7(/* @__PURE__ */ new Set());
-  const classes = classNames6("mobius", "mobius-accordion-list", className);
-  const handleAccordionChange = (id, isOpen) => {
-    setOpenIds((prev) => {
-      const newSet = new Set(prev);
-      if (isOpen) {
-        if (!allowMultiple) {
-          newSet.clear();
-        }
-        newSet.add(id);
+// src/hooks/useDialog/useDialog.ts
+var TRANSITION_CLASS_NAME = "--transition";
+var FALLBACK_TRANSITION_DURATION = 0;
+var useDialog = (props) => {
+  const { ref, isOpen, transition, onOpen, onClose } = props;
+  const [hasDialogSupport, setHasDialogSupport] = useState5(false);
+  const shouldTransition = hasDialogSupport && transition.isEnabled;
+  const { polyfillDialog } = useDialogPolyfill();
+  useEffect3(() => {
+    setHasDialogSupport(supportsDialog());
+  }, []);
+  const TRANSITION_DURATION_IN_MS = ref.current && Number(
+    getComputedStyle(ref.current).getPropertyValue(transition.CSSVariable).replace("ms", "")
+  ) || FALLBACK_TRANSITION_DURATION;
+  useBodyScrollLock({ enabled: isOpen });
+  const open = useCallback3(() => {
+    ref.current?.showModal();
+    onOpen?.();
+  }, [onOpen, ref]);
+  const close = useCallback3(() => {
+    ref.current?.close();
+    onClose?.();
+  }, [onClose, ref]);
+  const handleClose = useCallback3(
+    (event) => {
+      if (event) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+      if (shouldTransition) {
+        ref.current?.classList.remove(TRANSITION_CLASS_NAME);
+        setTimeout(() => close(), TRANSITION_DURATION_IN_MS);
       } else {
-        newSet.delete(id);
+        close();
+      }
+    },
+    [TRANSITION_DURATION_IN_MS, close, ref, shouldTransition]
+  );
+  useEffect3(() => {
+    async function toggleDialog() {
+      if (isOpen && !ref.current?.open) {
+        await polyfillDialog(ref);
+        open();
+        setTimeout(() => {
+          ref.current?.classList.add(TRANSITION_CLASS_NAME);
+        }, 0);
+      } else if (!isOpen && ref.current?.open) {
+        handleClose();
       }
-      return newSet;
-    });
-    if (isOpen) {
-      onOpen?.(id);
-    } else {
-      onClose?.(id);
     }
+    void toggleDialog();
+  }, [handleClose, isOpen, open, ref, polyfillDialog]);
+  return {
+    open,
+    close: handleClose
   };
-  return /* @__PURE__ */ jsx6("div", { className: classes, ...rest, children: content.map((item, index) => {
-    const { id, header, details } = item;
-    const isOpen = openIds.has(id);
-    return /* @__PURE__ */ jsxs4(Fragment, { children: [
-      /* @__PURE__ */ jsx6(
-        Accordion,
-        {
-          startOpen: isOpen,
-          showText: header,
-          hideText: header,
-          onChange: (isOpen2) => handleAccordionChange(id, isOpen2),
-          children: details
-        }
-      ),
-      index < content.length - 1 && /* @__PURE__ */ jsx6(Divider, {})
-    ] }, id);
-  }) });
 };
-AccordionList.displayName = "AccordionList";
 
-// src/components/AddressLookup/AddressLookup.tsx
-import { search } from "@simplybusiness/icons";
-import { useCallback as useCallback4, useState as useState11 } from "react";
+// src/hooks/useLabel/useLabel.tsx
+import { useId as useId2, useRef as useRef2 } from "react";
+function useLabel({
+  id: providedId,
+  label,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  labelElementType = "label"
+}) {
+  let labelProps = {};
+  let fieldProps = {};
+  const hasWarnedAboutMissingLabels = useRef2(false);
+  const fallbackId = useId2();
+  const id = providedId || fallbackId;
+  const labelId = useId2();
+  if (label) {
+    ariaLabelledby = ariaLabelledby ? `${labelId} ${ariaLabelledby}` : labelId;
+    labelProps = {
+      id: labelId,
+      htmlFor: labelElementType === "label" ? id : void 0
+    };
+  } else if (!ariaLabelledby && !ariaLabel && !hasWarnedAboutMissingLabels.current) {
+    hasWarnedAboutMissingLabels.current = true;
+    console.warn(
+      "If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility"
+    );
+  }
+  fieldProps = {
+    id,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby
+  };
+  return {
+    labelProps,
+    fieldProps
+  };
+}
 
-// src/components/Combobox/Combobox.tsx
-import classNames14 from "classnames/dedupe";
-import { useEffect as useEffect14, useId as useId4, useRef as useRef5, useState as useState10 } from "react";
+// src/hooks/useTextField/useTextField.tsx
+import { useId as useId3 } from "react";
+function useTextField(props) {
+  const {
+    isDisabled = false,
+    isReadOnly = false,
+    isRequired = false,
+    inputElementType = "input"
+  } = props;
+  const { labelProps, fieldProps } = useLabel(props);
+  const descriptionId = useId3();
+  const descriptionProps = { id: descriptionId };
+  const errorMessageId = useId3();
+  const errorMessageProps = { id: errorMessageId };
+  const ariaDescribedBy = spaceDelimitedList([
+    props.description && descriptionId,
+    props.errorMessage && errorMessageId,
+    props["aria-describedby"]
+  ]);
+  return {
+    descriptionProps,
+    errorMessageProps,
+    labelProps,
+    inputProps: {
+      defaultValue: props.defaultValue,
+      value: props.value,
+      onChange: props.onChange,
+      disabled: isDisabled,
+      readOnly: isReadOnly,
+      required: isRequired,
+      "aria-required": isRequired === true ? true : void 0,
+      "aria-invalid": props.isInvalid,
+      "aria-describedby": ariaDescribedBy,
+      "aria-errormessage": props["aria-errormessage"],
+      role: props.role,
+      type: inputElementType === "input" ? props.type : void 0,
+      pattern: inputElementType === "input" ? props.pattern : void 0,
+      autoComplete: props.autoComplete,
+      maxLength: props.maxLength,
+      minLength: props.minLength,
+      name: props.name,
+      placeholder: props.placeholder,
+      inputMode: props.inputMode,
+      // Clipboard events
+      onCopy: props.onCopy,
+      onCut: props.onCut,
+      onPaste: props.onPaste,
+      // Composition events
+      onCompositionEnd: props.onCompositionEnd,
+      onCompositionStart: props.onCompositionStart,
+      onCompositionUpdate: props.onCompositionUpdate,
+      // Selection events
+      onSelect: props.onSelect,
+      // Input events
+      onBeforeInput: props.onBeforeInput,
+      onInput: props.onInput,
+      // Focus events
+      onFocus: props.onFocus,
+      onBlur: props.onBlur,
+      ...fieldProps
+    }
+  };
+}
+
+// src/hooks/useValidationClasses/useValidationClasses.ts
+var useValidationClasses = (props) => {
+  const { isInvalid } = props;
+  if (isInvalid) {
+    return "--is-invalid";
+  }
+  if (isInvalid === false) {
+    return "--is-valid";
+  }
+  return "";
+};
 
 // src/components/TextField/TextField.tsx
 import classNames11 from "classnames/dedupe";
@@ -1172,7 +1025,7 @@ function VisuallyHidden(props) {
 import classNames13 from "classnames/dedupe";
 
 // src/components/Combobox/Option.tsx
-import { useEffect as useEffect12, useRef as useRef4 } from "react";
+import { useEffect as useEffect4, useRef as useRef3 } from "react";
 import classNames12 from "classnames/dedupe";
 
 // src/components/Combobox/utils.tsx
@@ -1205,8 +1058,8 @@ var Option = ({
   optionComponent: OptionComponent,
   id
 }) => {
-  const optionRef = useRef4(null);
-  useEffect12(() => {
+  const optionRef = useRef3(null);
+  useEffect4(() => {
     if (isHighlighted && optionRef.current && optionRef.current.scrollIntoView) {
       optionRef.current.scrollIntoView({ block: "nearest" });
     }
@@ -1306,12 +1159,12 @@ var Listbox = ({
 };
 
 // src/components/Combobox/useComboboxHighlight.tsx
-import { useState as useState8 } from "react";
+import { useState as useState6 } from "react";
 function useComboboxHighlight(options) {
-  const [highlightedIndex, setHighlightedIndex] = useState8(
+  const [highlightedIndex, setHighlightedIndex] = useState6(
     options && options.length ? 0 : -1
   );
-  const [highlightedGroupIndex, setHighlightedGroupIndex] = useState8(0);
+  const [highlightedGroupIndex, setHighlightedGroupIndex] = useState6(0);
   function highlightNextOption() {
     const isGroup = isOptionGroup(options);
     if (!options) {
@@ -1389,7 +1242,8 @@ function useComboboxHighlight(options) {
 }
 
 // src/components/Combobox/useComboboxOptions.ts
-import { useEffect as useEffect13, useState as useState9 } from "react";
+import { useEffect as useEffect5, useState as useState7 } from "react";
+import { useDebouncedValue as useDebouncedValue2 } from "@simplybusiness/mobius-hooks";
 function useComboboxOptions({
   options,
   asyncOptions,
@@ -1399,15 +1253,15 @@ function useComboboxOptions({
   skipNextDebounceRef,
   onSearched
 }) {
-  const [filteredOptions, setFilteredOptions] = useState9(void 0);
-  const debouncedInputValue = useDebouncedValue(
+  const [filteredOptions, setFilteredOptions] = useState7(void 0);
+  const debouncedInputValue = useDebouncedValue2(
     inputValue,
     // Don't debounce synchronous options
     options ? 0 : delay
   );
-  const [isLoading, setIsLoading] = useState9(false);
-  const [error3, setError] = useState9(null);
-  useEffect13(() => {
+  const [isLoading, setIsLoading] = useState7(false);
+  const [error3, setError] = useState7(null);
+  useEffect5(() => {
     const controller = new AbortController();
     const { signal } = controller;
     const fetchOptions = async () => {
@@ -1492,11 +1346,11 @@ var ComboboxInner = ({
     errorMessage,
     ...otherProps
   } = props;
-  const skipNextDebounceRef = useRef5(false);
-  const fallbackRef = useRef5(null);
-  const [inputValue, setInputValue] = useState10(defaultValue || "");
-  const [isOpen, setIsOpen] = useState10(false);
-  const [isChanging, setIsChanging] = useState10(false);
+  const skipNextDebounceRef = useRef4(false);
+  const fallbackRef = useRef4(null);
+  const [inputValue, setInputValue] = useState8(defaultValue || "");
+  const [isOpen, setIsOpen] = useState8(false);
+  const [isChanging, setIsChanging] = useState8(false);
   const { filteredOptions, updateFilteredOptions, isLoading, error: error3 } = useComboboxOptions({
     options,
     asyncOptions,
@@ -1517,9 +1371,9 @@ var ComboboxInner = ({
   const inputRef = ref || fallbackRef;
   const listboxId = useId4();
   const statusId = useId4();
-  const blurTimeoutRef = useRef5(null);
-  const userInteractedRef = useRef5(false);
-  const justSelectedRef = useRef5(false);
+  const blurTimeoutRef = useRef4(null);
+  const userInteractedRef = useRef4(false);
+  const justSelectedRef = useRef4(false);
   const { down } = useBreakpoint();
   const isMobile = down("md");
   const handleFocus = (e) => {
@@ -1541,7 +1395,7 @@ var ComboboxInner = ({
       justSelectedRef.current = false;
     }
   };
-  useEffect14(() => {
+  useEffect6(() => {
     if (!inputRef || typeof inputRef === "function") return;
     const inputElement = inputRef.current;
     if (!inputElement) return;
@@ -1673,12 +1527,12 @@ var ComboboxInner = ({
       default:
     }
   };
-  useEffect14(() => {
+  useEffect6(() => {
     if (value) {
       setInputValue(value);
     }
   }, [value]);
-  useEffect14(() => {
+  useEffect6(() => {
     if (asyncOptions && isChanging) {
       setIsOpen(!!filteredOptions && filteredOptions.length > 0);
     }
@@ -1789,7 +1643,7 @@ var AddressLookup = ({
   errorMessage,
   ...otherProps
 }) => {
-  const [error3, _setError] = useState11(null);
+  const [error3, _setError] = useState9(null);
   const setError = useCallback4(
     (newError) => {
       if (newError != null) onError?.(newError);
@@ -2144,7 +1998,7 @@ var Button = ({ ref, ...props }) => {
 Button.displayName = "Button";
 
 // src/components/Checkbox/Checkbox.tsx
-import { useRef as useRef6, useId as useId5, useState as useState12, useEffect as useEffect15 } from "react";
+import { useRef as useRef5, useId as useId5, useState as useState10, useEffect as useEffect7 } from "react";
 import classNames20 from "classnames/dedupe";
 import { squareTick, square } from "@simplybusiness/icons";
 import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
@@ -2167,12 +2021,12 @@ var Checkbox = ({ ref, ...props }) => {
     ["aria-describedby"]: ariaDescribedBy,
     ...rest
   } = props;
-  const [checked, setChecked] = useState12(defaultSelected);
-  const fallbackRef = useRef6(null);
+  const [checked, setChecked] = useState10(defaultSelected);
+  const fallbackRef = useRef5(null);
   const refObj = ref || fallbackRef;
   const inputId = useId5();
   const isControlled = typeof selected === "boolean";
-  useEffect15(() => {
+  useEffect7(() => {
     if (isControlled) {
       setChecked(selected);
     }
@@ -2253,10 +2107,10 @@ import {
   Children as Children3,
   cloneElement as cloneElement4,
   isValidElement,
-  useEffect as useEffect16,
+  useEffect as useEffect8,
   useId as useId6,
-  useRef as useRef7,
-  useState as useState13
+  useRef as useRef6,
+  useState as useState11
 } from "react";
 import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
 var CheckboxGroup = ({ ref, ...props }) => {
@@ -2276,10 +2130,10 @@ var CheckboxGroup = ({ ref, ...props }) => {
     lastItemDisables = false,
     ...rest
   } = props;
-  const [selected, setSelected] = useState13(defaultValue);
-  const isInitializedRef = useRef7(false);
-  const prevDefaultValueRef = useRef7(defaultValue);
-  useEffect16(() => {
+  const [selected, setSelected] = useState11(defaultValue);
+  const isInitializedRef = useRef6(false);
+  const prevDefaultValueRef = useRef6(defaultValue);
+  useEffect8(() => {
     const hasChanged = defaultValue.length !== prevDefaultValueRef.current.length || defaultValue.some(
       (val, index) => val !== prevDefaultValueRef.current[index]
     );
@@ -2394,7 +2248,7 @@ Container.displayName = "Container";
 
 // src/components/DateField/DateField.tsx
 import classNames23 from "classnames/dedupe";
-import { useEffect as useEffect17, useRef as useRef8, useState as useState14 } from "react";
+import { useEffect as useEffect9, useRef as useRef7, useState as useState12 } from "react";
 
 // src/components/DateField/validation.ts
 var convertToDateFormat = (date, format) => {
@@ -2442,9 +2296,9 @@ var DateField = ({ ref, ...props }) => {
     value,
     ...otherProps
   } = props;
-  const [error3, setError] = useState14(errorMessage);
-  const [isInvalid, setIsInvalid] = useState14(void 0);
-  const localRef = useRef8(null);
+  const [error3, setError] = useState12(errorMessage);
+  const [isInvalid, setIsInvalid] = useState12(void 0);
+  const localRef = useRef7(null);
   const classes = classNames23("mobius-date-field", className);
   const formattedMin = min ? convertToDateFormat(min, format) : void 0;
   const formattedMax = max ? convertToDateFormat(max, format) : void 0;
@@ -2458,7 +2312,7 @@ var DateField = ({ ref, ...props }) => {
     setError(props.errorMessage);
     setIsInvalid(false);
   };
-  useEffect17(() => {
+  useEffect9(() => {
     if (!isValidDate(min, format)) {
       setInvalidState(`Invalid min date: ${min}`);
       return;
@@ -2517,7 +2371,7 @@ Content.displayName = "Content";
 
 // src/components/Drawer/Drawer.tsx
 import classNames24 from "classnames/dedupe";
-import { useEffect as useEffect18, useId as useId7, useMemo, useRef as useRef9, useState as useState15 } from "react";
+import { useEffect as useEffect10, useId as useId7, useMemo as useMemo2, useRef as useRef8, useState as useState13 } from "react";
 
 // src/components/Drawer/DrawerContext.tsx
 import { createContext } from "react";
@@ -2542,8 +2396,8 @@ var Drawer = ({ ref, ...props }) => {
     onClose,
     children
   } = props;
-  const dialogRef = useRef9(null);
-  const [shouldTransition, setShouldTransition] = useState15(false);
+  const dialogRef = useRef8(null);
+  const [shouldTransition, setShouldTransition] = useState13(false);
   const { close } = useDialog({
     ref: dialogRef,
     isOpen,
@@ -2565,10 +2419,10 @@ var Drawer = ({ ref, ...props }) => {
       "--should-transition": shouldTransition
     }
   );
-  useEffect18(() => {
+  useEffect10(() => {
     setShouldTransition(supportsDialog());
   }, []);
-  const contextValue = useMemo(
+  const contextValue = useMemo2(
     () => ({
       onClose: close,
       closeLabel,
@@ -2635,7 +2489,7 @@ var Drawer2 = Object.assign(Drawer, {
 Drawer2.displayName = "Drawer";
 
 // src/components/DropdownMenu/DropdownMenu.tsx
-import { Children as Children4, isValidElement as isValidElement2, cloneElement as cloneElement5, useState as useState16 } from "react";
+import { Children as Children4, isValidElement as isValidElement2, cloneElement as cloneElement5, useState as useState14 } from "react";
 import useDropdownMenu from "react-accessible-dropdown-menu-hook";
 import classNames25 from "classnames/dedupe";
 import { jsx as jsx30, jsxs as jsxs18 } from "react/jsx-runtime";
@@ -2647,7 +2501,7 @@ var DropdownMenu = ({ ref, ...props }) => {
     children,
     ...otherProps
   } = props;
-  const [activeId, setActiveId] = useState16(null);
+  const [activeId, setActiveId] = useState14(null);
   const numberOfItems = Children4.count(children);
   const {
     buttonProps,
@@ -2816,7 +2670,7 @@ var Grid = ({ ref: _ref, ...props }) => {
 Grid.displayName = "Grid";
 
 // src/components/Grid/Item.tsx
-import { useEffect as useEffect19, useState as useState17 } from "react";
+import { useEffect as useEffect11, useState as useState15 } from "react";
 import classNames29 from "classnames/dedupe";
 import { jsx as jsx34 } from "react/jsx-runtime";
 var getBreakpointMap = (config) => Object.entries(config).reduce(
@@ -2853,9 +2707,9 @@ var GridItem = ({ ref: _ref, ...props }) => {
     xl,
     xxl
   });
-  const [responsiveSpan, setResponsiveSpan] = useState17();
+  const [responsiveSpan, setResponsiveSpan] = useState15();
   const classes = classNames29("mobius-grid__item", className);
-  useEffect19(() => {
+  useEffect11(() => {
     setResponsiveSpan(breakpointMap[breakpointSize]);
   }, [breakpointSize, breakpointMap]);
   const styles = {
@@ -3126,7 +2980,7 @@ Header2.displayName = "Header";
 
 // src/components/Modal/Modal.tsx
 import classNames37 from "classnames/dedupe";
-import { useEffect as useEffect20, useMemo as useMemo2, useRef as useRef10, useState as useState18 } from "react";
+import { useEffect as useEffect12, useMemo as useMemo3, useRef as useRef9, useState as useState16 } from "react";
 import { jsx as jsx44 } from "react/jsx-runtime";
 var TRANSITION_CSS_VARIABLE2 = "--modal-transition-duration";
 var Modal = ({ ref, ...props }) => {
@@ -3141,11 +2995,11 @@ var Modal = ({ ref, ...props }) => {
     animation,
     ...rest
   } = props;
-  const [shouldTransition, setShouldTransition] = useState18(false);
-  useEffect20(() => {
+  const [shouldTransition, setShouldTransition] = useState16(false);
+  useEffect12(() => {
     setShouldTransition(supportsDialog());
   }, []);
-  const dialogRef = useRef10(null);
+  const dialogRef = useRef9(null);
   const { close } = useDialog({
     ref: dialogRef,
     isOpen,
@@ -3169,7 +3023,7 @@ var Modal = ({ ref, ...props }) => {
     },
     className
   );
-  const contextValue = useMemo2(
+  const contextValue = useMemo3(
     () => ({
       onClose: close,
       closeLabel
@@ -3198,7 +3052,7 @@ Modal2.displayName = "Modal";
 
 // src/components/NumberField/NumberField.tsx
 import classNames38 from "classnames/dedupe";
-import { useCallback as useCallback5, useEffect as useEffect21, useRef as useRef11 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect13, useRef as useRef10 } from "react";
 import { jsx as jsx45 } from "react/jsx-runtime";
 var NumberField = ({ ref, ...props }) => {
   const {
@@ -3215,9 +3069,9 @@ var NumberField = ({ ref, ...props }) => {
     onBlur: customOnBlur,
     ...rest
   } = otherProps;
-  const focusedInputRef = useRef11(null);
+  const focusedInputRef = useRef10(null);
   const wheelHandler = useCallback5((ev) => ev.preventDefault(), []);
-  useEffect21(() => {
+  useEffect13(() => {
     return () => {
       focusedInputRef.current?.removeEventListener("wheel", wheelHandler);
       focusedInputRef.current = null;
@@ -3298,7 +3152,7 @@ Option2.displayName = "Option";
 
 // src/components/PasswordField/PasswordField.tsx
 import classNames39 from "classnames/dedupe";
-import { useRef as useRef12, useState as useState19 } from "react";
+import { useRef as useRef11, useState as useState17 } from "react";
 
 // src/components/PasswordField/ShowHideButton.tsx
 import { eye, eyeSlash } from "@simplybusiness/icons";
@@ -3328,10 +3182,10 @@ var PasswordField = ({
   className,
   ...props
 }) => {
-  const [show, setShow] = useState19(false);
+  const [show, setShow] = useState17(false);
   const type = show ? "text" : "password";
   const classes = classNames39("mobius-password-field", className);
-  const localRef = useRef12(null);
+  const localRef = useRef11(null);
   const handleShowHideButtonClick = () => {
     const selectionStart = localRef.current?.selectionStart;
     const selectionEnd = localRef.current?.selectionEnd;
@@ -3370,13 +3224,14 @@ import {
 } from "@floating-ui/react";
 import { cross as cross3 } from "@simplybusiness/icons";
 import classNames40 from "classnames/dedupe";
-import { cloneElement as cloneElement9, useRef as useRef13, useState as useState20 } from "react";
+import { cloneElement as cloneElement9, useRef as useRef12, useState as useState18 } from "react";
+import { useWindowEvent as useWindowEvent2 } from "@simplybusiness/mobius-hooks";
 import { Fragment as Fragment4, jsx as jsx49, jsxs as jsxs23 } from "react/jsx-runtime";
 var OFFSET_FROM_CONTENT_DEFAULT = 10;
 var Popover = (props) => {
   const { trigger, children, onOpen, onClose, className } = props;
-  const arrowRef = useRef13(null);
-  const [isOpen, setIsOpen] = useState20(false);
+  const arrowRef = useRef12(null);
+  const [isOpen, setIsOpen] = useState18(false);
   const { refs, floatingStyles, context } = useFloating({
     open: isOpen,
     onOpenChange: setIsOpen,
@@ -3425,7 +3280,7 @@ var Popover = (props) => {
     onClick: toggleVisibility,
     ...getReferenceProps()
   });
-  useWindowEvent("keydown", (e) => {
+  useWindowEvent2("keydown", (e) => {
     if (e.key === "Escape") {
       onClose?.();
       e.preventDefault();
@@ -3586,8 +3441,8 @@ import {
   Children as Children7,
   isValidElement as isValidElement5,
   useLayoutEffect,
-  useMemo as useMemo3,
-  useRef as useRef14
+  useMemo as useMemo4,
+  useRef as useRef13
 } from "react";
 import { Fragment as Fragment5, jsx as jsx51, jsxs as jsxs25 } from "react/jsx-runtime";
 var Radio = ({ ref, ...props }) => {
@@ -3613,12 +3468,12 @@ var Radio = ({ ref, ...props }) => {
   const isMultiline = label && children;
   const isControlled = selected !== void 0;
   const isChecked = isControlled ? selected === value : defaultChecked;
-  const contentRef = useRef14(null);
-  const prevOverflowRef = useRef14({
+  const contentRef = useRef13(null);
+  const prevOverflowRef = useRef13({
     vertical: false,
     horizontal: false
   });
-  const hasIconFirst = useMemo3(() => {
+  const hasIconFirst = useMemo4(() => {
     if (!children || Children7.count(children) === 0) return false;
     const firstChild = Children7.toArray(children)[0];
     if (!isValidElement5(firstChild)) return false;
@@ -3710,10 +3565,10 @@ import {
   cloneElement as cloneElement10,
   isValidElement as isValidElement6,
   useCallback as useCallback6,
-  useEffect as useEffect22,
+  useEffect as useEffect14,
   useId as useId10,
-  useRef as useRef15,
-  useState as useState21
+  useRef as useRef14,
+  useState as useState19
 } from "react";
 import { jsx as jsx52, jsxs as jsxs26 } from "react/jsx-runtime";
 var getDefaultVal = (children, defaultValue) => {
@@ -3743,10 +3598,10 @@ var RadioGroup = ({ ref, ...props }) => {
     ...rest
   } = props;
   const defaultSelected = getDefaultVal(children, value || defaultValue);
-  const [selected, setSelected] = useState21(defaultSelected);
-  const overflowsRef = useRef15({});
-  const [hasOverflow, setHasOverflow] = useState21(false);
-  useEffect22(() => {
+  const [selected, setSelected] = useState19(defaultSelected);
+  const overflowsRef = useRef14({});
+  const [hasOverflow, setHasOverflow] = useState19(false);
+  useEffect14(() => {
     if (value !== void 0) {
       setSelected(value);
     }
@@ -3957,10 +3812,10 @@ Select.displayName = "Select";
 
 // src/components/Slider/Slider.tsx
 import classNames47 from "classnames/dedupe";
-import { useRef as useRef16, useState as useState22 } from "react";
+import { useRef as useRef15, useState as useState20 } from "react";
 
 // src/components/Slider/helpers.ts
-import { useCallback as useCallback7, useMemo as useMemo4 } from "react";
+import { useCallback as useCallback7, useMemo as useMemo5 } from "react";
 function numberFormatter(value, formatOptions, locale = navigator.languages?.[0] || "en-GB") {
   if (!formatOptions) {
     return value?.toString() || "";
@@ -3990,11 +3845,11 @@ var Slider = (props) => {
     formatOptions,
     isDisabled = false
   } = props;
-  const trackRef = useRef16(null);
-  const [currentValue, setCurrentValue] = useState22(
+  const trackRef = useRef15(null);
+  const [currentValue, setCurrentValue] = useState20(
     value || defaultValue || 0
   );
-  const [isDragging, setIsDraggging] = useState22(false);
+  const [isDragging, setIsDraggging] = useState20(false);
   const { labelProps, fieldProps } = useLabel({
     id,
     label,
@@ -4080,8 +3935,8 @@ SVG.displayName = "SVG";
 
 // src/components/Switch/Switch.tsx
 import {
-  useState as useState23,
-  useEffect as useEffect23
+  useState as useState21,
+  useEffect as useEffect15
 } from "react";
 import classNames49 from "classnames/dedupe";
 import { jsx as jsx58, jsxs as jsxs30 } from "react/jsx-runtime";
@@ -4093,8 +3948,8 @@ var Switch = ({ ref, ...props }) => {
     isDisabled = false,
     ...otherProps
   } = props;
-  const [enabled, setEnabled] = useState23(checked);
-  useEffect23(() => {
+  const [enabled, setEnabled] = useState21(checked);
+  useEffect15(() => {
     setEnabled(checked);
   }, [checked]);
   const classes = classNames49(
@@ -4307,7 +4162,7 @@ var TextArea = ({ ref, ...props }) => {
 TextArea.displayName = "TextArea";
 
 // src/components/TextOrHTML/TextOrHTML.tsx
-import { useMemo as useMemo5 } from "react";
+import { useMemo as useMemo6 } from "react";
 import { jsx as jsx69 } from "react/jsx-runtime";
 var TextOrHTML = ({
   ref,
@@ -4318,7 +4173,7 @@ var TextOrHTML = ({
   ...textProps
 }) => {
   const DangerousComponent = htmlElementType;
-  const dangerousHTML = useMemo5(() => ({ __html: text }), [text]);
+  const dangerousHTML = useMemo6(() => ({ __html: text }), [text]);
   const dangerousElement = /* @__PURE__ */ jsx69(
     DangerousComponent,
     {
@@ -4472,7 +4327,7 @@ var toast = {
 };
 
 // src/components/Toast/Toaster.tsx
-import { useEffect as useEffect24 } from "react";
+import { useEffect as useEffect16 } from "react";
 import { Toaster as SonnerToaster } from "sonner";
 import { jsx as jsx72 } from "react/jsx-runtime";
 var Toaster = ({
@@ -4483,7 +4338,7 @@ var Toaster = ({
   visibleToasts = 3,
   gap = 8
 }) => {
-  useEffect24(() => {
+  useEffect16(() => {
     toastState.showCloseButton = closeButton;
   }, [closeButton]);
   return /* @__PURE__ */ jsx72(
@@ -4502,7 +4357,7 @@ Toaster.displayName = "Toaster";
 
 // src/components/Trust/Trust.tsx
 import classNames62 from "classnames/dedupe";
-import { useEffect as useEffect25, useRef as useRef17, useState as useState24 } from "react";
+import { useEffect as useEffect17, useRef as useRef16, useState as useState22 } from "react";
 
 // src/components/Trust/constants.ts
 var REQUIRED_TRUSTPILOT_CLASS_NAME = "trustpilot-widget";
@@ -4578,8 +4433,8 @@ var Trust = ({ ref, ...props }) => {
     stars,
     className
   } = props;
-  const [isMounted, setIsMounted] = useState24(false);
-  const trustRef = useRef17(null);
+  const [isMounted, setIsMounted] = useState22(false);
+  const trustRef = useRef16(null);
   const {
     templateId,
     className: variantClassName,
@@ -4606,13 +4461,13 @@ var Trust = ({ ref, ...props }) => {
     },
     className
   );
-  useEffect25(() => {
+  useEffect17(() => {
     const hasTrustpilotLoaded = trustRef.current && window?.Trustpilot && window?.Trustpilot.loadFromElement;
     if (isMounted && hasTrustpilotLoaded) {
       window.Trustpilot.loadFromElement(trustRef.current, true);
     }
   }, [isMounted]);
-  useEffect25(() => {
+  useEffect17(() => {
     setIsMounted(true);
   }, []);
   if (!isMounted) return /* @__PURE__ */ jsx73("div", { style: styles });
@@ -4639,7 +4494,7 @@ var Trust = ({ ref, ...props }) => {
 
 // src/components/ExpandableText/ExpandableText.tsx
 import classNames63 from "classnames/dedupe";
-import { useEffect as useEffect26, useId as useId12, useRef as useRef18, useState as useState25 } from "react";
+import { useEffect as useEffect18, useId as useId12, useRef as useRef17, useState as useState23 } from "react";
 import { jsx as jsx74, jsxs as jsxs34 } from "react/jsx-runtime";
 var ExpandableText = ({ ref, ...props }) => {
   const {
@@ -4654,14 +4509,14 @@ var ExpandableText = ({ ref, ...props }) => {
     onToggle,
     ...otherProps
   } = props;
-  const [isExpanded, setIsExpanded] = useState25(false);
-  const [isCollapsed, setIsCollapsed] = useState25(false);
-  const textRef = useRef18(null);
+  const [isExpanded, setIsExpanded] = useState23(false);
+  const [isCollapsed, setIsCollapsed] = useState23(false);
+  const textRef = useRef17(null);
   const { down } = useBreakpoint();
   const baseId = useId12();
   const expandButtonId = `expandable-text-expand-${baseId}`;
   const shouldCollapse = breakpoint ? down(breakpoint) : true;
-  useEffect26(() => {
+  useEffect18(() => {
     if (!shouldCollapse || !textRef.current) {
       setIsCollapsed(false);
       return;
@@ -4724,7 +4579,7 @@ var ExpandableText = ({ ref, ...props }) => {
 ExpandableText.displayName = "ExpandableText";
 
 // src/components/MaskedField/MaskedField.tsx
-import { useCallback as useCallback8, useEffect as useEffect27 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect19 } from "react";
 import { useIMask } from "react-imask";
 import { jsx as jsx75 } from "react/jsx-runtime";
 var useAcceptHandler = (onChange, useMaskedValue, name) => {
@@ -4787,7 +4642,7 @@ var ControlledMaskedField = ({
   const { ref: imaskRef, maskRef, setValue } = useIMask(mask, { onAccept });
   const combinedRef = useCombinedRef(imaskRef, forwardedRef);
   const handleBlur = useBlurHandler(onBlur, maskRef, useMaskedValue, name);
-  useEffect27(() => {
+  useEffect19(() => {
     if (!maskRef.current) {
       return;
     }
@@ -4919,21 +4774,14 @@ export {
   convertToDateFormat,
   isValidDate,
   toast,
-  useBodyScrollLock,
   useBreakpoint,
   useButton,
-  useDebouncedValue,
   useDialog,
   useDialogPolyfill,
   useDrawer,
   useLabel,
   useModal,
-  useOnClickOutside,
-  useOnUnmount,
-  usePrefersReducedMotion,
-  useRenderCount,
   useTextField,
-  useValidationClasses,
-  useWindowEvent
+  useValidationClasses
 };
 //# sourceMappingURL=index.js.map