@simplybusiness/mobius 9.1.0 → 9.1.2

package/dist/esm/chunk-YUDNS4SZ.js

@@ -0,0 +1,4735 @@
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+
+// src/components/Accordion/Accordion.tsx
+import classNames4 from "classnames/dedupe";
+import { useEffect, useState, useId } from "react";
+import { usePrefersReducedMotion } from "@simplybusiness/mobius-hooks";
+
+// src/components/Accordion/AccordionLink.tsx
+import classNames3 from "classnames/dedupe";
+
+// 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/components/Flex/propUtils.ts
+var buildFlexStyles = (props) => {
+  const {
+    flexDirection,
+    flexWrap,
+    flexGrow,
+    flex,
+    justifyContent,
+    alignItems,
+    alignContent,
+    gap,
+    rowGap,
+    columnGap
+  } = props;
+  const styleProps = {
+    flexDirection,
+    flexWrap,
+    flexGrow,
+    flex,
+    justifyContent,
+    alignItems,
+    alignContent,
+    gap: getSpacingValue(gap),
+    columnGap: getSpacingValue(columnGap),
+    rowGap: getSpacingValue(rowGap)
+  };
+  return filterUndefinedProps(styleProps);
+};
+var splitProps = (props) => {
+  const {
+    flexDirection,
+    flexWrap,
+    flexGrow,
+    flex,
+    justifyContent,
+    alignItems,
+    alignContent,
+    gap,
+    rowGap,
+    columnGap,
+    ...otherProps
+  } = props;
+  return [
+    {
+      flexDirection,
+      flexWrap,
+      flexGrow,
+      flex,
+      justifyContent,
+      alignItems,
+      alignContent,
+      gap,
+      rowGap,
+      columnGap
+    },
+    otherProps
+  ];
+};
+
+// src/components/Flex/Flex.tsx
+import { jsx } from "react/jsx-runtime";
+var Flex = ({ ref, ...props }) => {
+  const {
+    elementType: Element = "div",
+    style,
+    className,
+    ...otherProps
+  } = props;
+  const classes = classNames("mobius", "mobius-flex", className);
+  const [styleProps, restProps] = splitProps(otherProps);
+  const flexStyles = buildFlexStyles(styleProps);
+  return /* @__PURE__ */ jsx(
+    Element,
+    {
+      ref,
+      style: {
+        ...flexStyles,
+        ...style
+      },
+      className: classes,
+      ...restProps
+    }
+  );
+};
+Flex.displayName = "Flex";
+
+// src/components/Icon/Icon.tsx
+import classNames2 from "classnames/dedupe";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var ICON_PREFIX = "mobius-icon";
+var capitaliseFirstLetter = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+function Icon({
+  ref,
+  icon,
+  className,
+  size = "xs",
+  color,
+  fixedWidth,
+  spin,
+  spinReverse,
+  title,
+  ...otherProps
+}) {
+  if (!icon) {
+    throw new Error("Must specify icon object");
+  }
+  const classes = classNames2(
+    "mobius",
+    "mobius-icon",
+    `svg-inline--${ICON_PREFIX}`,
+    `--size-${size}`,
+    className,
+    {
+      [`${ICON_PREFIX}-fw`]: fixedWidth,
+      [`${ICON_PREFIX}-spin`]: spin || spinReverse,
+      [`${ICON_PREFIX}-spin-reverse`]: spinReverse
+    }
+  );
+  const { iconName, width, height, svgPathData } = icon;
+  const formattedIconName = iconName.split("-").join(" ");
+  const defaultTitle = `${capitaliseFirstLetter(formattedIconName)} icon`;
+  const titleText = title || defaultTitle;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ref,
+      focusable: "false",
+      "data-icon": iconName,
+      className: classes,
+      role: "img",
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: `0 0 ${width} ${height}`,
+      style: { color },
+      ...otherProps,
+      children: [
+        /* @__PURE__ */ jsx2("title", { children: titleText }),
+        /* @__PURE__ */ jsx2("path", { fill: "currentColor", d: svgPathData })
+      ]
+    }
+  );
+}
+
+// src/components/Accordion/AccordionLink.tsx
+import { chevronDown } from "@simplybusiness/icons";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var AccordionLink = ({
+  text,
+  elementType: LinkElement = "span",
+  toggle,
+  onClick,
+  headerChildren,
+  ariaExpanded,
+  accordionId,
+  contentId
+}) => {
+  const linkClasses = classNames3("mobius-accordion__link", {
+    "--is-open": ariaExpanded
+  });
+  const iconClasses = classNames3("mobius-accordion__link-icon", {
+    "--is-open": ariaExpanded
+  });
+  const handleOnClick = (e) => {
+    if (onClick) {
+      onClick(e);
+    }
+    toggle();
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === " " || e.key === "Enter") {
+      toggle();
+    }
+  };
+  if (headerChildren) {
+    return /* @__PURE__ */ jsxs2(
+      Flex,
+      {
+        justifyContent: "space-between",
+        alignItems: "center",
+        className: "mobius-accordion__header",
+        children: [
+          /* @__PURE__ */ jsxs2(
+            "div",
+            {
+              id: accordionId,
+              className: linkClasses,
+              onClick: handleOnClick,
+              onKeyDown: handleKeyDown,
+              role: "button",
+              tabIndex: 0,
+              "aria-expanded": !!ariaExpanded,
+              "aria-controls": contentId,
+              children: [
+                /* @__PURE__ */ jsx3(LinkElement, { className: "mobius-accordion__link-text", children: text }),
+                /* @__PURE__ */ jsx3(Icon, { icon: chevronDown, className: iconClasses })
+              ]
+            }
+          ),
+          headerChildren
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      id: accordionId,
+      className: linkClasses,
+      onClick: handleOnClick,
+      onKeyDown: handleKeyDown,
+      role: "button",
+      tabIndex: 0,
+      "aria-expanded": !!ariaExpanded,
+      "aria-controls": contentId,
+      children: [
+        /* @__PURE__ */ jsx3(LinkElement, { className: "mobius-accordion__link-text", children: text }),
+        /* @__PURE__ */ jsx3(Icon, { icon: chevronDown, className: iconClasses })
+      ]
+    }
+  );
+};
+
+// src/components/Accordion/Accordion.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var Accordion = ({ ref, ...props }) => {
+  const {
+    showText = "See more",
+    hideText = "See less",
+    headerPosition = "top",
+    startOpen = false,
+    linkElementType,
+    onClick,
+    onOpen,
+    onClose,
+    onChange = () => {
+    },
+    headerChildren,
+    ...rest
+  } = props;
+  const [accordionState, setAccordionState] = useState({
+    open: startOpen,
+    withAnimation: false
+  });
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const containerClasses = classNames4(
+    "mobius",
+    "mobius-accordion",
+    props.className,
+    {
+      "--should-animate": accordionState.withAnimation && !prefersReducedMotion,
+      "--is-open": accordionState.open
+    }
+  );
+  const contentContainerClasses = classNames4(
+    "mobius-accordion__content-container",
+    {
+      "--is-open": accordionState.open
+    }
+  );
+  const contentClasses = classNames4("mobius-accordion__content", {
+    "--is-open": accordionState.open
+  });
+  const linkText = accordionState.open ? hideText : showText;
+  const handleChange = () => {
+    if (!accordionState.open && onOpen) {
+      onOpen();
+    }
+    if (accordionState.open && onClose) {
+      onClose();
+    }
+    if (onChange) {
+      onChange(!accordionState.open);
+    }
+    setAccordionState({
+      open: !accordionState.open,
+      withAnimation: true
+    });
+  };
+  useEffect(() => {
+    setAccordionState({
+      open: startOpen,
+      withAnimation: true
+    });
+  }, [startOpen]);
+  const baseId = useId();
+  const accordionId = `accordion-header-${baseId}`;
+  const contentId = `accordion-panel-${baseId}`;
+  return /* @__PURE__ */ jsxs3("div", { ref, ...rest, className: containerClasses, children: [
+    headerPosition === "top" && /* @__PURE__ */ jsx4(
+      AccordionLink,
+      {
+        text: linkText,
+        elementType: linkElementType,
+        toggle: handleChange,
+        onClick,
+        ariaExpanded: accordionState.open,
+        headerChildren,
+        accordionId,
+        contentId
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      "div",
+      {
+        id: contentId,
+        className: contentContainerClasses,
+        "aria-hidden": !accordionState.open,
+        "aria-labelledby": accordionId,
+        role: "region",
+        children: /* @__PURE__ */ jsx4("div", { className: contentClasses, children: props.children })
+      }
+    ),
+    headerPosition === "bottom" && /* @__PURE__ */ jsx4(
+      AccordionLink,
+      {
+        text: linkText,
+        toggle: handleChange,
+        onClick,
+        ariaExpanded: accordionState.open,
+        headerChildren,
+        accordionId,
+        contentId
+      }
+    )
+  ] });
+};
+Accordion.displayName = "Accordion";
+
+// src/components/Accordion/AccordionList.tsx
+import { useState as useState2, Fragment } from "react";
+import classNames6 from "classnames/dedupe";
+
+// src/components/Divider/Divider.tsx
+import classNames5 from "classnames/dedupe";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Divider = ({
+  "aria-orientation": ariaOrientation = "horizontal",
+  className,
+  ...rest
+}) => {
+  const classes = classNames5("mobius", "mobius-divider", className);
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      className: classes,
+      role: "separator",
+      "aria-orientation": ariaOrientation,
+      ...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 { useOnUnmount } from "@simplybusiness/mobius-hooks";
+import classNames14 from "classnames/dedupe";
+import { useEffect as useEffect6, useId as useId4, useRef as useRef4, useState as useState8 } from "react";
+
+// 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
+  };
+};
+
+// 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 {
+        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();
+      }
+    }
+    void toggleDialog();
+  }, [handleClose, isOpen, open, ref, polyfillDialog]);
+  return {
+    open,
+    close: handleClose
+  };
+};
+
+// src/hooks/useLabel/useLabel.tsx
+import { useId as useId2, useRef as useRef2 } from "react";
+function useLabel({
+  id: providedId,
+  label,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  labelElementType = "label"
+}) {
+  let labelProps = {};
+  let fieldProps = {};
+  const hasWarnedAboutMissingLabels = useRef2(false);
+  const fallbackId = useId2();
+  const id = providedId || fallbackId;
+  const labelId = useId2();
+  if (label) {
+    ariaLabelledby = ariaLabelledby ? `${labelId} ${ariaLabelledby}` : labelId;
+    labelProps = {
+      id: labelId,
+      htmlFor: labelElementType === "label" ? id : void 0
+    };
+  } else if (!ariaLabelledby && !ariaLabel && !hasWarnedAboutMissingLabels.current) {
+    hasWarnedAboutMissingLabels.current = true;
+    console.warn(
+      "If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility"
+    );
+  }
+  fieldProps = {
+    id,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby
+  };
+  return {
+    labelProps,
+    fieldProps
+  };
+}
+
+// src/hooks/useTextField/useTextField.tsx
+import { useId as useId3 } from "react";
+function useTextField(props) {
+  const {
+    isDisabled = false,
+    isReadOnly = false,
+    isRequired = false,
+    inputElementType = "input"
+  } = props;
+  const { labelProps, fieldProps } = useLabel(props);
+  const descriptionId = useId3();
+  const descriptionProps = { id: descriptionId };
+  const errorMessageId = useId3();
+  const errorMessageProps = { id: errorMessageId };
+  const ariaDescribedBy = spaceDelimitedList([
+    props.description && descriptionId,
+    props.errorMessage && errorMessageId,
+    props["aria-describedby"]
+  ]);
+  return {
+    descriptionProps,
+    errorMessageProps,
+    labelProps,
+    inputProps: {
+      defaultValue: props.defaultValue,
+      value: props.value,
+      onChange: props.onChange,
+      disabled: isDisabled,
+      readOnly: isReadOnly,
+      required: isRequired,
+      "aria-required": isRequired === true ? true : void 0,
+      "aria-invalid": props.isInvalid,
+      "aria-describedby": ariaDescribedBy,
+      "aria-errormessage": props["aria-errormessage"],
+      role: props.role,
+      type: inputElementType === "input" ? props.type : void 0,
+      pattern: inputElementType === "input" ? props.pattern : void 0,
+      autoComplete: props.autoComplete,
+      maxLength: props.maxLength,
+      minLength: props.minLength,
+      name: props.name,
+      placeholder: props.placeholder,
+      inputMode: props.inputMode,
+      // Clipboard events
+      onCopy: props.onCopy,
+      onCut: props.onCut,
+      onPaste: props.onPaste,
+      // Composition events
+      onCompositionEnd: props.onCompositionEnd,
+      onCompositionStart: props.onCompositionStart,
+      onCompositionUpdate: props.onCompositionUpdate,
+      // Selection events
+      onSelect: props.onSelect,
+      // Input events
+      onBeforeInput: props.onBeforeInput,
+      onInput: props.onInput,
+      // Focus events
+      onFocus: props.onFocus,
+      onBlur: props.onBlur,
+      ...fieldProps
+    }
+  };
+}
+
+// src/hooks/useValidationClasses/useValidationClasses.ts
+var useValidationClasses = (props) => {
+  const { isInvalid } = props;
+  if (isInvalid) {
+    return "--is-invalid";
+  }
+  if (isInvalid === false) {
+    return "--is-valid";
+  }
+  return "";
+};
+
+// src/components/TextField/TextField.tsx
+import classNames11 from "classnames/dedupe";
+
+// src/components/ErrorMessage/ErrorMessage.tsx
+import { error } from "@simplybusiness/icons";
+import classNames7 from "classnames/dedupe";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var ErrorMessage = ({
+  id,
+  errorMessage,
+  className
+}) => {
+  const classes = classNames7("mobius", "mobius-error-message", className);
+  if (!errorMessage) return null;
+  return /* @__PURE__ */ jsxs5("div", { id, className: classes, "data-testid": "ErrorMessage", role: "alert", children: [
+    /* @__PURE__ */ jsx7(
+      Icon,
+      {
+        icon: error,
+        className: "mobius-error-message__icon",
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsx7(
+      TextOrHTML,
+      {
+        elementType: "span",
+        className: "mobius-error-message__text",
+        text: errorMessage
+      }
+    )
+  ] });
+};
+ErrorMessage.displayName = "ErrorMessage";
+
+// src/components/Label/Label.tsx
+import classNames8 from "classnames/dedupe";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var Label = ({ ref, ...props }) => {
+  const { elementType: Element = "label", children, ...otherProps } = props;
+  const classes = classNames8("mobius", "mobius-label", props.className);
+  otherProps.className = classes;
+  return /* @__PURE__ */ jsx8(Element, { ref, ...otherProps, className: classes, children });
+};
+Label.displayName = "Label";
+
+// src/components/Stack/Stack.tsx
+import classNames9 from "classnames/dedupe";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var Stack = ({ ref, ...props }) => {
+  const { elementType: Element = "div", gap, ...otherProps } = props;
+  const classes = classNames9(
+    "mobius",
+    "mobius-stack",
+    {
+      [`--gap-${gap}`]: gap
+    },
+    otherProps.className
+  );
+  return /* @__PURE__ */ jsx9(Element, { ref, ...otherProps, className: classes });
+};
+Stack.displayName = "Stack";
+
+// src/components/TextField/adornmentWithClassName.ts
+import classNames10 from "classnames/dedupe";
+import { cloneElement } from "react";
+var adornmentWithClassName = (component, validationClasses, className) => {
+  if (!component) return null;
+  return cloneElement(component, {
+    className: classNames10(
+      component.props.className,
+      validationClasses,
+      className
+    )
+  });
+};
+
+// src/components/TextField/TextField.tsx
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+var TextField = ({ ref, ...props }) => {
+  const {
+    isDisabled,
+    type = "text",
+    isInvalid,
+    className,
+    label,
+    errorMessage,
+    children,
+    isRequired,
+    prefixInside,
+    prefixOutside,
+    suffixInside,
+    suffixOutside,
+    isReadOnly,
+    ...otherProps
+  } = props;
+  const { inputProps, labelProps, errorMessageProps } = useTextField({
+    ...props,
+    "aria-errormessage": errorMessage
+  });
+  const hidden = type === "hidden";
+  const validationClasses = useValidationClasses({ isInvalid });
+  const textfieldClasses = {
+    "--is-disabled": isDisabled,
+    "--is-required": typeof isRequired === "boolean" && isRequired,
+    "--is-optional": typeof isRequired === "boolean" && !isRequired,
+    "--is-hidden": hidden,
+    [className || ""]: true
+  };
+  const sharedClasses = classNames11(validationClasses, textfieldClasses);
+  const labelClasses = classNames11(
+    {
+      "--is-disabled": isDisabled
+    },
+    validationClasses
+  );
+  const containerClasses = classNames11(
+    "mobius",
+    "mobius-text-field",
+    sharedClasses
+  );
+  const inputClasses = classNames11(
+    "mobius",
+    "mobius-text-field__input",
+    sharedClasses
+  );
+  const inputWrapperClasses = classNames11(
+    "mobius-text-field__input-wrapper",
+    sharedClasses
+  );
+  return /* @__PURE__ */ jsxs6(Stack, { gap: "xs", className: containerClasses, children: [
+    label && !hidden && /* @__PURE__ */ jsx10(Label, { ...labelProps, className: labelClasses, children: label }),
+    /* @__PURE__ */ jsxs6("div", { className: "mobius-text-field__inner-container", children: [
+      adornmentWithClassName(
+        prefixOutside,
+        labelClasses,
+        "mobius-text-field__prefix-outside"
+      ),
+      /* @__PURE__ */ jsxs6("div", { className: inputWrapperClasses, children: [
+        adornmentWithClassName(
+          prefixInside,
+          labelClasses,
+          "mobius-text-field__prefix-inside"
+        ),
+        /* @__PURE__ */ jsx10(
+          "input",
+          {
+            ...otherProps,
+            ...inputProps,
+            ref,
+            type,
+            className: inputClasses
+          }
+        ),
+        adornmentWithClassName(
+          suffixInside,
+          labelClasses,
+          "mobius-text-field__suffix-inside"
+        )
+      ] }),
+      adornmentWithClassName(
+        suffixOutside,
+        labelClasses,
+        "mobius-text-field__suffix-outside"
+      )
+    ] }),
+    children && /* @__PURE__ */ jsx10("div", { className: "mobius-text-field__children", children }),
+    /* @__PURE__ */ jsx10(ErrorMessage, { ...errorMessageProps, errorMessage })
+  ] });
+};
+TextField.displayName = "TextField";
+
+// src/components/VisuallyHidden/VisuallyHidden.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+function VisuallyHidden(props) {
+  const {
+    className,
+    children,
+    elementType: Component = "div",
+    ...otherProps
+  } = props;
+  return /* @__PURE__ */ jsx11(
+    Component,
+    {
+      className,
+      style: {
+        border: 0,
+        clip: "rect(0 0 0 0)",
+        clipPath: "inset(50%)",
+        height: "1px",
+        margin: "-1px",
+        overflow: "hidden",
+        padding: 0,
+        position: "absolute",
+        width: "1px",
+        whiteSpace: "nowrap"
+      },
+      ...otherProps,
+      children
+    }
+  );
+}
+
+// src/components/Combobox/Listbox.tsx
+import classNames13 from "classnames/dedupe";
+
+// src/components/Combobox/Option.tsx
+import { useEffect as useEffect4, useRef as useRef3 } from "react";
+import classNames12 from "classnames/dedupe";
+
+// src/components/Combobox/utils.tsx
+function isOptionGroup(options) {
+  if (!options) return false;
+  return typeof options[0] === "object" && "options" in options[0] && options[0].options !== void 0 && "heading" in options[0] && options[0].heading !== void 0;
+}
+var getOptionValue = (option) => typeof option === "string" ? option : option?.value;
+var getOptionLabel = (option) => typeof option === "string" ? option : option?.label;
+function filterOptions(options, inputValue) {
+  if (isOptionGroup(options)) {
+    return options.map((optionGroup) => ({
+      ...optionGroup,
+      options: optionGroup.options.filter(
+        (option) => getOptionLabel(option).toLowerCase().includes(inputValue.toLowerCase())
+      )
+    })).filter((optionGroup) => optionGroup.options.length > 0);
+  }
+  return options.filter(
+    (option) => getOptionLabel(option).toLowerCase().includes(inputValue.toLowerCase())
+  );
+}
+var buildOptionTestId = (prefix, value) => `${prefix}-${value.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "")}`;
+
+// src/components/Combobox/Option.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+var Option = ({
+  option,
+  isHighlighted,
+  onOptionSelect,
+  optionComponent: OptionComponent,
+  optionTestIdPrefix,
+  id
+}) => {
+  const optionRef = useRef3(null);
+  const optionValue = getOptionValue(option) || "";
+  const testId = buildOptionTestId(
+    optionTestIdPrefix || "combobox-option",
+    optionValue
+  );
+  useEffect4(() => {
+    if (isHighlighted && optionRef.current && optionRef.current.scrollIntoView) {
+      optionRef.current.scrollIntoView({ block: "nearest" });
+    }
+  }, [isHighlighted]);
+  return /* @__PURE__ */ jsx12(
+    "li",
+    {
+      ref: optionRef,
+      role: "option",
+      "data-testid": testId,
+      id,
+      "aria-selected": isHighlighted,
+      onMouseDown: () => onOptionSelect(option),
+      className: classNames12("mobius-combobox__option", "has-pii", {
+        "mobius-combobox__option--is-highlighted": isHighlighted
+      }),
+      children: OptionComponent ? /* @__PURE__ */ jsx12(OptionComponent, { option, isHighlighted }) : getOptionLabel(option)
+    },
+    getOptionValue(option)
+  );
+};
+
+// src/components/Combobox/Listbox.tsx
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+var getOptionKey = (option, index, groupIndex) => {
+  let key;
+  if (typeof option === "object" && option.id) key = option.id;
+  else if (typeof option === "object") key = `${option.value}::${option.label}`;
+  else if (typeof option === "string") key = option;
+  else key = String(index);
+  return groupIndex !== void 0 ? `${groupIndex}:${key}` : key;
+};
+var Listbox = ({
+  id,
+  isOpen = false,
+  options,
+  highlightedIndex,
+  highlightedGroupIndex,
+  onOptionSelect,
+  optionComponent,
+  optionTestIdPrefix
+}) => {
+  const classes = classNames13("mobius-combobox__list", {
+    "mobius-combobox__list--hidden": !isOpen
+  });
+  function getOptionId(option, groupIndex, index) {
+    if (typeof option === "object" && "id" in option && typeof option.id === "string") {
+      return option.id;
+    }
+    return isOptionGroup(options) ? `${id}-option-${groupIndex}-${index}` : `${id}-option-${index}`;
+  }
+  if (!isOpen) {
+    return /* @__PURE__ */ jsx13("div", { role: "listbox", id, className: classes });
+  }
+  if (options && options.length === 0) {
+    return /* @__PURE__ */ jsx13("div", { role: "listbox", id, className: classes, children: /* @__PURE__ */ jsx13("div", { className: "mobius-combobox__no-options", children: "No options" }) });
+  }
+  return /* @__PURE__ */ jsx13("div", { role: "listbox", id, className: classes, children: isOptionGroup(options) ? options.map((option, groupIndex) => /* @__PURE__ */ jsxs7(
+    "ul",
+    {
+      role: "group",
+      "aria-labelledby": `${id}-group-${groupIndex}`,
+      className: "mobius-combobox__group",
+      children: [
+        /* @__PURE__ */ jsx13(
+          "li",
+          {
+            role: "presentation",
+            id: `${id}-group-${groupIndex}`,
+            className: "mobius-combobox__group-label",
+            children: option.heading
+          }
+        ),
+        option.options.map((groupOption, index) => /* @__PURE__ */ jsx13(
+          Option,
+          {
+            option: groupOption,
+            isHighlighted: highlightedIndex === index && highlightedGroupIndex === groupIndex,
+            onOptionSelect,
+            optionComponent,
+            optionTestIdPrefix,
+            id: getOptionId(groupOption, groupIndex, index)
+          },
+          getOptionKey(groupOption, index, groupIndex)
+        ))
+      ]
+    },
+    option.heading
+  )) : typeof options !== "undefined" ? options.map((option, index) => /* @__PURE__ */ jsx13(
+    Option,
+    {
+      option,
+      isHighlighted: highlightedIndex === index,
+      onOptionSelect,
+      optionComponent,
+      optionTestIdPrefix,
+      id: getOptionId(option, 0, index)
+    },
+    getOptionKey(option, index)
+  )) : null });
+};
+
+// src/components/Combobox/useComboboxHighlight.tsx
+import { useState as useState6 } from "react";
+function useComboboxHighlight(options) {
+  const [highlightedIndex, setHighlightedIndex] = useState6(
+    options && options.length ? 0 : -1
+  );
+  const [highlightedGroupIndex, setHighlightedGroupIndex] = useState6(0);
+  function highlightNextOption() {
+    const isGroup = isOptionGroup(options);
+    if (!options) {
+      return;
+    }
+    if (isGroup) {
+      const group = options[highlightedGroupIndex];
+      if (highlightedIndex === group.options.length - 1) {
+        if (highlightedGroupIndex === options.length - 1) {
+          return;
+        }
+        setHighlightedIndex(0);
+        setHighlightedGroupIndex(highlightedGroupIndex + 1);
+      } else {
+        setHighlightedIndex(highlightedIndex + 1);
+      }
+    } else {
+      if (highlightedIndex === options.length - 1) {
+        return;
+      }
+      setHighlightedIndex(highlightedIndex + 1);
+    }
+  }
+  function highlightPreviousOption() {
+    const isGroup = isOptionGroup(options);
+    if (highlightedIndex === 0 && highlightedGroupIndex === 0) {
+      return;
+    }
+    if (isGroup) {
+      if (highlightedIndex === 0) {
+        const prevGroupIndex = highlightedGroupIndex - 1;
+        const prevGroup = options[prevGroupIndex];
+        setHighlightedGroupIndex(prevGroupIndex);
+        setHighlightedIndex(prevGroup.options.length - 1);
+      } else {
+        setHighlightedIndex(highlightedIndex - 1);
+      }
+    } else {
+      setHighlightedIndex(highlightedIndex - 1);
+    }
+  }
+  function highlightFirstOption() {
+    setHighlightedIndex(0);
+    setHighlightedGroupIndex(0);
+  }
+  function highlightLastOption() {
+    const isGroup = isOptionGroup(options);
+    if (!options) {
+      return;
+    }
+    if (isGroup) {
+      const lastGroupIndex = options.length - 1;
+      const lastGroup = options[lastGroupIndex];
+      setHighlightedGroupIndex(lastGroupIndex);
+      setHighlightedIndex(lastGroup.options.length - 1);
+    } else {
+      setHighlightedIndex(options.length - 1);
+    }
+  }
+  const clearHighlight = () => {
+    setHighlightedIndex(
+      typeof options === "undefined" || options.length ? 0 : -1
+    );
+    setHighlightedGroupIndex(0);
+  };
+  return {
+    highlightedIndex,
+    highlightedGroupIndex,
+    highlightPreviousOption,
+    highlightNextOption,
+    highlightFirstOption,
+    highlightLastOption,
+    clearHighlight
+  };
+}
+
+// src/components/Combobox/useComboboxOptions.ts
+import { useEffect as useEffect5, useState as useState7 } from "react";
+import { useDebouncedValue as useDebouncedValue2 } from "@simplybusiness/mobius-hooks";
+function useComboboxOptions({
+  options,
+  asyncOptions,
+  delay = 300,
+  minSearchLength = 3,
+  inputValue = "",
+  skipNextDebounceRef,
+  onSearched
+}) {
+  const [filteredOptions, setFilteredOptions] = useState7(void 0);
+  const debouncedInputValue = useDebouncedValue2(
+    inputValue,
+    // Don't debounce synchronous options
+    options ? 0 : delay
+  );
+  const [isLoading, setIsLoading] = useState7(false);
+  const [error3, setError] = useState7(null);
+  useEffect5(() => {
+    const controller = new AbortController();
+    const { signal } = controller;
+    const fetchOptions = async () => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        if (asyncOptions) {
+          if (debouncedInputValue.length < minSearchLength) {
+            setFilteredOptions(void 0);
+            return;
+          }
+          const result = await asyncOptions(debouncedInputValue, { signal });
+          setFilteredOptions(result);
+          onSearched?.(debouncedInputValue);
+        } else if (options) {
+          setFilteredOptions(filterOptions(options, debouncedInputValue));
+        } else {
+          setError(new Error("No options provided"));
+        }
+      } catch (e) {
+        if (e instanceof DOMException && e.name === "AbortError") {
+          return;
+        }
+        setError(e);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    if (!skipNextDebounceRef?.current) {
+      void fetchOptions();
+    } else {
+      skipNextDebounceRef.current = false;
+    }
+    return () => {
+      controller.abort();
+    };
+  }, [
+    debouncedInputValue,
+    options,
+    asyncOptions,
+    delay,
+    minSearchLength,
+    skipNextDebounceRef,
+    onSearched
+  ]);
+  function updateFilteredOptions(newOptions) {
+    setIsLoading(true);
+    return newOptions.then(setFilteredOptions).catch(setError).finally(() => setIsLoading(false));
+  }
+  return {
+    filteredOptions,
+    updateFilteredOptions,
+    isLoading,
+    error: error3,
+    isError: error3 != null
+  };
+}
+
+// src/components/Combobox/Combobox.tsx
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+var ComboboxInner = ({
+  ref,
+  ...props
+}) => {
+  const {
+    id,
+    defaultValue,
+    value,
+    options,
+    asyncOptions,
+    delay,
+    minSearchLength,
+    onSelected,
+    className,
+    placeholder,
+    icon,
+    onBlur,
+    onFocus,
+    onChange,
+    // onSearched, // unused prop, consider removing
+    optionComponent,
+    optionTestIdPrefix,
+    errorMessage,
+    ...otherProps
+  } = props;
+  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,
+    inputValue,
+    delay,
+    minSearchLength,
+    skipNextDebounceRef
+  });
+  const [validationError, setValidationError] = useState8(
+    error3?.message || errorMessage
+  );
+  const {
+    highlightedIndex,
+    highlightedGroupIndex,
+    highlightNextOption,
+    highlightPreviousOption,
+    highlightFirstOption,
+    highlightLastOption,
+    clearHighlight
+  } = useComboboxHighlight(filteredOptions);
+  const inputRef = ref || fallbackRef;
+  const listboxId = useId4();
+  const statusId = useId4();
+  const blurTimeoutRef = useRef4(null);
+  const userInteractedRef = useRef4(false);
+  const justSelectedRef = useRef4(false);
+  const { down } = useBreakpoint();
+  const isMobile = down("md");
+  useEffect6(() => {
+    setValidationError(error3?.message || errorMessage);
+  }, [error3, errorMessage]);
+  const getEmptyValue = () => {
+    const firstOption = filteredOptions ? isOptionGroup(filteredOptions) ? filteredOptions[0]?.options[0] : filteredOptions[0] : options ? isOptionGroup(options) ? options[0]?.options[0] : options[0] : void 0;
+    if (typeof firstOption === "string") {
+      return "";
+    }
+    return { label: "", value: "" };
+  };
+  const handleFocus = (e) => {
+    onFocus?.(e);
+    if (!filteredOptions || filteredOptions.length === 0) return;
+    if (blurTimeoutRef.current) {
+      clearTimeout(blurTimeoutRef.current);
+      blurTimeoutRef.current = null;
+    }
+    const isNaturalFocus = userInteractedRef.current || e.relatedTarget !== null;
+    if (userInteractedRef.current) {
+      userInteractedRef.current = false;
+    }
+    if (justSelectedRef.current && !isNaturalFocus) {
+      return;
+    }
+    if (isNaturalFocus) {
+      setIsOpen(true);
+      justSelectedRef.current = false;
+    }
+  };
+  useEffect6(() => {
+    if (!inputRef || typeof inputRef === "function") return;
+    const inputElement = inputRef.current;
+    if (!inputElement) return;
+    const handleMouseDown = () => {
+      userInteractedRef.current = true;
+    };
+    inputElement.addEventListener("mousedown", handleMouseDown);
+    return () => {
+      inputElement.removeEventListener("mousedown", handleMouseDown);
+    };
+  }, [inputRef]);
+  useOnUnmount(() => {
+    if (blurTimeoutRef.current) {
+      clearTimeout(blurTimeoutRef.current);
+    }
+  });
+  const handleInputChange = (e) => {
+    const newValue = e.target.value;
+    setInputValue(newValue);
+    setValidationError(void 0);
+    justSelectedRef.current = false;
+    setIsChanging(true);
+    if (!asyncOptions) {
+      setIsOpen(true);
+    }
+    clearHighlight();
+    onChange?.(e);
+  };
+  const handleOptionSelect = (option) => {
+    const val = getOptionValue(option);
+    if (!val && val !== "") return;
+    if (typeof option === "object" && "callback" in option && option.callback && typeof option.callback === "function") {
+      justSelectedRef.current = true;
+      setTimeout(() => {
+        if (inputRef && typeof inputRef !== "function" && inputRef.current) {
+          inputRef.current.focus();
+        }
+      }, 0);
+      const callbackPromise = option.callback();
+      updateFilteredOptions(callbackPromise);
+      callbackPromise.then(() => {
+        setIsOpen(true);
+        setIsChanging(true);
+      }).catch(() => {
+      });
+      return;
+    }
+    skipNextDebounceRef.current = true;
+    justSelectedRef.current = true;
+    setIsChanging(false);
+    setValidationError(void 0);
+    setIsOpen(false);
+    setInputValue(val);
+    onSelected?.(option);
+  };
+  const getFirstOption = () => {
+    if (!filteredOptions) return void 0;
+    if (isOptionGroup(filteredOptions)) {
+      return filteredOptions[0]?.options[0];
+    }
+    return filteredOptions[0];
+  };
+  const getHighlightedOption = () => {
+    if (!filteredOptions) return void 0;
+    if (highlightedIndex === -1) return void 0;
+    if (isOptionGroup(filteredOptions)) {
+      const group = filteredOptions[highlightedGroupIndex];
+      return group?.options[highlightedIndex];
+    }
+    return filteredOptions[highlightedIndex];
+  };
+  const getHighlightedOptionId = () => {
+    const option = getHighlightedOption();
+    if (!option) return void 0;
+    if (isOptionGroup(filteredOptions)) {
+      return `${listboxId}-option-${highlightedGroupIndex}-${highlightedIndex}`;
+    }
+    return `${listboxId}-option-${highlightedIndex}`;
+  };
+  const handleBlur = (e) => {
+    if (!justSelectedRef.current) {
+      const typedText = inputValue.trim();
+      const typedTextLower = typedText.toLowerCase();
+      const highlightedOption = getHighlightedOption();
+      const label = getOptionLabel(highlightedOption);
+      if (typedTextLower === label?.toLowerCase()) {
+        setTimeout(() => {
+          handleOptionSelect(highlightedOption);
+        }, 0);
+      } else if (typedText === "") {
+        setTimeout(() => {
+          handleOptionSelect(getEmptyValue());
+        }, 0);
+      } else {
+        setValidationError(
+          errorMessage || "Please select an option from the list"
+        );
+        setTimeout(() => {
+          setInputValue("");
+        }, 0);
+      }
+    }
+    blurTimeoutRef.current = setTimeout(() => {
+      onBlur?.(e);
+      setIsOpen(false);
+      setIsChanging(false);
+    }, 150);
+  };
+  const handleKeyDown = (e) => {
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        justSelectedRef.current = false;
+        setIsOpen(true);
+        highlightNextOption();
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        justSelectedRef.current = false;
+        setIsOpen(true);
+        highlightPreviousOption();
+        break;
+      case "Home":
+        e.preventDefault();
+        justSelectedRef.current = false;
+        setIsOpen(true);
+        highlightFirstOption();
+        break;
+      case "End":
+        e.preventDefault();
+        justSelectedRef.current = false;
+        setIsOpen(true);
+        highlightLastOption();
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (isOpen) {
+          const selectedOption = getHighlightedOption() || getFirstOption();
+          if (selectedOption) {
+            handleOptionSelect(selectedOption);
+          }
+        }
+        break;
+      case "Escape":
+        e.preventDefault();
+        setInputValue("");
+        setIsOpen(false);
+        clearHighlight();
+        break;
+      default:
+    }
+  };
+  useEffect6(() => {
+    if (value) {
+      setInputValue(value);
+    }
+  }, [value]);
+  useEffect6(() => {
+    if (asyncOptions && isChanging) {
+      setIsOpen(!!filteredOptions && filteredOptions.length > 0);
+    }
+  }, [filteredOptions, asyncOptions, isChanging]);
+  const classes = classNames14(
+    "mobius mobius-combobox",
+    {
+      "mobius-combobox--is-expanded": isOpen,
+      "mobius-combobox--is-loading": isLoading,
+      "mobius-combobox--is-mobile": isMobile
+    },
+    className
+  );
+  const getStatusMessage = () => {
+    if (isLoading) return "Loading options";
+    if (!filteredOptions || filteredOptions.length === 0) {
+      return isChanging ? "No options found" : "";
+    }
+    const count = isOptionGroup(filteredOptions) ? filteredOptions.reduce((sum, group) => sum + group.options.length, 0) : filteredOptions.length;
+    return isOpen && isChanging ? `${count} option${count === 1 ? "" : "s"} available` : "";
+  };
+  return /* @__PURE__ */ jsxs8("div", { id, "data-testid": "mobius-combobox__wrapper", className: classes, children: [
+    /* @__PURE__ */ jsx14(
+      VisuallyHidden,
+      {
+        role: "status",
+        "aria-live": "polite",
+        id: statusId,
+        elementType: "div",
+        className: "mobius-combobox__status",
+        children: getStatusMessage()
+      }
+    ),
+    /* @__PURE__ */ jsx14(
+      TextField,
+      {
+        ...otherProps,
+        className: "mobius-combobox__input",
+        role: "combobox",
+        value: inputValue,
+        placeholder,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onKeyDown: handleKeyDown,
+        onChange: handleInputChange,
+        autoComplete: "off",
+        "aria-describedby": isLoading ? statusId : void 0,
+        "aria-autocomplete": "list",
+        "aria-haspopup": "listbox",
+        "aria-owns": listboxId,
+        "aria-controls": listboxId,
+        "aria-expanded": isOpen,
+        "aria-activedescendant": highlightedIndex === -1 ? void 0 : getHighlightedOptionId(),
+        prefixInside: icon,
+        ref: inputRef,
+        errorMessage: errorMessage || validationError || error3?.message
+      }
+    ),
+    /* @__PURE__ */ jsx14(
+      Listbox,
+      {
+        id: listboxId,
+        isOpen,
+        isLoading,
+        options: filteredOptions,
+        highlightedIndex,
+        highlightedGroupIndex,
+        onOptionSelect: handleOptionSelect,
+        optionComponent,
+        optionTestIdPrefix
+      }
+    )
+  ] });
+};
+var Combobox = ComboboxInner;
+
+// src/components/AddressLookup/utils.ts
+function isLoqateErrorResponse(response) {
+  return Array.isArray(response) && response.some((item) => "Error" in item);
+}
+
+// src/components/AddressLookup/AddressLookup.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+function optionsFromResponse({ Items }, addressLookupService) {
+  if (!Items || !Array.isArray(Items)) {
+    throw Error("No address found");
+  }
+  if (isLoqateErrorResponse(Items)) {
+    throw Error(Items[0].Description);
+  }
+  return Items.map((item) => ({
+    id: item.Id,
+    label: `${item.Text}, ${item.Description}`,
+    value: item.Text,
+    // Add a callback to trigger secondary search
+    // if the address type is not "Address"
+    callback: item.Type === "Address" ? void 0 : async () => {
+      const result = await addressLookupService.findById(item.Id);
+      return optionsFromResponse(result, addressLookupService);
+    }
+  }));
+}
+var AddressLookup = ({
+  ref,
+  addressLookupService,
+  onAddressSelected,
+  onOptionsDisplayed,
+  onError,
+  errorMessage,
+  ...otherProps
+}) => {
+  const [error3, _setError] = useState9(null);
+  const setError = useCallback4(
+    (newError) => {
+      if (newError != null) onError?.(newError);
+      _setError(newError);
+    },
+    [onError]
+  );
+  const asyncOptions = useCallback4(
+    async (searchTerm) => {
+      try {
+        const response = await addressLookupService.search(searchTerm);
+        setError(null);
+        const options = optionsFromResponse(response, addressLookupService);
+        onOptionsDisplayed?.();
+        return options;
+      } catch (e) {
+        setError(e);
+        return [];
+      }
+    },
+    [addressLookupService, setError, onOptionsDisplayed]
+  );
+  const handleSelected = (selected) => {
+    setError(null);
+    if (typeof selected === "string" || !selected.id) {
+      setError(new Error("Selected option missing id"));
+      return Promise.resolve();
+    }
+    return addressLookupService.get(selected.id).then(onAddressSelected).catch(setError);
+  };
+  const realErrorMessage = error3 && "An error occurred" || errorMessage;
+  return /* @__PURE__ */ jsx15(
+    Combobox,
+    {
+      ...otherProps,
+      ref,
+      onSelected: handleSelected,
+      asyncOptions,
+      errorMessage: realErrorMessage,
+      icon: /* @__PURE__ */ jsx15(Icon, { icon: search })
+    }
+  );
+};
+AddressLookup.displayName = "AddressLookup";
+
+// src/components/AddressLookup/LoqateAddressLookupError.tsx
+var LoqateAddressLookupError = class extends Error {
+  constructor(response) {
+    super(response.Description);
+    this.name = "LoqateAddressLookupError";
+    this.response = response;
+  }
+};
+
+// src/components/AddressLookup/LoqateAddressLookupService.tsx
+var LOQATE_BASE_URL = "https://api.addressy.com/Capture/Interactive";
+var LOQATE_FIND_URL = "/Find/v1.00/json3.ws";
+var LOQATE_RETRIEVE_URL = "/Retrieve/v1.2/json3.ws";
+var DEFAULT_COUNTRIES = ["GB"];
+var _baseUrl, _apiKey, _countries, _filters;
+var LoqateAddressLookupService = class {
+  constructor({
+    baseUrl,
+    apiKey,
+    countries,
+    filters
+  }) {
+    /**
+     * Base URL for the Loqate API
+     */
+    __privateAdd(this, _baseUrl);
+    /**
+     * API key for the Loqate API
+     */
+    __privateAdd(this, _apiKey);
+    /**
+     * List of allowed country codes for the Loqate API
+     * 2 or 3 character ISO country codes
+     */
+    __privateAdd(this, _countries);
+    /**
+     * Optional filters for the Loqate API
+     * E.g., { AdministrativeArea: "CA", PostalCode: "90210" }
+     */
+    __privateAdd(this, _filters);
+    __privateSet(this, _apiKey, apiKey);
+    __privateSet(this, _baseUrl, baseUrl || LOQATE_BASE_URL);
+    __privateSet(this, _countries, countries || DEFAULT_COUNTRIES);
+    __privateSet(this, _filters, filters);
+  }
+  fetchFromApi(url) {
+    return fetch(`${__privateGet(this, _baseUrl)}${url}`).then((response) => response.json()).then((json) => {
+      if (json.Items?.some((item) => item.Error)) {
+        throw new LoqateAddressLookupError(json);
+      }
+      return json;
+    });
+  }
+  /**
+   * Builds the Filters query parameter for Loqate API requests.
+   * - Filter keys (e.g., "AdministrativeArea", "PostalCode") are predefined by Loqate API (no need to encode)
+   * - Filter values (e.g., "New York", "90210") contain user input that may have special characters (need encoding)
+   *
+   * @returns Empty string if no filters, otherwise "&Filters=key1:value1&key2:value2" (Loqate's expected format for Filters)
+   */
+  buildFiltersQuery() {
+    if (!__privateGet(this, _filters) || Object.keys(__privateGet(this, _filters)).length === 0) {
+      return "";
+    }
+    const encodedFilters = Object.entries(__privateGet(this, _filters)).map(([key, value]) => `${key}:${encodeURIComponent(value)}`).join("&");
+    return `&Filters=${encodedFilters}`;
+  }
+  search(searchTerm) {
+    let url = `${LOQATE_FIND_URL}?Key=${__privateGet(this, _apiKey)}&Text=${searchTerm}&Countries=${__privateGet(this, _countries)?.join(",")}`;
+    url += this.buildFiltersQuery();
+    return this.fetchFromApi(url);
+  }
+  findById(id) {
+    let url = `${LOQATE_FIND_URL}?Key=${__privateGet(this, _apiKey)}&Container=${id}&Countries=${__privateGet(this, _countries)?.join(",")}`;
+    url += this.buildFiltersQuery();
+    return this.fetchFromApi(url);
+  }
+  async get(id) {
+    const url = `${LOQATE_RETRIEVE_URL}?Key=${__privateGet(this, _apiKey)}&Id=${id}`;
+    const response = await this.fetchFromApi(url);
+    return response.Items[0];
+  }
+};
+_baseUrl = new WeakMap();
+_apiKey = new WeakMap();
+_countries = new WeakMap();
+_filters = new WeakMap();
+
+// src/components/Alert/Alert.tsx
+import { circleInfo, circleTick, error as error2, warning } from "@simplybusiness/icons";
+import classNames15 from "classnames/dedupe";
+import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+function isAlertVariant(value) {
+  return value === "info" || value === "success" || value === "warning" || value === "error";
+}
+var Alert = ({ ref, ...props }) => {
+  const {
+    elementType: Element = "div",
+    variant: variantProp,
+    show = true,
+    header,
+    children,
+    ...otherProps
+  } = props;
+  if (!show) return null;
+  const variant = variantProp && isAlertVariant(variantProp) ? variantProp : "info";
+  const colorValue = variant === "success" ? `var(--color-valid)` : `var(--color-${variant})`;
+  const classes = classNames15(
+    "mobius",
+    "mobius-alert",
+    {
+      "--info": variant === "info",
+      "--success": variant === "success",
+      "--warning": variant === "warning",
+      "--error": variant === "error",
+      "--has-header": header
+    },
+    otherProps.className
+  );
+  const icon = {
+    info: circleInfo,
+    success: circleTick,
+    warning,
+    error: error2
+  };
+  const headerClasses = classNames15("mobius", "mobius-alert__header");
+  const iconClasses = classNames15("mobius", "mobius-alert__icon");
+  const contentClasses = classNames15("mobius", "mobius-alert__content");
+  return /* @__PURE__ */ jsxs9(Element, { ref, role: "alert", ...otherProps, className: classes, children: [
+    /* @__PURE__ */ jsx16("span", { className: iconClasses, children: /* @__PURE__ */ jsx16(Icon, { icon: icon[variant], color: colorValue }) }),
+    /* @__PURE__ */ jsxs9("div", { children: [
+      header && /* @__PURE__ */ jsx16("p", { className: headerClasses, children: header }),
+      /* @__PURE__ */ jsx16("div", { className: contentClasses, children })
+    ] })
+  ] });
+};
+Alert.displayName = "Alert";
+
+// src/components/Box/Box.tsx
+import classNames16 from "classnames/dedupe";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var Box = ({ ref, ...props }) => {
+  const {
+    elementType: Element = "div",
+    padding,
+    paddingX,
+    paddingInline,
+    paddingInlineStart,
+    paddingInlineEnd,
+    paddingY,
+    paddingBlock,
+    paddingBlockStart,
+    paddingBlockEnd,
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft,
+    minWidth,
+    minHeight,
+    maxWidth,
+    maxHeight,
+    width,
+    height,
+    style,
+    ...otherProps
+  } = props;
+  const classes = classNames16("mobius", "mobius-box", otherProps.className);
+  const styleProps = filterUndefinedProps({
+    padding: getSpacingValue(padding),
+    paddingInline: getSpacingValue(paddingInline || paddingX),
+    paddingBlock: getSpacingValue(paddingBlock || paddingY),
+    paddingTop: getSpacingValue(paddingTop || paddingBlockStart),
+    paddingRight: getSpacingValue(paddingRight || paddingInlineEnd),
+    paddingBottom: getSpacingValue(paddingBottom || paddingBlockEnd),
+    paddingLeft: getSpacingValue(paddingLeft || paddingInlineStart),
+    minWidth,
+    minHeight,
+    maxWidth,
+    maxHeight,
+    width,
+    height,
+    ...style
+  });
+  return /* @__PURE__ */ jsx17(Element, { ref, style: styleProps, ...otherProps, className: classes });
+};
+Box.displayName = "Box";
+
+// src/components/Breadcrumbs/Breadcrumbs.tsx
+import { Children, cloneElement as cloneElement2 } from "react";
+import classNames17 from "classnames/dedupe";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var Breadcrumbs = ({ ref, ...props }) => {
+  const { "aria-label": ariaLabel = "Breadcrumbs" } = props;
+  const { navProps } = { navProps: { "aria-label": ariaLabel } };
+  const { children, ...otherProps } = props;
+  const childArray = Children.toArray(children);
+  const classes = classNames17(
+    "mobius",
+    "mobius-breadcrumb",
+    otherProps.className
+  );
+  return /* @__PURE__ */ jsx18("nav", { ref, ...otherProps, ...navProps, className: classes, children: /* @__PURE__ */ jsx18("ul", { children: childArray.map(
+    (child, i) => cloneElement2(
+      child,
+      {
+        key: i,
+        isCurrent: i === childArray.length - 1
+      }
+    )
+  ) }) });
+};
+Breadcrumbs.displayName = "Breadcrumbs";
+
+// src/components/Breadcrumbs/BreadcrumbItem.tsx
+import { cloneElement as cloneElement3, Children as Children2 } from "react";
+import classNames18 from "classnames/dedupe";
+import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
+var BreadcrumbItem = ({ ref, ...props }) => {
+  const {
+    isDisabled = false,
+    isCurrent = false,
+    "aria-current": ariaCurrent = "page",
+    children,
+    separator = /* @__PURE__ */ jsx19(Box, { className: "mobius-breadcrumb__separator", "aria-hidden": "true", children: ">" }),
+    ...otherProps
+  } = props;
+  const { itemProps } = {
+    itemProps: {
+      "aria-current": isCurrent ? ariaCurrent : void 0,
+      "aria-disabled": isDisabled || isCurrent,
+      ...otherProps
+    }
+  };
+  const classes = classNames18(
+    "mobius",
+    "mobius-breadcrumb__item",
+    props.className
+  );
+  const child = typeof children === "string" ? /* @__PURE__ */ jsx19("span", { ...itemProps, children }) : Children2.only(children);
+  return /* @__PURE__ */ jsxs10("li", { className: classes, children: [
+    cloneElement3(child, {
+      ...child.props,
+      ...itemProps,
+      ref
+    }),
+    !props.isCurrent && separator
+  ] });
+};
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+// src/components/Button/Button.tsx
+import classNames19 from "classnames/dedupe";
+
+// src/components/Button/Loading.tsx
+import { loading } from "@simplybusiness/icons";
+import { Fragment as Fragment2, jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
+var Loading = (props) => {
+  const { children } = props;
+  return /* @__PURE__ */ jsxs11(Fragment2, { children: [
+    /* @__PURE__ */ jsx20("div", { className: "mobius-button__icon-wrapper", children: /* @__PURE__ */ jsx20(Icon, { icon: loading, spin: true, size: "md" }) }),
+    /* @__PURE__ */ jsx20(VisuallyHidden, { className: "mobius-button__loading-text", children: "Loading" }),
+    children
+  ] });
+};
+
+// src/components/Button/Success.tsx
+import { tick } from "@simplybusiness/icons";
+import { Fragment as Fragment3, jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
+var Success = () => /* @__PURE__ */ jsxs12(Fragment3, { children: [
+  /* @__PURE__ */ jsx21("div", { className: "mobius-button__icon-wrapper", children: /* @__PURE__ */ jsx21(Icon, { icon: tick, size: "md" }) }),
+  /* @__PURE__ */ jsx21(VisuallyHidden, { className: "mobius-button__success-text", children: "Success" })
+] });
+
+// src/components/Button/Button.tsx
+import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
+var Button = ({ ref, ...props }) => {
+  const {
+    children,
+    elementType: Component = "button",
+    isDisabled,
+    isLoading,
+    isSuccess,
+    variant = "primary",
+    size = "md",
+    onPress,
+    onClick,
+    ...otherProps
+  } = props;
+  const { buttonProps } = useButton(props);
+  otherProps.className = classNames19(
+    "mobius",
+    "mobius-button",
+    `--variant-${variant}`,
+    `--size-${size}`,
+    {
+      "--is-disabled": isDisabled,
+      "--is-loading": isLoading,
+      "--is-success": isSuccess && !isLoading
+    },
+    otherProps.className
+  );
+  return /* @__PURE__ */ jsxs13(Component, { ref, ...buttonProps, ...otherProps, children: [
+    isLoading ? /* @__PURE__ */ jsx22(Loading, { children }) : children,
+    isSuccess && !isLoading && /* @__PURE__ */ jsx22(Success, {})
+  ] });
+};
+Button.displayName = "Button";
+
+// src/components/Checkbox/Checkbox.tsx
+import { useRef as useRef5, useId as useId5, useState as useState10, useEffect as useEffect7 } from "react";
+import classNames20 from "classnames/dedupe";
+import { squareTick, square } from "@simplybusiness/icons";
+import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
+var Checkbox = ({ ref, ...props }) => {
+  const {
+    id,
+    label,
+    isDisabled,
+    isRequired,
+    isInvalid,
+    onChange,
+    className,
+    errorMessage,
+    selected,
+    defaultSelected = false,
+    isReadOnly,
+    isLastItem,
+    name,
+    value,
+    ["aria-describedby"]: ariaDescribedBy,
+    ...rest
+  } = props;
+  const [checked, setChecked] = useState10(defaultSelected);
+  const fallbackRef = useRef5(null);
+  const refObj = ref || fallbackRef;
+  const inputId = useId5();
+  const isControlled = typeof selected === "boolean";
+  useEffect7(() => {
+    if (isControlled) {
+      setChecked(selected);
+    }
+  }, [selected, isControlled]);
+  const validationClasses = useValidationClasses({ isInvalid });
+  const sharedClasses = classNames20(
+    {
+      "--is-disabled": isDisabled,
+      "--is-selected": checked,
+      "--is-required": typeof isRequired === "boolean" && isRequired,
+      "--is-optional": typeof isRequired === "boolean" && !isRequired
+    },
+    validationClasses
+  );
+  const wrapperClasses = classNames20(
+    "mobius",
+    "mobius-checkbox",
+    sharedClasses,
+    className
+  );
+  const labelClasses = classNames20("mobius-checkbox__label", sharedClasses);
+  const inputClasses = classNames20("mobius-checkbox__input", sharedClasses);
+  const iconClasses = classNames20("mobius-checkbox__icon", sharedClasses);
+  const errorMessageId = useId5();
+  const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
+  const describedBy = spaceDelimitedList([
+    shouldErrorMessageShow,
+    ariaDescribedBy
+  ]);
+  const labelId = useId5();
+  const handleChange = (event) => {
+    setChecked(!checked);
+    if (onChange) {
+      onChange(event, isLastItem);
+    }
+  };
+  return /* @__PURE__ */ jsxs14(Stack, { gap: "xs", className: wrapperClasses, children: [
+    /* @__PURE__ */ jsxs14("label", { className: labelClasses, children: [
+      /* @__PURE__ */ jsx23(
+        "input",
+        {
+          "aria-describedby": describedBy,
+          "aria-errormessage": shouldErrorMessageShow,
+          "aria-invalid": isInvalid,
+          "aria-labelledby": labelId,
+          readOnly: isReadOnly,
+          disabled: isDisabled,
+          ref: refObj,
+          className: inputClasses,
+          onChange: handleChange,
+          type: "checkbox",
+          checked,
+          required: isRequired,
+          id: id || inputId,
+          name,
+          value,
+          ...rest
+        }
+      ),
+      /* @__PURE__ */ jsx23(
+        Icon,
+        {
+          icon: checked ? squareTick : square,
+          size: "md",
+          className: iconClasses
+        }
+      ),
+      /* @__PURE__ */ jsx23("span", { id: labelId, className: "mobius-checkbox__visible-label", children: label })
+    ] }),
+    /* @__PURE__ */ jsx23(ErrorMessage, { id: errorMessageId, errorMessage })
+  ] });
+};
+Checkbox.displayName = "Checkbox";
+
+// src/components/Checkbox/CheckboxGroup.tsx
+import classNames21 from "classnames/dedupe";
+import {
+  Children as Children3,
+  cloneElement as cloneElement4,
+  isValidElement,
+  useEffect as useEffect8,
+  useId as useId6,
+  useRef as useRef6,
+  useState as useState11
+} from "react";
+import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
+var CheckboxGroup = ({ ref, ...props }) => {
+  const {
+    label,
+    isDisabled = false,
+    isRequired,
+    isInvalid,
+    orientation = "vertical",
+    onChange,
+    className,
+    errorMessage,
+    children,
+    defaultValue = [],
+    isReadOnly,
+    itemsPerRow,
+    lastItemDisables = false,
+    ...rest
+  } = props;
+  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]
+    );
+    if (hasChanged || !isInitializedRef.current) {
+      setSelected(defaultValue);
+      prevDefaultValueRef.current = defaultValue;
+      isInitializedRef.current = true;
+    }
+  }, [defaultValue]);
+  const checkboxGroupClasses = classNames21(
+    "mobius",
+    "mobius-checkbox-group",
+    className,
+    {
+      "--is-horizontal": orientation === "horizontal",
+      "--is-vertical": orientation === "vertical",
+      "--is-required": typeof isRequired === "boolean" && isRequired,
+      "--is-optional": typeof isRequired === "boolean" && !isRequired
+    }
+  );
+  const validationClasses = useValidationClasses({ isInvalid });
+  const labelClasses = classNames21(
+    {
+      "--is-disabled": isDisabled
+    },
+    validationClasses
+  );
+  const errorMessageId = useId6();
+  const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
+  const describedBy = spaceDelimitedList([
+    shouldErrorMessageShow,
+    props["aria-describedby"]
+  ]);
+  const labelId = useId6();
+  const handleChange = (event, isLastItem = false) => {
+    const {
+      target: { value, checked }
+    } = event;
+    let newValue = [...selected];
+    if (!checked) {
+      newValue = selected.filter((item) => item !== value);
+    }
+    if (checked) {
+      newValue = [...selected, value];
+    }
+    if (checked && lastItemDisables && isLastItem) {
+      newValue = [value];
+    }
+    setSelected(newValue);
+    onChange?.(newValue);
+  };
+  const childrenArray = Children3.toArray(children);
+  const lastCheckbox = childrenArray.filter(
+    (child) => isValidElement(child) && child.type === Checkbox
+  ).pop();
+  const lastCheckboxIsChecked = lastCheckbox && selected.includes(lastCheckbox.props.value);
+  return /* @__PURE__ */ jsxs15(
+    "div",
+    {
+      ...rest,
+      "aria-labelledby": props["aria-labelledby"] || labelId,
+      ref,
+      className: checkboxGroupClasses,
+      role: "group",
+      style: {
+        "--checkbox-items-per-row": itemsPerRow || Children3.count(children)
+      },
+      children: [
+        label && /* @__PURE__ */ jsx24(Label, { elementType: "span", id: labelId, className: labelClasses, children: label }),
+        /* @__PURE__ */ jsx24("div", { className: "mobius-checkbox-group__wrapper", children: childrenArray.map((child) => {
+          if (isValidElement(child)) {
+            const isLastItem = child === lastCheckbox;
+            const isChildDisabled = isDisabled || lastItemDisables && lastCheckboxIsChecked && !isLastItem;
+            const childProps = child.props;
+            return cloneElement4(
+              child,
+              {
+                isDisabled: isChildDisabled,
+                isRequired,
+                isReadOnly,
+                isInvalid,
+                isLastItem,
+                selected: selected.includes(childProps.value),
+                onChange: childProps.onChange || handleChange,
+                "aria-describedby": describedBy
+              }
+            );
+          }
+          return child;
+        }) }),
+        errorMessage && /* @__PURE__ */ jsx24(ErrorMessage, { id: errorMessageId, errorMessage })
+      ]
+    }
+  );
+};
+CheckboxGroup.displayName = "CheckboxGroup";
+
+// src/components/Container/Container.tsx
+import classNames22 from "classnames/dedupe";
+import { jsx as jsx25 } from "react/jsx-runtime";
+var Container = ({ ref, ...props }) => {
+  const { elementType: Element = "div", size = "md", ...otherProps } = props;
+  const classes = classNames22(
+    "mobius",
+    "mobius-container",
+    sizeClasses(size),
+    otherProps.className
+  );
+  return /* @__PURE__ */ jsx25(Element, { ref, ...otherProps, className: classes });
+};
+Container.displayName = "Container";
+
+// src/components/DateField/DateField.tsx
+import classNames23 from "classnames/dedupe";
+import { useEffect as useEffect9, useRef as useRef7, useState as useState12 } from "react";
+
+// src/components/DateField/validation.ts
+var convertToDateFormat = (date, format) => {
+  const dateParts = date.split(/[-/]/);
+  const formatParts = format ? format.split(/[-/]/) : ["yyyy", "mm", "dd"];
+  const dateObj = {};
+  const formattedDate = [];
+  for (let i = 0; i < formatParts.length; i++) {
+    dateObj[formatParts[i]] = dateParts[i] ? parseInt(dateParts[i], 10) : 0;
+  }
+  formattedDate.push(dateObj["yyyy"]?.toString() || "0000");
+  formattedDate.push(
+    (dateObj["mm"] < 10 ? "0" : "") + (dateObj["mm"]?.toString() || "00")
+  );
+  formattedDate.push(
+    (dateObj["dd"] < 10 ? "0" : "") + (dateObj["dd"]?.toString() || "00")
+  );
+  return formattedDate.join("-");
+};
+var isValidDate = (date, format = "yyyy-mm-dd") => {
+  if (!date) return true;
+  const standardDate = convertToDateFormat(date, format);
+  const [yearStr, monthStr, dayStr] = standardDate.split("-");
+  const year = parseInt(yearStr, 10);
+  const month = parseInt(monthStr, 10);
+  const day = parseInt(dayStr, 10);
+  if (month < 1 || month > 12) {
+    return false;
+  }
+  const daysInMonth = new Date(year, month, 0).getDate();
+  return day > 0 && day <= daysInMonth;
+};
+
+// src/components/DateField/DateField.tsx
+import { jsx as jsx26 } from "react/jsx-runtime";
+var MIN_MAX_ERROR = '"min" value should not be greater than "max" value.';
+var DateField = ({ ref, ...props }) => {
+  const {
+    min,
+    max,
+    format,
+    className,
+    errorMessage,
+    defaultValue,
+    value,
+    ...otherProps
+  } = props;
+  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;
+  const formattedDefaultValue = defaultValue ? convertToDateFormat(defaultValue, format) : void 0;
+  const formattedValue = value ? convertToDateFormat(value, format) : void 0;
+  const setInvalidState = (error4) => {
+    setError(error4);
+    setIsInvalid(true);
+  };
+  const setValidState = () => {
+    setError(props.errorMessage);
+    setIsInvalid(false);
+  };
+  useEffect9(() => {
+    if (!isValidDate(min, format)) {
+      setInvalidState(`Invalid min date: ${min}`);
+      return;
+    }
+    if (!isValidDate(max, format)) {
+      setInvalidState(`Invalid max date: ${max}`);
+      return;
+    }
+    if (min && max) {
+      const minDate = new Date(min);
+      const maxDate = new Date(max);
+      if (minDate > maxDate) {
+        setInvalidState(MIN_MAX_ERROR);
+      } else {
+        setValidState();
+      }
+    } else {
+      setValidState();
+    }
+  }, [min, max, format]);
+  const validate = () => {
+    const isValidInput = localRef.current?.checkValidity();
+    if (!isValidInput) {
+      setInvalidState("Invalid date input");
+    } else {
+      setValidState();
+    }
+  };
+  const handleBlur = (event) => {
+    validate();
+    otherProps.onBlur?.(event);
+  };
+  return /* @__PURE__ */ jsx26(
+    TextField,
+    {
+      ref: mergeRefs([localRef, ref]),
+      className: classes,
+      type: "date",
+      min: formattedMin,
+      max: formattedMax,
+      errorMessage: errorMessage ?? error3,
+      isInvalid,
+      defaultValue: formattedDefaultValue,
+      value: formattedValue,
+      onBlur: handleBlur,
+      ...otherProps
+    }
+  );
+};
+DateField.displayName = "DateField";
+
+// src/components/Drawer/Content.tsx
+import { jsx as jsx27 } from "react/jsx-runtime";
+var Content = ({ ref, children, ...otherProps }) => /* @__PURE__ */ jsx27("div", { ref, ...otherProps, className: "mobius-drawer__content", children });
+Content.displayName = "Content";
+
+// src/components/Drawer/Drawer.tsx
+import classNames24 from "classnames/dedupe";
+import { useEffect as useEffect10, useId as useId7, useMemo as useMemo2, useRef as useRef8, useState as useState13 } from "react";
+
+// src/components/Drawer/DrawerContext.tsx
+import { createContext } from "react";
+var DrawerContext = createContext({
+  onClose: () => {
+  },
+  closeLabel: void 0,
+  headerId: void 0
+});
+
+// src/components/Drawer/Drawer.tsx
+import { jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
+var TRANSITION_CSS_VARIABLE = "--drawer-transition-duration";
+var Drawer = ({ ref, ...props }) => {
+  const {
+    isOpen,
+    className,
+    closeLabel,
+    direction,
+    announce = "Drawer opened on screen",
+    onOpen,
+    onClose,
+    children
+  } = props;
+  const dialogRef = useRef8(null);
+  const [shouldTransition, setShouldTransition] = useState13(false);
+  const { close } = useDialog({
+    ref: dialogRef,
+    isOpen,
+    onOpen,
+    onClose,
+    transition: {
+      isEnabled: true,
+      CSSVariable: TRANSITION_CSS_VARIABLE
+    }
+  });
+  const hiddenId = `dialog-screen-reader-announce-${useId7()}`;
+  const headerId = `dialog-header-${useId7()}`;
+  const dialogClasses = classNames24(
+    "mobius",
+    "mobius-drawer",
+    `--${direction}`,
+    className,
+    {
+      "--should-transition": shouldTransition
+    }
+  );
+  useEffect10(() => {
+    setShouldTransition(supportsDialog());
+  }, []);
+  const contextValue = useMemo2(
+    () => ({
+      onClose: close,
+      closeLabel,
+      headerId
+    }),
+    [close, closeLabel, headerId]
+  );
+  return /* @__PURE__ */ jsxs16(
+    "dialog",
+    {
+      id: useId7(),
+      ref: mergeRefs([dialogRef, ref]),
+      onCancel: close,
+      className: dialogClasses,
+      "aria-describedby": hiddenId,
+      "aria-labelledby": headerId,
+      children: [
+        /* @__PURE__ */ jsx28(VisuallyHidden, { children: /* @__PURE__ */ jsx28("div", { id: hiddenId, children: announce }) }),
+        /* @__PURE__ */ jsx28(DrawerContext.Provider, { value: contextValue, children })
+      ]
+    }
+  );
+};
+Drawer.displayName = "Drawer";
+
+// src/components/Drawer/useDrawer.ts
+import { useContext } from "react";
+var useDrawer = () => {
+  const { onClose, closeLabel, headerId } = useContext(DrawerContext);
+  return { onClose, closeLabel, headerId };
+};
+
+// src/components/Drawer/Header.tsx
+import { cross } from "@simplybusiness/icons";
+import { jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
+var Header = ({ ref, children, ...otherProps }) => {
+  const { onClose, closeLabel, headerId } = useDrawer();
+  return /* @__PURE__ */ jsxs17("header", { ref, ...otherProps, className: "mobius-drawer__header", children: [
+    /* @__PURE__ */ jsx29("h2", { id: headerId, children }),
+    /* @__PURE__ */ jsxs17(
+      Button,
+      {
+        "aria-label": "Close",
+        variant: "basic",
+        onPress: onClose,
+        className: "mobius-drawer__close",
+        size: "sm",
+        children: [
+          /* @__PURE__ */ jsx29(Icon, { icon: cross }),
+          " ",
+          closeLabel
+        ]
+      }
+    )
+  ] });
+};
+Header.displayName = "Header";
+
+// src/components/Drawer/index.tsx
+var Drawer2 = Object.assign(Drawer, {
+  Header,
+  Content
+});
+Drawer2.displayName = "Drawer";
+
+// src/components/DropdownMenu/DropdownMenu.tsx
+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";
+var DropdownMenu = ({ ref, ...props }) => {
+  const {
+    elementType: Element = "nav",
+    trigger,
+    label = "Menu",
+    children,
+    ...otherProps
+  } = props;
+  const [activeId, setActiveId] = useState14(null);
+  const numberOfItems = Children4.count(children);
+  const {
+    buttonProps,
+    itemProps,
+    isOpen: open,
+    setIsOpen
+  } = useDropdownMenu(numberOfItems);
+  const classes = classNames25(
+    "mobius",
+    "mobius-dropdown-menu",
+    otherProps.className
+  );
+  const triggerClasses = classNames25("mobius", "mobius-dropdown-menu__trigger");
+  const listClasses = classNames25("mobius", "mobius-dropdown-menu__list", {
+    "--is-open": open
+  });
+  const handleChildClick = ({ onClick }, index) => {
+    setActiveId(index);
+    setIsOpen(false);
+    if (onClick) {
+      onClick();
+    }
+  };
+  return /* @__PURE__ */ jsxs18(Element, { ref, ...otherProps, className: classes, children: [
+    trigger ? cloneElement5(trigger, {
+      className: triggerClasses,
+      open,
+      label,
+      ...buttonProps
+    }) : /* @__PURE__ */ jsx30(Button, { className: triggerClasses, ...buttonProps, children: label }),
+    /* @__PURE__ */ jsx30("ul", { className: listClasses, role: "menu", children: Children4.map(children, (child, index) => {
+      if (isValidElement2(child)) {
+        return cloneElement5(child, {
+          onClick: () => handleChildClick(child.props, index),
+          active: index === activeId,
+          ...itemProps[index]
+        });
+      }
+      return child;
+    }) })
+  ] });
+};
+DropdownMenu.displayName = "DropdownMenu";
+
+// src/components/DropdownMenu/Item.tsx
+import { cloneElement as cloneElement6, isValidElement as isValidElement3, Children as Children5 } from "react";
+import classNames26 from "classnames/dedupe";
+import { jsx as jsx31 } from "react/jsx-runtime";
+var Item = ({ ref, ...props }) => {
+  const {
+    elementType: Element = "li",
+    active,
+    onClick,
+    children,
+    ...otherProps
+  } = props;
+  const classes = classNames26(
+    "mobius",
+    "mobius-dropdown-menu__item",
+    { "--is-active": active },
+    otherProps.className
+  );
+  return /* @__PURE__ */ jsx31(Element, { ref, onClick, ...otherProps, children: Children5.map(children, (child) => {
+    if (isValidElement3(child)) {
+      const childClasses = classNames26(
+        child.props.className,
+        classes
+      );
+      return cloneElement6(
+        child,
+        {
+          className: childClasses
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx31("span", { className: classes, children: child });
+  }) });
+};
+Item.displayName = "DropdownMenu.Item";
+
+// src/components/DropdownMenu/index.tsx
+var DropdownMenu2 = Object.assign(
+  DropdownMenu,
+  {
+    Item
+  }
+);
+DropdownMenu2.displayName = "DropdownMenu";
+
+// src/components/Fieldset/Fieldset.tsx
+import classNames27 from "classnames/dedupe";
+import { cloneElement as cloneElement7, useId as useId8 } from "react";
+import { jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
+var useFieldset = (props) => {
+  const { legend } = props;
+  let legendProps = {};
+  let containerProps = {
+    role: "group"
+  };
+  const legendId = useId8();
+  if (legend) {
+    legendProps = {
+      ...legendProps,
+      id: legendId
+    };
+    containerProps = {
+      ...containerProps,
+      "aria-labelledby": legendId
+    };
+  }
+  return {
+    legendProps,
+    containerProps
+  };
+};
+var Fieldset = ({ ref: _ref, ...props }) => {
+  const {
+    children,
+    legend,
+    legendComponent = /* @__PURE__ */ jsx32("legend", {}),
+    ...otherProps
+  } = props;
+  const { legendProps, containerProps } = useFieldset(props);
+  const classes = classNames27("mobius", "mobius-fieldset", props.className);
+  legendProps.className = "mobius-fieldset__legend";
+  return /* @__PURE__ */ jsxs19(Flex, { ...containerProps, ...otherProps, className: classes, children: [
+    legend && cloneElement7(legendComponent, { ...legendProps }, [legend]),
+    children
+  ] });
+};
+Fieldset.displayName = "Fieldset";
+
+// src/components/Grid/Grid.tsx
+import classNames28 from "classnames/dedupe";
+import { jsx as jsx33 } from "react/jsx-runtime";
+var Grid = ({ ref: _ref, ...props }) => {
+  const {
+    columns = 12,
+    gap,
+    columnGap,
+    rowGap,
+    alignContent,
+    alignItems,
+    justifyContent,
+    justifyItems,
+    className,
+    style,
+    ...rest
+  } = props;
+  const classes = classNames28("mobius", "mobius-grid", className);
+  const styles = filterUndefinedProps({
+    boxSizing: "border-box",
+    display: "grid",
+    gridTemplateColumns: `repeat(${columns}, 1fr)`,
+    gap: getSpacingValue(gap),
+    columnGap: getSpacingValue(columnGap),
+    rowGap: getSpacingValue(rowGap),
+    alignContent,
+    alignItems,
+    justifyContent,
+    justifyItems,
+    ...style
+  });
+  return /* @__PURE__ */ jsx33("div", { style: styles, className: classes, ...rest });
+};
+Grid.displayName = "Grid";
+
+// src/components/Grid/Item.tsx
+import { useEffect as useEffect11, useState as useState15 } from "react";
+import classNames29 from "classnames/dedupe";
+import { jsx as jsx34 } from "react/jsx-runtime";
+var getBreakpointMap = (config) => Object.entries(config).reduce(
+  (prev, [key, value]) => {
+    const previous = Object.values(prev);
+    const lastDefined = previous[previous.length - 1];
+    return { ...prev, [key]: value || lastDefined };
+  },
+  {}
+);
+var DEFAULT_SPAN = 12;
+var GridItem = ({ ref: _ref, ...props }) => {
+  const {
+    breakpoint: { size: breakpointSize }
+  } = useBreakpoint();
+  const {
+    span,
+    xs = Array.isArray(span) ? DEFAULT_SPAN : span,
+    sm,
+    md,
+    lg,
+    xl,
+    xxl,
+    alignSelf,
+    justifySelf,
+    className,
+    ...rest
+  } = props;
+  const breakpointMap = getBreakpointMap({
+    xs,
+    sm,
+    md,
+    lg,
+    xl,
+    xxl
+  });
+  const [responsiveSpan, setResponsiveSpan] = useState15();
+  const classes = classNames29("mobius-grid__item", className);
+  useEffect11(() => {
+    setResponsiveSpan(breakpointMap[breakpointSize]);
+  }, [breakpointSize, breakpointMap]);
+  const styles = {
+    gridColumn: responsiveSpan ? `span ${responsiveSpan}` : void 0,
+    alignSelf,
+    justifySelf
+  };
+  return /* @__PURE__ */ jsx34("div", { style: { ...styles }, className: classes, ...rest });
+};
+GridItem.displayName = "GridItem";
+
+// src/components/Grid/index.tsx
+var Grid2 = Object.assign(Grid, {
+  Item: GridItem
+});
+Grid2.displayName = "Grid";
+
+// src/components/Image/Image.tsx
+import classNames30 from "classnames/dedupe";
+import { jsx as jsx35 } from "react/jsx-runtime";
+var Image = ({
+  ref,
+  alt,
+  elementType: Component = "img",
+  ...otherProps
+}) => {
+  const classes = classNames30("mobius", "mobius-image", otherProps.className);
+  return /* @__PURE__ */ jsx35(Component, { alt, ref, ...otherProps, className: classes });
+};
+Image.displayName = "Image";
+
+// src/components/Link/Link.tsx
+import classNames31 from "classnames/dedupe";
+import { jsx as jsx36 } from "react/jsx-runtime";
+var Link = ({ ref, ...props }) => {
+  const {
+    isDisabled = false,
+    elementType: Component = "a",
+    style,
+    className,
+    variant = "primary",
+    ...otherProps
+  } = props;
+  const disabledStyles = {
+    pointerEvents: "none"
+  };
+  const styles = { ...style, ...isDisabled && disabledStyles };
+  const classes = classNames31(
+    "mobius",
+    "mobius-link",
+    className,
+    `mobius-link--${variant}`,
+    {
+      "--is-disabled": isDisabled
+    }
+  );
+  return /* @__PURE__ */ jsx36(
+    Component,
+    {
+      ref,
+      style: styles,
+      className: classes,
+      "aria-disabled": isDisabled ? true : void 0,
+      ...otherProps,
+      children: props.children
+    }
+  );
+};
+Link.displayName = "Link";
+
+// src/components/LinkButton/LinkButton.tsx
+import classNames32 from "classnames/dedupe";
+import { jsx as jsx37 } from "react/jsx-runtime";
+function LinkButton({
+  href,
+  children,
+  className,
+  elementType = "a",
+  ...rest
+}) {
+  if (!href) {
+    throw new Error("LinkButton requires a href prop");
+  }
+  const classes = classNames32("mobius", "mobius-link-button", className);
+  return /* @__PURE__ */ jsx37(Button, { elementType, href, className: classes, ...rest, children });
+}
+
+// src/components/List/List.tsx
+import { Children as Children6, cloneElement as cloneElement8, isValidElement as isValidElement4 } from "react";
+import classNames33 from "classnames/dedupe";
+import { jsx as jsx38 } from "react/jsx-runtime";
+var List = ({ ref, ...props }) => {
+  const Component = props.isOrdered ? "ol" : "ul";
+  const { children, icon, ...otherProps } = props;
+  const { isOrdered, liststyletype, isReversed, ...restProps } = otherProps;
+  const mappedProps = {
+    ...restProps,
+    reversed: isReversed
+  };
+  const classes = classNames33(
+    "mobius",
+    "mobius-list",
+    {
+      "--has-icon": icon,
+      [`--is-${liststyletype}`]: liststyletype
+    },
+    otherProps.className
+  );
+  return /* @__PURE__ */ jsx38(Component, { ref, ...mappedProps, className: classes, children: Children6.map(children, (child) => {
+    if (isValidElement4(child)) {
+      return cloneElement8(child, {
+        parentIcon: icon
+      });
+    }
+    return child;
+  }) });
+};
+List.displayName = "List";
+
+// src/components/List/ListItem.tsx
+import classNames34 from "classnames/dedupe";
+import { jsx as jsx39, jsxs as jsxs20 } from "react/jsx-runtime";
+var ListItem = ({ ref, ...props }) => {
+  const { parentIcon, icon, children, ...otherProps } = props;
+  const iconContent = icon || parentIcon;
+  const classes = classNames34(
+    "mobius",
+    "mobius-list__item",
+    {
+      "--has-icon": iconContent
+    },
+    props.className
+  );
+  const contentClasses = classNames34("mobius", "mobius-list__item-content");
+  const iconClasses = classNames34("mobius", "mobius-list__icon");
+  if (iconContent) {
+    return /* @__PURE__ */ jsx39("li", { ref, ...otherProps, className: classes, children: /* @__PURE__ */ jsxs20("span", { className: contentClasses, children: [
+      /* @__PURE__ */ jsx39("span", { className: iconClasses, children: iconContent }),
+      children
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx39("li", { ref, ...otherProps, className: classes, children });
+};
+ListItem.displayName = "ListItem";
+
+// src/components/LoadingIndicator/LoadingIndicator.tsx
+import classNames35 from "classnames/dedupe";
+import { loading as loading2 } from "@simplybusiness/icons";
+import { jsx as jsx40 } from "react/jsx-runtime";
+var LoadingIndicator = ({ ref, ...props }) => {
+  const { icon = loading2, ...otherProps } = props;
+  const classes = classNames35(
+    "mobius",
+    "mobius-loading-indicator",
+    otherProps.className
+  );
+  return /* @__PURE__ */ jsx40(Icon, { icon, spin: true, ref, ...otherProps, className: classes });
+};
+LoadingIndicator.displayName = "LoadingIndicator";
+
+// src/components/Logo/Logo.tsx
+import classNames36 from "classnames/dedupe";
+import { jsx as jsx41, jsxs as jsxs21 } from "react/jsx-runtime";
+var Logo = ({ ref, ...props }) => {
+  const { className, width, height, ...otherProps } = props;
+  const classes = classNames36("mobius", "mobius-logo", className);
+  return /* @__PURE__ */ jsxs21(
+    "svg",
+    {
+      width,
+      height,
+      ref,
+      className: classes,
+      viewBox: "0 0 144 37",
+      ...otherProps,
+      children: [
+        /* @__PURE__ */ jsx41("defs", { children: /* @__PURE__ */ jsxs21(
+          "linearGradient",
+          {
+            id: "logo-gradient",
+            x1: "83.508%",
+            x2: "11.891%",
+            y1: "76.042%",
+            y2: "26.973%",
+            children: [
+              /* @__PURE__ */ jsx41("stop", { stopColor: "#4632D8", offset: "0%" }),
+              /* @__PURE__ */ jsx41("stop", { stopColor: "#9084E8", offset: "100%" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxs21("g", { children: [
+          /* @__PURE__ */ jsx41(
+            "path",
+            {
+              fill: "#0E0A2B",
+              d: "M68.788 11.307c0-2.486-2.027-3.345-3.833-4.1-1.332-.562-2.471-1.036-2.471-2.072 0-.873.77-1.42 1.968-1.42 1.051 0 1.806.444 2.294.725.193.103.474.222.755.133.192-.06.34-.207.459-.444l.34-.621c.266-.474.163-.888-.281-1.2-.533-.384-1.88-1.05-3.537-1.05-2.738 0-4.647 1.643-4.647 4.01 0 2.413 2.012 3.301 3.788 4.07 1.347.593 2.516 1.096 2.516 2.161 0 .873-.754 1.45-1.924 1.45-1.287 0-2.22-.65-2.678-.961l-.03-.015c-.533-.296-.903-.237-1.228.192l-.415.607c-.444.607-.148.992.134 1.228.828.637 2.427 1.392 4.203 1.392 2.708 0 4.587-1.673 4.587-4.085zm4.44 2.975V6.186c0-.577-.31-.888-.873-.888h-.843c-.563 0-.874.311-.874.888v8.096c0 .577.296.888.874.888h.843c.563 0 .873-.311.873-.888zM71.482 4.203h.755c.518 0 .814-.281.814-.8v-.517c0-.518-.296-.814-.814-.814h-.755c-.518 0-.8.281-.8.814v.518c.016.518.297.8.8.8zM92.645 24.48h.755c.518 0 .814-.282.814-.8v-.518c0-.518-.296-.814-.814-.814h-.755c-.518 0-.799.282-.799.814v.518c0 .518.281.8.8.8zm-6.26-19.42c-1.539 0-2.397.962-2.945 1.895-.444-1.243-1.435-1.895-2.871-1.895-1.362 0-2.146.888-2.723 1.806v-.68c0-.578-.311-.889-.873-.889h-.74c-.563 0-.873.311-.873.888v8.096c0 .577.295.888.873.888h.843c.577 0 .873-.311.873-.888V10.73c0-2.25.888-3.271 2.058-3.271 1.006 0 1.198.71 1.198 1.85v4.987c0 .578.311.888.888.888h.844c.577 0 .873-.31.873-.888v-3.551c0-2.25.873-3.271 2.013-3.271 1.036 0 1.243.74 1.243 1.85v4.987c0 .577.31.888.888.888h.814c.577 0 .888-.31.888-.888V8.835c0-2.5-1.095-3.774-3.27-3.774zm10.804 10.33c2.679 0 4.558-2.13 4.558-5.164 0-3.094-1.776-5.166-4.425-5.166-1.761 0-2.708 1.036-3.049 1.51v-.533c0-.459-.34-.755-.873-.755h-.607c-.562 0-.888.326-.888.888v11.9c0 .576.311.887.888.887h.814c.578 0 .888-.31.888-.888v-3.404c0-.207-.014-.4-.014-.532.325.429 1.184 1.258 2.708 1.258zm-2.768-5.105c0-1.362.622-2.975 2.368-2.975 1.377 0 2.309 1.184 2.309 2.945 0 1.746-.947 2.916-2.338 2.916-1.54 0-2.339-1.45-2.339-2.886zm12.965 4.07v-.652c0-.444-.252-.725-.681-.784-.34-.03-.68-.192-.68-1.066v-9.47c0-.563-.326-.888-.874-.888h-.843c-.563 0-.874.31-.874.888v9.679c0 1.258.34 2.16 1.021 2.678.637.489 1.466.533 2.013.533.607 0 .918-.325.918-.917zm9.457-9.073h-.962c-.518 0-.844.237-.977.726l-1.717 4.972c-.089.311-.192.71-.251.977-.074-.281-.193-.71-.296-1.021l-1.835-4.943c-.163-.489-.489-.71-.977-.71h-1.036c-.415 0-.622.162-.71.295-.09.134-.163.385.014.755l3.685 8.57-.34.813c-.252.592-.77 1.229-1.45 1.229-.267 0-.474-.09-.652-.163h-.014c-.43-.104-.755.074-.962.488l-.163.415c-.119.251-.148.517-.06.725.075.192.237.34.474.429.326.118.814.296 1.391.296 1.628 0 2.975-.977 3.597-2.605l3.996-10.226c.103-.296.088-.563-.045-.755-.163-.163-.4-.267-.71-.267zM67.634 28.297c.977-.592 1.54-1.658 1.54-2.886 0-2.176-1.688-3.567-4.293-3.567h-4.04c-.562 0-.873.311-.873.888v11.899c0 .577.296.888.873.888h4.1c1.346 0 2.5-.34 3.33-.962.932-.71 1.42-1.761 1.42-3.049.03-1.524-.784-2.767-2.057-3.211zm-5.017-.962v-3.212h2.25c1.02 0 1.628.592 1.628 1.584 0 .991-.607 1.643-1.57 1.643h-2.308v-.015zm4.396 4.01c0 1.155-.71 1.865-1.865 1.865h-2.53v-3.714h2.53c1.14.014 1.865.74 1.865 1.85zm12.638-5.712h-.814c-.577 0-.888.31-.888.888v3.655c0 2.176-1.361 3.182-2.634 3.182-1.006 0-1.406-.547-1.406-1.88v-4.942c0-.578-.31-.888-.888-.888h-.814c-.562 0-.888.325-.888.888v5.431c0 2.516 1.17 3.774 3.463 3.774a3.937 3.937 0 003.286-1.761v.651c0 .577.296.888.873.888h.74c.577 0 .888-.31.888-.888v-8.095c-.03-.578-.355-.903-.918-.903zm6.956 3.937c-.917-.311-1.702-.592-1.702-1.184 0-.74.77-.859 1.229-.859.784 0 1.406.281 1.805.474.548.237.947.118 1.184-.34l.193-.341c.251-.518.133-.947-.326-1.184-.326-.178-1.288-.71-2.753-.71-2.279 0-3.803 1.213-3.803 3.004 0 2.042 1.731 2.65 3.137 3.138.903.325 1.687.592 1.687 1.169 0 .547-.488.902-1.258.902-.917 0-1.613-.37-2.057-.621l-.059-.03c-.533-.28-.903-.207-1.213.222l-.222.34c-.178.252-.237.504-.178.726.044.207.192.37.4.488a5.774 5.774 0 003.285 1.007c2.235 0 3.789-1.273 3.789-3.079-.03-2.042-1.761-2.649-3.138-3.122zm6.897-3.937h-.844c-.562 0-.873.31-.873.888v8.095c0 .577.296.888.873.888h.844c.577 0 .873-.31.873-.888v-8.095c0-.563-.31-.888-.873-.888zm9.324-.237c-1.924 0-2.93 1.154-3.36 1.806v-.681c0-.577-.31-.888-.873-.888h-.74c-.563 0-.873.31-.873.888v8.095c0 .577.296.888.873.888h.843c.578 0 .874-.31.874-.888v-3.744c0-1.79 1.14-3.078 2.708-3.078 1.021 0 1.436.547 1.436 1.88v4.942c0 .577.31.888.887.888h.814c.578 0 .888-.31.888-.888v-5.431c0-2.516-1.169-3.789-3.477-3.789zm10.448 0c-2.96 0-5.032 2.131-5.032 5.165 0 2.99 2.235 5.165 5.313 5.165 1.48 0 2.635-.533 3.345-.977.444-.266.562-.695.296-1.198l-.222-.385c-.266-.459-.651-.563-1.184-.31h-.015a3.885 3.885 0 01-2.042.606c-1.54 0-2.634-.962-2.812-2.472h5.816a.935.935 0 00.933-.917c.014-2.827-1.717-4.677-4.396-4.677zm-.044 2.013c1.065 0 1.79.77 1.864 1.968h-4.1c.253-1.213 1.096-1.968 2.236-1.968zm10.152 2.16c-.917-.31-1.702-.591-1.702-1.183 0-.74.77-.859 1.229-.859.784 0 1.406.281 1.805.474.548.237.947.118 1.184-.34l.192-.341c.252-.518.134-.947-.325-1.184-.326-.178-1.288-.71-2.753-.71-2.279 0-3.803 1.213-3.803 3.004 0 2.042 1.731 2.65 3.137 3.138.903.325 1.687.592 1.687 1.169 0 .547-.488.902-1.258.902-.917 0-1.613-.37-2.057-.621l-.059-.03c-.533-.28-.903-.207-1.214.222l-.222.34c-.177.252-.236.504-.177.726.044.207.192.37.4.488a5.774 5.774 0 003.285 1.007c2.235 0 3.789-1.273 3.789-3.079-.015-2.042-1.747-2.649-3.138-3.122zm8.791 0c-.917-.31-1.702-.591-1.702-1.183 0-.74.77-.859 1.229-.859.784 0 1.406.281 1.805.474.548.237.947.118 1.184-.34l.192-.341c.252-.518.134-.947-.325-1.184-.326-.178-1.288-.71-2.753-.71-2.279 0-3.803 1.213-3.803 3.004 0 2.042 1.731 2.65 3.137 3.138.903.325 1.687.592 1.687 1.169 0 .547-.488.902-1.258.902-.917 0-1.613-.37-2.057-.621l-.059-.03c-.533-.28-.903-.207-1.214.222l-.222.34c-.177.252-.236.504-.177.726.044.207.192.37.4.488a5.774 5.774 0 003.285 1.007c2.235 0 3.789-1.273 3.789-3.079-.015-2.042-1.747-2.649-3.138-3.122z"
+            }
+          ),
+          /* @__PURE__ */ jsx41(
+            "path",
+            {
+              fill: "url(#logo-gradient)",
+              d: "M22.747 22.288c.607 1.214.918 2.59.918 4.144 0 1.45-.267 2.827-.8 4.1a10.018 10.018 0 01-2.279 3.36c-.991.961-2.235 1.73-3.744 2.278-1.51.563-3.167.829-4.988.829-2.264 0-4.35-.385-6.29-1.14-1.938-.77-3.492-1.598-4.676-2.5-.31-.252-.548-.504-.696-.77a1.332 1.332 0 01-.177-.71.718.718 0 010-.252c.03-.37.207-.785.547-1.199l1.14-1.598c.4-.548.829-.844 1.288-.918a.896.896 0 01.222-.03c.4 0 .873.163 1.39.474 2.487 1.776 4.914 2.679 7.252 2.679 1.643 0 2.96-.385 3.922-1.14.962-.755 1.45-1.746 1.45-2.96 0-.725-.192-1.39-.562-1.983a5.347 5.347 0 00-1.539-1.569 18.207 18.207 0 00-2.235-1.287 56.102 56.102 0 00-2.649-1.214c-.917-.4-1.835-.814-2.752-1.258a19.282 19.282 0 01-2.62-1.539 14.014 14.014 0 01-2.22-1.924c-.666-.695-1.169-1.539-1.554-2.545-.37-.992-.562-2.087-.562-3.271 0-2.042.533-3.863 1.598-5.446 1.066-1.584 2.516-2.797 4.336-3.641C8.303.414 10.345 0 12.624 0c1.91 0 3.685.281 5.358.844 1.657.562 2.96 1.198 3.892 1.88.68.473 1.006 1.035 1.006 1.671 0 .385-.118.785-.37 1.2l-.917 1.657c-.385.74-.903 1.11-1.554 1.11-.4 0-.83-.133-1.318-.4a42.421 42.421 0 00-1.687-.947c-.473-.237-1.14-.488-1.998-.71a9.458 9.458 0 00-2.56-.356c-1.672 0-3.004.37-3.981 1.11-.992.74-1.48 1.717-1.48 2.946 0 .902.31 1.701.932 2.412.622.695 1.421 1.302 2.398 1.79.977.489 2.057.977 3.256 1.466a54.048 54.048 0 013.552 1.628 20.795 20.795 0 013.24 2.042c.948.755 1.732 1.732 2.354 2.945zm31.257 2.945c0 3.197-1.155 6.083-3.256 8.14-2.265 2.205-5.506 3.36-9.368 3.36H30.71c-2.443 0-4.278-1.836-4.278-4.278V4.53c0-1.2.43-2.28 1.214-3.064C28.43.681 29.51.252 30.709.252h9.013c3.419 0 6.32 1.095 8.377 3.182 1.909 1.923 2.945 4.558 2.945 7.429 0 2.294-.622 4.203-1.91 5.816 1.377.77 2.487 1.776 3.286 2.99 1.066 1.583 1.584 3.448 1.584 5.564zm-12.106-7.68c.044-.03 4.913-3.02 4.913-6.675 0-1.761-.607-3.345-1.717-4.455-1.568-1.584-3.788-1.924-5.372-1.924H30.68v28h10.7c2.738 0 4.958-.754 6.408-2.16 1.273-1.243 1.983-3.049 1.983-5.106 0-1.272-.296-2.353-.858-3.196v-.03c-1.362-2.353-6.838-3.774-6.897-3.789l-.844-.222.726-.444z"
+            }
+          ),
+          /* @__PURE__ */ jsx41(
+            "path",
+            {
+              fill: "#0E0A2B",
+              d: "M138.199 25.455c0-.4.074-.784.222-1.14.148-.354.355-.665.606-.932.267-.266.563-.473.903-.621.34-.148.725-.222 1.11-.222.4 0 .784.074 1.125.222.355.148.666.355.917.621.267.267.474.578.622.933.148.355.222.74.222 1.14 0 .399-.074.784-.222 1.139a2.86 2.86 0 01-.622.932 3.087 3.087 0 01-.917.637 2.646 2.646 0 01-1.125.236c-.4 0-.77-.074-1.11-.236a2.777 2.777 0 01-.903-.637 2.821 2.821 0 01-.606-.932 2.898 2.898 0 01-.222-1.14zm.71 0c0 .326.06.622.163.903.103.281.266.518.459.725a2.051 2.051 0 001.524.666c.31 0 .592-.059.858-.177a2.175 2.175 0 001.155-1.214c.118-.281.162-.577.162-.903 0-.325-.059-.621-.162-.902a2.422 2.422 0 00-.46-.726 2.112 2.112 0 00-.695-.488 2.073 2.073 0 00-.858-.178c-.31 0-.592.06-.844.178a2.051 2.051 0 00-.68.488 2.45 2.45 0 00-.46.726 2.636 2.636 0 00-.162.902zm1.154-1.14c0-.221.119-.34.34-.34h.889c.296 0 .532.09.695.252.178.163.267.4.267.68a.623.623 0 01-.06.297.557.557 0 01-.133.222.512.512 0 01-.163.148c-.059.044-.118.059-.162.074v.014l.03.03c.014.015.014.03.029.06l.044.088.34.666c.06.118.075.207.045.281-.03.074-.104.104-.207.104h-.104c-.192 0-.31-.089-.385-.252l-.384-.829h-.4v.74c0 .222-.104.34-.31.34h-.06c-.207 0-.31-.118-.31-.34v-2.234zm1.051 1.037c.133 0 .252-.045.31-.119.075-.074.104-.192.104-.325s-.03-.252-.103-.326a.413.413 0 00-.296-.118h-.385v.873h.37v.015z"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+Logo.displayName = "Logo";
+
+// src/components/Modal/Content.tsx
+import { jsx as jsx42 } from "react/jsx-runtime";
+var Content2 = ({ ref, children, ...otherProps }) => /* @__PURE__ */ jsx42("div", { ref, ...otherProps, className: "mobius-modal__content", children });
+Content2.displayName = "Content";
+
+// src/components/Modal/Header.tsx
+import { cross as cross2 } from "@simplybusiness/icons";
+
+// src/components/Modal/useModal.ts
+import { useContext as useContext2 } from "react";
+
+// src/components/Modal/ModalContext.tsx
+import { createContext as createContext2 } from "react";
+var ModalContext = createContext2({
+  onClose: () => {
+  },
+  closeLabel: void 0
+});
+
+// src/components/Modal/useModal.ts
+var useModal = () => {
+  const { onClose, closeLabel } = useContext2(ModalContext);
+  return { onClose, closeLabel };
+};
+
+// src/components/Modal/Header.tsx
+import { jsx as jsx43, jsxs as jsxs22 } from "react/jsx-runtime";
+var Header2 = ({ ref, children, ...otherProps }) => {
+  const { onClose, closeLabel } = useModal();
+  return /* @__PURE__ */ jsxs22("header", { ref, ...otherProps, className: "mobius-modal__header", children: [
+    children,
+    /* @__PURE__ */ jsxs22(
+      Button,
+      {
+        "aria-label": "Close",
+        variant: "basic",
+        onPress: onClose,
+        className: "mobius-modal__close",
+        children: [
+          /* @__PURE__ */ jsx43(Icon, { icon: cross2 }),
+          " ",
+          closeLabel
+        ]
+      }
+    )
+  ] });
+};
+Header2.displayName = "Header";
+
+// src/components/Modal/Modal.tsx
+import classNames37 from "classnames/dedupe";
+import { useEffect as useEffect12, useMemo as useMemo3, useRef as useRef9, useState as useState16 } from "react";
+import { jsx as jsx44 } from "react/jsx-runtime";
+var TRANSITION_CSS_VARIABLE2 = "--modal-transition-duration";
+var Modal = ({ ref, ...props }) => {
+  const {
+    isOpen,
+    onClose,
+    onOpen,
+    children,
+    className,
+    closeLabel,
+    isFullScreen,
+    animation,
+    ...rest
+  } = props;
+  const [shouldTransition, setShouldTransition] = useState16(false);
+  useEffect12(() => {
+    setShouldTransition(supportsDialog());
+  }, []);
+  const dialogRef = useRef9(null);
+  const { close } = useDialog({
+    ref: dialogRef,
+    isOpen,
+    onOpen,
+    onClose,
+    transition: {
+      isEnabled: !!animation,
+      CSSVariable: TRANSITION_CSS_VARIABLE2
+    }
+  });
+  const modalClasses = classNames37(
+    "mobius",
+    "mobius-modal",
+    {
+      "--no-dialog-support": !shouldTransition,
+      // This class is used to correctly position modal in x/y middle on iOS <= 15.2
+      "--should-transition": shouldTransition && animation,
+      "--slide-up": animation === "slideUp",
+      "--fade": animation === "fade",
+      "--is-fullscreen": isFullScreen
+    },
+    className
+  );
+  const contextValue = useMemo3(
+    () => ({
+      onClose: close,
+      closeLabel
+    }),
+    [close, closeLabel]
+  );
+  return /* @__PURE__ */ jsx44(
+    "dialog",
+    {
+      ref: mergeRefs([dialogRef, ref]),
+      onCancel: close,
+      className: modalClasses,
+      ...rest,
+      children: /* @__PURE__ */ jsx44(ModalContext.Provider, { value: contextValue, children })
+    }
+  );
+};
+Modal.displayName = "Modal";
+
+// src/components/Modal/index.tsx
+var Modal2 = Object.assign(Modal, {
+  Header: Header2,
+  Content: Content2
+});
+Modal2.displayName = "Modal";
+
+// src/components/NumberField/NumberField.tsx
+import classNames38 from "classnames/dedupe";
+import { useCallback as useCallback5, useEffect as useEffect13, useRef as useRef10 } from "react";
+import { jsx as jsx45 } from "react/jsx-runtime";
+var NumberField = ({ ref, ...props }) => {
+  const {
+    minValue,
+    maxValue,
+    step,
+    defaultValue,
+    hideSpinButtons,
+    className,
+    ...otherProps
+  } = props;
+  const {
+    onFocus: customOnFocus,
+    onBlur: customOnBlur,
+    ...rest
+  } = otherProps;
+  const focusedInputRef = useRef10(null);
+  const wheelHandler = useCallback5((ev) => ev.preventDefault(), []);
+  useEffect13(() => {
+    return () => {
+      focusedInputRef.current?.removeEventListener("wheel", wheelHandler);
+      focusedInputRef.current = null;
+    };
+  }, [wheelHandler]);
+  const containerClasses = classNames38("mobius-number-field", className, {
+    "--hide-spin-buttons": hideSpinButtons
+  });
+  const handleBeforeInput = (event) => {
+    const { data } = event.nativeEvent;
+    if (step && Number.isInteger(step) && data === ".") {
+      event.preventDefault();
+    }
+    if (minValue && minValue >= 0 && data === "-") {
+      event.preventDefault();
+    }
+  };
+  const handleBlur = (event) => {
+    const { value } = event.target;
+    const numValue = parseFloat(value);
+    if (step && step > 1 && !isNaN(numValue)) {
+      const baseValue = minValue ?? 0;
+      const steps = Math.round((numValue - baseValue) / step);
+      const snappedValue = baseValue + steps * step;
+      if (snappedValue !== numValue) {
+        event.target.value = snappedValue.toString();
+        const changeEvent = new Event("change", { bubbles: true });
+        event.target.dispatchEvent(changeEvent);
+        const syntheticChangeEvent = {
+          ...event,
+          target: event.target,
+          currentTarget: event.currentTarget
+        };
+        otherProps.onChange?.(syntheticChangeEvent);
+      }
+    }
+    customOnBlur?.(event);
+  };
+  const forwardedProps = {
+    ...rest,
+    onFocus: (e) => {
+      const el = e.currentTarget;
+      focusedInputRef.current?.removeEventListener("wheel", wheelHandler);
+      focusedInputRef.current = el;
+      el.addEventListener("wheel", wheelHandler, { passive: false });
+      customOnFocus?.(e);
+    },
+    onBlur: (e) => handleBlur(e)
+  };
+  return /* @__PURE__ */ jsx45(
+    TextField,
+    {
+      ...forwardedProps,
+      className: containerClasses,
+      onBeforeInput: handleBeforeInput,
+      type: "number",
+      min: minValue ?? void 0,
+      max: maxValue ?? void 0,
+      step,
+      ref,
+      defaultValue: defaultValue != null ? defaultValue?.toString() : defaultValue
+    }
+  );
+};
+NumberField.displayName = "NumberField";
+
+// src/components/Option/Option.tsx
+import { jsx as jsx46 } from "react/jsx-runtime";
+var Option2 = ({ ref, ...props }) => {
+  const { isDisabled, ...rest } = props;
+  const mappedProps = {
+    ...rest,
+    disabled: isDisabled
+  };
+  return /* @__PURE__ */ jsx46("option", { ...mappedProps, ref });
+};
+Option2.displayName = "Option";
+
+// src/components/PasswordField/PasswordField.tsx
+import classNames39 from "classnames/dedupe";
+import { useRef as useRef11, useState as useState17 } from "react";
+
+// src/components/PasswordField/ShowHideButton.tsx
+import { eye, eyeSlash } from "@simplybusiness/icons";
+import { jsx as jsx47 } from "react/jsx-runtime";
+var ShowHideButton = ({
+  show = false,
+  onClick
+}) => /* @__PURE__ */ jsx47(
+  "button",
+  {
+    className: "mobius-password-field__show-button",
+    type: "button",
+    onClick: (e) => {
+      e.preventDefault();
+      onClick();
+    },
+    "aria-label": `${show ? "Hide" : "Show"} password`,
+    "data-testid": "show-hide-button",
+    children: /* @__PURE__ */ jsx47(Icon, { icon: show ? eyeSlash : eye, "aria-hidden": "true" })
+  }
+);
+
+// src/components/PasswordField/PasswordField.tsx
+import { jsx as jsx48 } from "react/jsx-runtime";
+var PasswordField = ({
+  ref,
+  className,
+  ...props
+}) => {
+  const [show, setShow] = useState17(false);
+  const type = show ? "text" : "password";
+  const classes = classNames39("mobius-password-field", className);
+  const localRef = useRef11(null);
+  const handleShowHideButtonClick = () => {
+    const selectionStart = localRef.current?.selectionStart;
+    const selectionEnd = localRef.current?.selectionEnd;
+    setShow((oldShow) => !oldShow);
+    requestAnimationFrame(() => {
+      localRef.current?.focus();
+      if (selectionStart != null && selectionEnd != null) {
+        localRef.current?.setSelectionRange(selectionStart, selectionEnd);
+      }
+    });
+  };
+  return /* @__PURE__ */ jsx48(
+    TextField,
+    {
+      ref: mergeRefs([localRef, ref]),
+      className: classes,
+      ...props,
+      type,
+      suffixInside: /* @__PURE__ */ jsx48(ShowHideButton, { onClick: handleShowHideButtonClick, show })
+    }
+  );
+};
+PasswordField.displayName = "PasswordField";
+
+// src/components/Popover/Popover.tsx
+import {
+  FloatingArrow,
+  arrow,
+  autoUpdate,
+  flip,
+  offset,
+  shift,
+  useDismiss,
+  useFloating,
+  useInteractions
+} from "@floating-ui/react";
+import { cross as cross3 } from "@simplybusiness/icons";
+import classNames40 from "classnames/dedupe";
+import { cloneElement as cloneElement9, useRef as useRef12, useState as useState18 } from "react";
+import { 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 = useRef12(null);
+  const [isOpen, setIsOpen] = useState18(false);
+  const { refs, floatingStyles, context } = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      arrow({
+        element: arrowRef
+      }),
+      offset(OFFSET_FROM_CONTENT_DEFAULT),
+      shift(),
+      flip()
+    ]
+  });
+  const dismiss = useDismiss(context, {
+    bubbles: true,
+    outsidePress: (event) => {
+      const toggle = refs.reference.current;
+      const isToggleClick = !toggle?.contains(event.target);
+      if (isToggleClick) {
+        onClose?.();
+      }
+      return true;
+    }
+  });
+  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss]);
+  const containerClasses = classNames40(
+    "mobius",
+    "mobius-popover__container",
+    className
+  );
+  const toggleVisibility = () => {
+    if (isOpen) {
+      setIsOpen(false);
+      onClose?.();
+      return;
+    }
+    setIsOpen(true);
+    onOpen?.();
+  };
+  const triggerComponent = cloneElement9(trigger, {
+    ref: refs.setReference,
+    className: classNames40(
+      trigger.props.className,
+      "mobius-popover__toggle"
+    ),
+    onClick: toggleVisibility,
+    ...getReferenceProps()
+  });
+  useWindowEvent2("keydown", (e) => {
+    if (e.key === "Escape") {
+      onClose?.();
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  });
+  return /* @__PURE__ */ jsxs23(Fragment4, { children: [
+    triggerComponent,
+    isOpen && /* @__PURE__ */ jsxs23(
+      "div",
+      {
+        className: containerClasses,
+        ref: refs.setFloating,
+        style: floatingStyles,
+        ...getFloatingProps(),
+        children: [
+          /* @__PURE__ */ jsxs23("div", { className: "mobius-popover", children: [
+            /* @__PURE__ */ jsx49("header", { className: "mobius-popover__header", children: /* @__PURE__ */ jsx49(
+              Button,
+              {
+                type: "button",
+                className: "mobius-popover__close-button",
+                onClick: toggleVisibility,
+                "aria-label": "Close",
+                variant: "ghost",
+                children: /* @__PURE__ */ jsx49(
+                  Icon,
+                  {
+                    icon: cross3,
+                    size: "md",
+                    className: "mobius-popover__close-icon"
+                  }
+                )
+              }
+            ) }),
+            /* @__PURE__ */ jsx49("div", { className: "mobius-popover__body", children })
+          ] }),
+          /* @__PURE__ */ jsx49(
+            FloatingArrow,
+            {
+              ref: arrowRef,
+              context,
+              width: 20,
+              className: "mobius-popover__arrow-icon"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+
+// src/components/Progress/Progress.tsx
+import classNames41 from "classnames/dedupe";
+import { useId as useId9 } from "react";
+import { jsx as jsx50, jsxs as jsxs24 } from "react/jsx-runtime";
+function warnAboutInvalidValues(value, minValue, maxValue) {
+  if (minValue > maxValue) {
+    console.warn("minValue is greater than maxValue");
+  }
+  if (value < minValue) {
+    console.warn("Progress value is less than minValue");
+  }
+  if (value > maxValue) {
+    console.warn("Progress value is greater than maxValue");
+  }
+}
+var sanitizedValue = (value, defaultValue) => {
+  if (value === void 0 || Number.isNaN(value)) {
+    return defaultValue;
+  }
+  return value;
+};
+var getLabelComponent = (label, progressLabelId, showLabel) => {
+  if (showLabel) {
+    return /* @__PURE__ */ jsx50(
+      Label,
+      {
+        id: progressLabelId,
+        className: "mobius-progress__label",
+        elementType: "span",
+        children: label
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx50(VisuallyHidden, { children: /* @__PURE__ */ jsx50(
+    Label,
+    {
+      id: progressLabelId,
+      className: "mobius-progress__label",
+      elementType: "span",
+      children: label
+    }
+  ) });
+};
+var DEFAULT_VALUE = 0;
+var DEFAULT_MIN_VALUE = 0;
+var DEFAULT_MAX_VALUE = 100;
+var Progress = ({ ref, ...props }) => {
+  const progressId = useId9();
+  const progressLabelId = useId9();
+  const {
+    id,
+    label,
+    showLabel = true,
+    showValueLabel = !!label,
+    valueFormatter,
+    variant = "primary",
+    className
+  } = props;
+  let { value, minValue, maxValue } = props;
+  value = sanitizedValue(value, DEFAULT_VALUE);
+  minValue = sanitizedValue(minValue, DEFAULT_MIN_VALUE);
+  maxValue = sanitizedValue(maxValue, DEFAULT_MAX_VALUE);
+  if (value === void 0 || minValue === void 0 || maxValue === void 0) {
+    return null;
+  }
+  warnAboutInvalidValues(value, minValue, maxValue);
+  const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
+  const percentage = clamp(
+    Math.round((value - minValue) / (maxValue - minValue) * 100),
+    0,
+    100
+  );
+  const barWidth = `${percentage}%`;
+  const classes = classNames41("mobius", "mobius-progress", className, {
+    "--is-primary": variant === "primary",
+    "--is-secondary": variant === "secondary"
+  });
+  const progressBarProps = {};
+  progressBarProps["aria-valuemin"] = minValue.toString();
+  progressBarProps["aria-valuemax"] = maxValue.toString();
+  progressBarProps["aria-valuenow"] = value.toString();
+  progressBarProps["aria-valuetext"] = valueFormatter instanceof Function ? valueFormatter(value, minValue, maxValue) : barWidth;
+  const labelComponent = getLabelComponent(label, progressLabelId, showLabel);
+  return /* @__PURE__ */ jsxs24(
+    "div",
+    {
+      id: id || progressId,
+      ...progressBarProps,
+      ref,
+      className: classes,
+      role: "progressbar",
+      "aria-labelledby": progressLabelId,
+      children: [
+        labelComponent,
+        /* @__PURE__ */ jsx50("div", { className: "mobius-progress__track", children: /* @__PURE__ */ jsx50("div", { className: "mobius-progress__bar", style: { width: barWidth } }) }),
+        showValueLabel && /* @__PURE__ */ jsx50(Label, { "data-testid": "value-label", elementType: "span", children: progressBarProps["aria-valuetext"] })
+      ]
+    }
+  );
+};
+Progress.displayName = "Progress";
+
+// src/components/Radio/Radio.tsx
+import classNames42 from "classnames/dedupe";
+import {
+  Children as Children7,
+  isValidElement as isValidElement5,
+  useLayoutEffect,
+  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 }) => {
+  const {
+    children,
+    value,
+    label,
+    className,
+    isDisabled,
+    errorMessage,
+    onChange,
+    defaultChecked,
+    groupDisabled,
+    name,
+    selected,
+    setSelected,
+    isRequired,
+    onOverflow,
+    orientation,
+    ...otherProps
+  } = props;
+  const realDisabled = groupDisabled || isDisabled;
+  const isMultiline = label && children;
+  const isControlled = selected !== void 0;
+  const isChecked = isControlled ? selected === value : defaultChecked;
+  const contentRef = useRef13(null);
+  const prevOverflowRef = useRef13({
+    vertical: false,
+    horizontal: false
+  });
+  const hasIconFirst = useMemo4(() => {
+    if (!children || Children7.count(children) === 0) return false;
+    const firstChild = Children7.toArray(children)[0];
+    if (!isValidElement5(firstChild)) return false;
+    const props2 = firstChild.props;
+    return "icon" in props2 && props2.icon !== void 0;
+  }, [children]);
+  useLayoutEffect(() => {
+    if (!contentRef.current || !onOverflow) return;
+    if (orientation === "vertical") {
+      return;
+    }
+    const element = contentRef.current;
+    const scrollOverflowVertical = element.scrollHeight > element.clientHeight;
+    const scrollOverflowHorizontal = element.scrollWidth > element.clientWidth;
+    const styles = window.getComputedStyle(element);
+    const lineHeight = parseFloat(styles.lineHeight);
+    const fontSize = parseFloat(styles.fontSize);
+    const singleLineHeight = isNaN(lineHeight) ? fontSize * 1.2 : lineHeight;
+    const WRAP_DETECTION_TOLERANCE = 1.1;
+    const hasWrapped = element.clientHeight > singleLineHeight * WRAP_DETECTION_TOLERANCE;
+    const vertical = scrollOverflowVertical || hasWrapped;
+    const horizontal = scrollOverflowHorizontal;
+    const newOverflowState = { vertical, horizontal };
+    const prevOverflow = prevOverflowRef.current;
+    if (newOverflowState.vertical !== prevOverflow.vertical || newOverflowState.horizontal !== prevOverflow.horizontal) {
+      prevOverflowRef.current = newOverflowState;
+      onOverflow(newOverflowState);
+    }
+  }, [label, children, onOverflow, orientation]);
+  const radioClasses = {
+    "--is-disabled": realDisabled,
+    "--is-selected": selected === value,
+    "--is-multiline": !!isMultiline,
+    "--is-required": isRequired
+  };
+  const containerClasses = classNames42(
+    "mobius-radio__label",
+    radioClasses,
+    className,
+    { "--has-icon-first": hasIconFirst }
+  );
+  const inputClasses = classNames42("mobius-radio__input", radioClasses);
+  const { "aria-describedby": _ariaDescribedBy, ...rest } = otherProps;
+  const handleChange = (event) => {
+    if (setSelected) {
+      setSelected(event.target.value);
+    }
+    if (onChange) {
+      const adaptedEvent = {
+        ...event.nativeEvent,
+        target: event.target
+      };
+      onChange(adaptedEvent);
+    }
+  };
+  return /* @__PURE__ */ jsxs25(Fragment5, { children: [
+    /* @__PURE__ */ jsxs25(Label, { className: containerClasses, children: [
+      /* @__PURE__ */ jsx51(
+        "input",
+        {
+          "aria-describedby": otherProps["aria-describedby"],
+          disabled: realDisabled,
+          ref,
+          className: inputClasses,
+          value,
+          tabIndex: 0,
+          type: "radio",
+          onChange: handleChange,
+          ...isControlled ? { checked: isChecked } : { defaultChecked: isChecked },
+          name,
+          required: isRequired,
+          ...rest
+        }
+      ),
+      isMultiline ? /* @__PURE__ */ jsxs25("div", { ref: contentRef, className: "mobius-radio__content--multiline", children: [
+        /* @__PURE__ */ jsx51("div", { className: "mobius-radio__content-first-line", children: label }),
+        /* @__PURE__ */ jsx51("div", { className: "mobius-radio__extra-content", children })
+      ] }) : /* @__PURE__ */ jsx51("div", { ref: contentRef, className: "mobius-radio__content", children: label || children })
+    ] }),
+    errorMessage && /* @__PURE__ */ jsx51(ErrorMessage, { errorMessage })
+  ] });
+};
+Radio.displayName = "Radio";
+
+// src/components/Radio/RadioGroup.tsx
+import classNames43 from "classnames/dedupe";
+import {
+  Children as Children8,
+  cloneElement as cloneElement10,
+  isValidElement as isValidElement6,
+  useCallback as useCallback6,
+  useEffect as useEffect14,
+  useId as useId10,
+  useRef as useRef14,
+  useState as useState19
+} from "react";
+import { jsx as jsx52, jsxs as jsxs26 } from "react/jsx-runtime";
+var getDefaultVal = (children, defaultValue) => {
+  if (Array.isArray(children) && defaultValue) {
+    const option = children?.find((item) => item.props.value === defaultValue);
+    if (!option) return "";
+    return option.props.value;
+  }
+  return "";
+};
+var RadioGroup = ({ ref, ...props }) => {
+  const {
+    label,
+    isDisabled = false,
+    isRequired,
+    isInvalid,
+    orientation = "vertical",
+    className,
+    errorMessage,
+    children,
+    defaultValue,
+    value,
+    isReadOnly,
+    name,
+    onChange,
+    autoStack = false,
+    ...rest
+  } = props;
+  const defaultSelected = getDefaultVal(children, value || defaultValue);
+  const [selected, setSelected] = useState19(defaultSelected);
+  const overflowsRef = useRef14({});
+  const [hasOverflow, setHasOverflow] = useState19(false);
+  useEffect14(() => {
+    if (value !== void 0) {
+      setSelected(value);
+    }
+  }, [value]);
+  const handleOverflow = useCallback6(
+    (radioValue, overflow) => {
+      overflowsRef.current = {
+        ...overflowsRef.current,
+        [radioValue]: overflow
+      };
+      const anyOverflow = Object.values(overflowsRef.current).some(
+        (o) => o.vertical || o.horizontal
+      );
+      if (anyOverflow !== hasOverflow) {
+        setHasOverflow(anyOverflow);
+      }
+    },
+    [hasOverflow]
+  );
+  const effectiveOrientation = autoStack && orientation === "horizontal" && hasOverflow ? "vertical" : orientation;
+  const validationClasses = useValidationClasses({ isInvalid });
+  const radioClasses = {
+    "--is-disabled": isDisabled,
+    "--is-required": typeof isRequired === "boolean" && isRequired,
+    "--is-optional": typeof isRequired === "boolean" && !isRequired,
+    [`--is-${effectiveOrientation}`]: true,
+    [className || ""]: true
+  };
+  const radioGroupClasses = classNames43(
+    "mobius",
+    "mobius-radio-group",
+    radioClasses,
+    validationClasses
+  );
+  const radioWrapperClasses = classNames43("mobius-radio__wrapper", {
+    [`--is-${effectiveOrientation}`]: true
+  });
+  const labelClasses = classNames43(radioClasses, validationClasses);
+  const errorMessageId = useId10();
+  const defaultNameAttrId = useId10();
+  const nameAttribute = name || defaultNameAttrId;
+  const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
+  const describedBy = spaceDelimitedList([
+    shouldErrorMessageShow,
+    props["aria-describedby"]
+  ]);
+  const labelId = useId10();
+  return /* @__PURE__ */ jsx52(
+    "div",
+    {
+      ...rest,
+      "aria-describedby": describedBy,
+      "aria-disabled": isDisabled,
+      "aria-errormessage": shouldErrorMessageShow,
+      "aria-invalid": isInvalid,
+      "aria-label": props["aria-label"],
+      "aria-labelledby": props["aria-labelledby"] || labelId,
+      "aria-orientation": effectiveOrientation,
+      "aria-readonly": isReadOnly,
+      "aria-required": isRequired,
+      ref,
+      className: radioGroupClasses,
+      role: "radiogroup",
+      children: /* @__PURE__ */ jsxs26(Stack, { gap: "xs", children: [
+        label && /* @__PURE__ */ jsx52(Label, { htmlFor: name, id: labelId, className: labelClasses, children: label }),
+        /* @__PURE__ */ jsx52("div", { className: radioWrapperClasses, children: Children8.map(children, (child) => {
+          if (isValidElement6(child)) {
+            const childValue = child.props.value;
+            return cloneElement10(
+              child,
+              {
+                orientation: effectiveOrientation,
+                groupDisabled: isDisabled,
+                name: nameAttribute,
+                selected: selected || defaultSelected,
+                // in case state does not update
+                setSelected,
+                isRequired,
+                "aria-describedby": describedBy,
+                onChange,
+                onOverflow: childValue ? (overflow) => handleOverflow(childValue, overflow) : void 0
+              }
+            );
+          }
+          return child;
+        }) }),
+        /* @__PURE__ */ jsx52(ErrorMessage, { id: errorMessageId, errorMessage })
+      ] })
+    }
+  );
+};
+RadioGroup.displayName = "RadioGroup";
+
+// src/components/Segment/SegmentGroup.tsx
+import classNames44 from "classnames/dedupe";
+import { jsx as jsx53 } from "react/jsx-runtime";
+var SegmentGroup = (props) => {
+  const { children, horizontal, gap, className, ...rest } = props;
+  const gapClass = gap ? `gap-${gap}` : "";
+  const classes = classNames44(
+    "mobius",
+    "mobius-segment-group",
+    className,
+    { "--is-horizontal": horizontal },
+    gapClass
+  );
+  return /* @__PURE__ */ jsx53("div", { className: classes, ...rest, children });
+};
+SegmentGroup.displayName = "SegmentGroup";
+
+// src/components/Segment/Segment.tsx
+import classNames45 from "classnames/dedupe";
+import { jsx as jsx54, jsxs as jsxs27 } from "react/jsx-runtime";
+var Segment = (props) => {
+  const { heading, children, colour, inverted, className, ...rest } = props;
+  const classes = classNames45(
+    "mobius",
+    "mobius-segment",
+    colour,
+    { inverted },
+    className
+  );
+  return /* @__PURE__ */ jsxs27("div", { className: classes, ...rest, children: [
+    heading && /* @__PURE__ */ jsx54("div", { className: "mobius-segment__heading", children: heading }),
+    children
+  ] });
+};
+Segment.displayName = "Segment";
+
+// src/components/Select/Select.tsx
+import { chevronDown as chevronDown2 } from "@simplybusiness/icons";
+import classNames46 from "classnames/dedupe";
+import { useId as useId11 } from "react";
+import { jsx as jsx55, jsxs as jsxs28 } from "react/jsx-runtime";
+var Select = ({ ref, ...props }) => {
+  const {
+    label,
+    onChange,
+    isInvalid,
+    errorMessage,
+    isDisabled = false,
+    isRequired,
+    ...otherProps
+  } = props;
+  const { labelProps, fieldProps } = useLabel({
+    label,
+    ...otherProps
+  });
+  const validationClasses = useValidationClasses({ isInvalid });
+  const stateClasses = {
+    "--is-disabled": isDisabled,
+    "--is-required": typeof isRequired === "boolean" && isRequired,
+    "--is-optional": typeof isRequired === "boolean" && !isRequired
+  };
+  const sharedClasses = classNames46(validationClasses, stateClasses);
+  const wrapperClasses = classNames46(
+    "mobius-select__wrapper",
+    sharedClasses,
+    otherProps.className
+  );
+  const selectClasses = classNames46(
+    "mobius-select",
+    sharedClasses,
+    otherProps.className
+  );
+  const labelClasses = classNames46(
+    "mobius-label",
+    sharedClasses,
+    otherProps.className
+  );
+  const iconClasses = classNames46("mobius-select__icon", sharedClasses);
+  const errorMessageId = useId11();
+  const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
+  const describedBy = spaceDelimitedList([
+    shouldErrorMessageShow,
+    props["aria-describedby"]
+  ]);
+  const handleChange = (e) => {
+    if (onChange) {
+      onChange(e);
+    }
+  };
+  return /* @__PURE__ */ jsxs28(Stack, { className: "mobius mobius-select__outer", gap: "xs", children: [
+    label && /* @__PURE__ */ jsx55(Label, { ...labelProps, className: labelClasses, children: label }),
+    /* @__PURE__ */ jsxs28("div", { className: wrapperClasses, children: [
+      /* @__PURE__ */ jsx55(
+        "select",
+        {
+          ...otherProps,
+          ...fieldProps,
+          ref,
+          multiple: false,
+          className: selectClasses,
+          disabled: isDisabled,
+          "aria-invalid": !!errorMessage,
+          "aria-describedby": describedBy,
+          "aria-required": isRequired,
+          required: isRequired,
+          onChange: handleChange
+        }
+      ),
+      /* @__PURE__ */ jsx55("span", { className: iconClasses, children: /* @__PURE__ */ jsx55(Icon, { icon: chevronDown2 }) })
+    ] }),
+    errorMessage && /* @__PURE__ */ jsx55(ErrorMessage, { id: errorMessageId, errorMessage })
+  ] });
+};
+Select.displayName = "Select";
+
+// src/components/Slider/Slider.tsx
+import classNames47 from "classnames/dedupe";
+import { useRef as useRef15, useState as useState20 } from "react";
+
+// src/components/Slider/helpers.ts
+import { useCallback as useCallback7, useMemo as useMemo5 } from "react";
+function numberFormatter(value, formatOptions, locale = navigator.languages?.[0] || "en-GB") {
+  if (!formatOptions) {
+    return value?.toString() || "";
+  }
+  return new Intl.NumberFormat(locale, formatOptions).format(+(value || 0));
+}
+
+// src/components/Slider/Slider.tsx
+import { jsx as jsx56, jsxs as jsxs29 } from "react/jsx-runtime";
+var Slider = (props) => {
+  const {
+    id,
+    className,
+    label,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    minValue,
+    maxValue,
+    step = 1,
+    defaultValue = 0,
+    value,
+    onChange,
+    onChangeEnd,
+    variant = "primary",
+    minLabel,
+    maxLabel,
+    formatOptions,
+    isDisabled = false
+  } = props;
+  const trackRef = useRef15(null);
+  const [currentValue, setCurrentValue] = useState20(
+    value || defaultValue || 0
+  );
+  const [isDragging, setIsDraggging] = useState20(false);
+  const { labelProps, fieldProps } = useLabel({
+    id,
+    label,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy
+  });
+  const formattedValue = numberFormatter(currentValue, formatOptions);
+  const classes = classNames47("mobius", "mobius-slider", className, {
+    "--is-disabled": isDisabled,
+    "--is-primary": variant === "primary",
+    "--is-secondary": variant === "secondary",
+    "--is-dragging": isDragging
+  });
+  const handleChange = (e) => {
+    const val = +e.target.value;
+    setCurrentValue(val);
+    if (onChange) {
+      onChange(val);
+    }
+  };
+  const handleChangeStart = () => {
+    setIsDraggging(true);
+  };
+  const handleChangeEnd = () => {
+    setIsDraggging(false);
+    if (onChangeEnd) {
+      onChangeEnd(currentValue);
+    }
+  };
+  return /* @__PURE__ */ jsxs29("div", { className: classes, children: [
+    /* @__PURE__ */ jsxs29("div", { className: "mobius-slider__label-wrapper", children: [
+      label && /* @__PURE__ */ jsx56(Label, { ...labelProps, children: label }),
+      label && /* @__PURE__ */ jsx56("output", { style: { flex: "1 0 auto", textAlign: "end" }, children: formattedValue })
+    ] }),
+    /* @__PURE__ */ jsx56("div", { ref: trackRef, className: "mobius-slider__track-wrapper", children: /* @__PURE__ */ jsx56(
+      "input",
+      {
+        className: "mobius-slider__track",
+        type: "range",
+        min: minValue,
+        max: maxValue,
+        value: currentValue,
+        step,
+        onChange: handleChange,
+        autoComplete: "off",
+        disabled: isDisabled,
+        onMouseDown: handleChangeStart,
+        onMouseUp: handleChangeEnd,
+        onKeyDown: handleChangeStart,
+        onKeyUp: handleChangeEnd,
+        ...fieldProps
+      }
+    ) }),
+    /* @__PURE__ */ jsxs29("div", { className: "mobius-slider__labels", children: [
+      /* @__PURE__ */ jsx56("div", { className: "mobius-slider__min-label", "data-testid": "min-label", children: minLabel }),
+      /* @__PURE__ */ jsx56("div", { className: "mobius-slider__max-label", "data-testid": "max-label", children: maxLabel })
+    ] })
+  ] });
+};
+
+// src/components/SVG/SVG.tsx
+import { Children as Children9 } from "react";
+import classNames48 from "classnames/dedupe";
+import { jsx as jsx57 } from "react/jsx-runtime";
+var SVG = ({ ref, ...props }) => {
+  const { children, className, ...otherProps } = props;
+  const classes = classNames48("mobius", "mobius-svg", className);
+  const svgNode = Children9.only(children);
+  const { children: svgChildren, viewBox, xmlns } = svgNode.props;
+  return /* @__PURE__ */ jsx57(
+    "svg",
+    {
+      viewBox,
+      xmlns,
+      ref,
+      ...otherProps,
+      className: classes,
+      children: svgChildren
+    }
+  );
+};
+SVG.displayName = "SVG";
+
+// src/components/Switch/Switch.tsx
+import {
+  useState as useState21,
+  useEffect as useEffect15
+} from "react";
+import classNames49 from "classnames/dedupe";
+import { jsx as jsx58, jsxs as jsxs30 } from "react/jsx-runtime";
+var Switch = ({ ref, ...props }) => {
+  const {
+    checked = false,
+    className,
+    onChange,
+    isDisabled = false,
+    ...otherProps
+  } = props;
+  const [enabled, setEnabled] = useState21(checked);
+  useEffect15(() => {
+    setEnabled(checked);
+  }, [checked]);
+  const classes = classNames49(
+    "mobius",
+    "mobius-switch",
+    {
+      "mobius-switch--checked": enabled,
+      "mobius-switch--disabled": isDisabled
+    },
+    className
+  );
+  const handleChange = (event) => {
+    setEnabled(!enabled);
+    if (onChange) {
+      onChange(event);
+    }
+  };
+  return /* @__PURE__ */ jsxs30("label", { ref, className: classes, children: [
+    /* @__PURE__ */ jsx58(VisuallyHidden, { children: /* @__PURE__ */ jsx58("span", { children: enabled ? "On" : "Off" }) }),
+    /* @__PURE__ */ jsx58(
+      "input",
+      {
+        type: "checkbox",
+        role: "switch",
+        checked: enabled,
+        onChange: handleChange,
+        disabled: isDisabled,
+        ...otherProps
+      }
+    ),
+    /* @__PURE__ */ jsx58("span", { className: "mobius-switch__slider" })
+  ] });
+};
+Switch.displayName = "Switch";
+
+// src/components/Table/Table.tsx
+import classNames50 from "classnames/dedupe";
+import { jsx as jsx59 } from "react/jsx-runtime";
+var Table = ({ ref, ...props }) => {
+  const classes = classNames50("mobius", "mobius-table", props.className);
+  return /* @__PURE__ */ jsx59("table", { ref, ...props, className: classes });
+};
+Table.displayName = "Table";
+
+// src/components/Table/Head.tsx
+import classNames51 from "classnames/dedupe";
+import { jsx as jsx60 } from "react/jsx-runtime";
+var Head = ({ ref, ...props }) => {
+  const classes = classNames51("mobius", "mobius-table__head", props.className);
+  return /* @__PURE__ */ jsx60("thead", { ref, ...props, className: classes });
+};
+Head.displayName = "Table.Head";
+
+// src/components/Table/Body.tsx
+import classNames52 from "classnames/dedupe";
+import { jsx as jsx61 } from "react/jsx-runtime";
+var Body = ({ ref, ...props }) => {
+  const classes = classNames52("mobius", "mobius-table__body", props.className);
+  return /* @__PURE__ */ jsx61("tbody", { ref, ...props, className: classes });
+};
+Body.displayName = "Table.Body";
+
+// src/components/Table/Foot.tsx
+import classNames53 from "classnames/dedupe";
+import { jsx as jsx62 } from "react/jsx-runtime";
+var Foot = ({ ref, ...props }) => {
+  const classes = classNames53("mobius", "mobius-table__foot", props.className);
+  return /* @__PURE__ */ jsx62("tfoot", { ref, ...props, className: classes });
+};
+Foot.displayName = "Table.Foot";
+
+// src/components/Table/Row.tsx
+import classNames54 from "classnames/dedupe";
+import { jsx as jsx63 } from "react/jsx-runtime";
+var Row = ({ ref, ...props }) => {
+  const classes = classNames54("mobius", "mobius-table__row", props.className);
+  return /* @__PURE__ */ jsx63("tr", { ref, ...props, className: classes });
+};
+Row.displayName = "Table.Row";
+
+// src/components/Table/HeaderCell.tsx
+import classNames55 from "classnames/dedupe";
+import { jsx as jsx64 } from "react/jsx-runtime";
+var HeaderCell = ({ ref, ...props }) => {
+  const classes = classNames55(
+    "mobius",
+    "mobius-table__head-cell",
+    props.className
+  );
+  return /* @__PURE__ */ jsx64("th", { ...props, ref, className: classes });
+};
+HeaderCell.displayName = "Table.HeaderCell";
+
+// src/components/Table/Cell.tsx
+import classNames56 from "classnames/dedupe";
+import { jsx as jsx65 } from "react/jsx-runtime";
+var Cell = ({ ref, ...props }) => {
+  const classes = classNames56(
+    "mobius",
+    "mobius-table__body-cell",
+    props.className
+  );
+  return /* @__PURE__ */ jsx65("td", { ref, ...props, className: classes });
+};
+Cell.displayName = "Table.Cell";
+
+// src/components/Table/index.tsx
+var Table2 = Object.assign(Table, {
+  Head,
+  Body,
+  Foot,
+  Row,
+  HeaderCell,
+  Cell
+});
+Table2.displayName = "Table";
+
+// src/components/Text/Text.tsx
+import classNames57 from "classnames/dedupe";
+import { jsx as jsx66 } from "react/jsx-runtime";
+var getElementType = (variant, elementType) => {
+  if (variant) {
+    return ["h1", "h2", "h3", "h4"].includes(variant) ? variant : "p";
+  }
+  return elementType || "p";
+};
+var Text = ({ ref, elementType: Component = "p", ...props }) => {
+  const { variant, className, spacing, ...otherProps } = props;
+  const elementType = getElementType(variant, Component);
+  const variantType = variant || elementType;
+  const classes = classNames57(
+    "mobius",
+    "mobius-text",
+    { [`--is-${variantType}`]: variantType },
+    { [`--has-line-height-${spacing}`]: spacing },
+    className
+  );
+  return /* @__PURE__ */ jsx66(Component, { ref, ...otherProps, className: classes });
+};
+Text.displayName = "Text";
+
+// src/components/TextArea/TextArea.tsx
+import classNames59 from "classnames/dedupe";
+
+// src/components/TextAreaInput/TextAreaInput.tsx
+import classNames58 from "classnames/dedupe";
+import { jsx as jsx67 } from "react/jsx-runtime";
+var TextAreaInput = ({ ref, ...props }) => {
+  const { isSelected, isDisabled, isReadOnly, isRequired, ...otherProps } = props;
+  const classes = classNames58(
+    "mobius",
+    "mobius-text-area__input",
+    {
+      "--is-disabled": isDisabled,
+      "--is-selected": isSelected,
+      "--is-required": isRequired
+    },
+    otherProps.className
+  );
+  return /* @__PURE__ */ jsx67(
+    "textarea",
+    {
+      ref,
+      ...otherProps,
+      required: isRequired,
+      readOnly: isReadOnly,
+      className: classes
+    }
+  );
+};
+TextAreaInput.displayName = "TextAreaInput";
+
+// src/components/TextArea/TextArea.tsx
+import { jsx as jsx68, jsxs as jsxs31 } from "react/jsx-runtime";
+var TextArea = ({ ref, ...props }) => {
+  const {
+    isDisabled,
+    className,
+    errorMessage,
+    label,
+    isInvalid,
+    ...otherProps
+  } = props;
+  const { inputProps, labelProps, errorMessageProps } = useTextField(props);
+  const classes = classNames59("mobius", "mobius-text-area", className);
+  const validationClasses = useValidationClasses({ isInvalid });
+  const inputClasses = classNames59("mobius-text-area__input", validationClasses);
+  const labelClasses = classNames59(
+    {
+      "--is-disabled": isDisabled
+    },
+    validationClasses
+  );
+  return /* @__PURE__ */ jsxs31(Stack, { className: classes, gap: "xs", children: [
+    label && /* @__PURE__ */ jsx68(Label, { ...labelProps, className: labelClasses, children: props.label }),
+    /* @__PURE__ */ jsx68(
+      TextAreaInput,
+      {
+        ...otherProps,
+        ...inputProps,
+        ref,
+        className: inputClasses,
+        isDisabled,
+        "aria-invalid": errorMessage != null
+      }
+    ),
+    /* @__PURE__ */ jsx68(ErrorMessage, { ...errorMessageProps, errorMessage })
+  ] });
+};
+TextArea.displayName = "TextArea";
+
+// src/components/TextOrHTML/TextOrHTML.tsx
+import { useMemo as useMemo6 } from "react";
+import { jsx as jsx69 } from "react/jsx-runtime";
+var TextOrHTML = ({
+  ref,
+  text,
+  htmlClassName,
+  htmlElementType = "span",
+  textWrapper = false,
+  ...textProps
+}) => {
+  const DangerousComponent = htmlElementType;
+  const dangerousHTML = useMemo6(() => ({ __html: text }), [text]);
+  const dangerousElement = /* @__PURE__ */ jsx69(
+    DangerousComponent,
+    {
+      className: htmlClassName,
+      dangerouslySetInnerHTML: dangerousHTML
+    }
+  );
+  if (textWrapper) {
+    return /* @__PURE__ */ jsx69(Text, { ref, ...textProps, children: dangerousElement });
+  }
+  return dangerousElement;
+};
+TextOrHTML.displayName = "TextOrHTML";
+
+// src/components/Title/Title.tsx
+import classNames60 from "classnames/dedupe";
+import { jsx as jsx70, jsxs as jsxs32 } from "react/jsx-runtime";
+var Title = ({ ref, ...props }) => {
+  const {
+    elementType: Element = "div",
+    title,
+    description,
+    ...otherProps
+  } = props;
+  const classes = classNames60("mobius", "mobius-title", otherProps.className);
+  const headerClasses = classNames60("mobius", "mobius-title__header");
+  const contentClasses = classNames60("mobius", "mobius-title__description");
+  const containerClasses = classNames60("mobius", "mobius-title__container");
+  return /* @__PURE__ */ jsx70(Element, { ref, ...otherProps, className: classes, children: /* @__PURE__ */ jsxs32(Flex, { flexDirection: "column", className: containerClasses, children: [
+    /* @__PURE__ */ jsx70("p", { className: headerClasses, children: title }),
+    /* @__PURE__ */ jsx70("p", { className: contentClasses, children: description })
+  ] }) });
+};
+Title.displayName = "Title";
+
+// src/components/Toast/Toast.tsx
+import {
+  circleCheck,
+  circleExclamation,
+  circleInfo as circleInfo2,
+  cross as cross4,
+  triangleExclamation
+} from "@simplybusiness/icons";
+import classNames61 from "classnames/dedupe";
+import { toast as sonnerToast } from "sonner";
+
+// src/components/Toast/state.ts
+var toastState = {
+  showCloseButton: true
+};
+
+// src/components/Toast/Toast.tsx
+import { jsx as jsx71, jsxs as jsxs33 } from "react/jsx-runtime";
+var variantIcons = {
+  info: circleInfo2,
+  success: circleCheck,
+  warning: triangleExclamation,
+  error: circleExclamation
+};
+var variantColors = {
+  info: "var(--color-info)",
+  success: "var(--color-valid)",
+  warning: "var(--color-warning)",
+  error: "var(--color-error)"
+};
+var ToastIcon = ({ variant }) => /* @__PURE__ */ jsx71("span", { className: "mobius-toast__icon", children: /* @__PURE__ */ jsx71(Icon, { icon: variantIcons[variant], color: variantColors[variant] }) });
+var CloseIcon = () => /* @__PURE__ */ jsx71("span", { className: "mobius-toast__close-icon", children: /* @__PURE__ */ jsx71(Icon, { icon: cross4 }) });
+var ToastContent = ({
+  toastId,
+  variant,
+  title,
+  description,
+  action,
+  cancel,
+  showCloseButton = toastState.showCloseButton
+}) => /* @__PURE__ */ jsxs33("div", { className: classNames61("mobius", "mobius-toast", `--${variant}`), children: [
+  /* @__PURE__ */ jsx71(ToastIcon, { variant }),
+  /* @__PURE__ */ jsxs33("div", { className: "mobius-toast__body", children: [
+    /* @__PURE__ */ jsxs33("div", { className: "mobius-toast__content", children: [
+      title && /* @__PURE__ */ jsx71("div", { className: "mobius-toast__title", children: title }),
+      description && /* @__PURE__ */ jsx71("div", { className: "mobius-toast__description", children: description })
+    ] }),
+    (action || cancel) && /* @__PURE__ */ jsxs33("div", { className: "mobius-toast__actions", children: [
+      cancel && /* @__PURE__ */ jsx71(
+        "button",
+        {
+          type: "button",
+          className: "mobius-toast__cancel",
+          onClick: () => {
+            cancel.onClick?.();
+            sonnerToast.dismiss(toastId);
+          },
+          children: cancel.label
+        }
+      ),
+      action && /* @__PURE__ */ jsx71(
+        "button",
+        {
+          type: "button",
+          className: "mobius-toast__action",
+          onClick: () => {
+            action.onClick();
+            sonnerToast.dismiss(toastId);
+          },
+          children: action.label
+        }
+      )
+    ] })
+  ] }),
+  showCloseButton && /* @__PURE__ */ jsx71(
+    "button",
+    {
+      type: "button",
+      className: "mobius-toast__close",
+      onClick: () => sonnerToast.dismiss(toastId),
+      "aria-label": "Close",
+      children: /* @__PURE__ */ jsx71(CloseIcon, {})
+    }
+  )
+] });
+var createCustomToast = (message, variant, options) => sonnerToast.custom(
+  (id) => /* @__PURE__ */ jsx71(
+    ToastContent,
+    {
+      toastId: id,
+      variant,
+      title: options?.title,
+      description: options?.description ?? message,
+      action: options?.action,
+      cancel: options?.cancel,
+      showCloseButton: options?.showCloseButton
+    }
+  ),
+  {
+    duration: options?.duration,
+    onDismiss: options?.onDismiss,
+    onAutoClose: options?.onAutoClose
+  }
+);
+var toast = {
+  /** Show an info toast */
+  info: (message, options) => createCustomToast(message, "info", options),
+  /** Show a success toast */
+  success: (message, options) => createCustomToast(message, "success", options),
+  /** Show a warning toast */
+  warning: (message, options) => createCustomToast(message, "warning", options),
+  /** Show an error toast */
+  error: (message, options) => createCustomToast(message, "error", options),
+  /** Dismiss a specific toast by ID or all toasts */
+  dismiss: (toastId) => sonnerToast.dismiss(toastId)
+};
+
+// src/components/Toast/Toaster.tsx
+import { useEffect as useEffect16 } from "react";
+import { Toaster as SonnerToaster } from "sonner";
+import { jsx as jsx72 } from "react/jsx-runtime";
+var Toaster = ({
+  position = "top-right",
+  closeButton = true,
+  expand = false,
+  duration = 4e3,
+  visibleToasts = 3,
+  gap = 8
+}) => {
+  useEffect16(() => {
+    toastState.showCloseButton = closeButton;
+  }, [closeButton]);
+  return /* @__PURE__ */ jsx72(
+    SonnerToaster,
+    {
+      position,
+      closeButton: false,
+      expand,
+      duration,
+      visibleToasts,
+      gap
+    }
+  );
+};
+Toaster.displayName = "Toaster";
+
+// src/components/Trust/Trust.tsx
+import classNames62 from "classnames/dedupe";
+import { useEffect as useEffect17, useRef as useRef16, useState as useState22 } from "react";
+
+// src/components/Trust/constants.ts
+var REQUIRED_TRUSTPILOT_CLASS_NAME = "trustpilot-widget";
+var SIMPLYBUSINESS_UNIT_ID = "5ca35a3da72b330001954cef";
+var SIMPLYBUSINESS_UNIT_IDS = {
+  "en-US": "5ca35a3da72b330001954cef",
+  // US business unit ID
+  "en-GB": "56b1db010000ff0005887125"
+  // UK business unit ID
+};
+var TRUSTPILOT_LINKS = {
+  "en-US": "https://www.trustpilot.com/review/simplybusiness.com",
+  "en-GB": "https://www.trustpilot.com/review/simplybusiness.co.uk"
+};
+var TRUSTPILOT_TEMPLATE_IDS = {
+  "micro-combo": "5419b6ffb0d04a076446a9af",
+  mini: "53aa8807dec7e10d38f59f32",
+  carousel: "53aa8912dec7e10d38f59f36",
+  horizontal: "5406e65db0d04a09e042d5fc",
+  "micro-star": "5419b732fbfb950b10de65e5"
+};
+var TRUSTPILOT_WIDGET = {
+  // Keys based on actual widget names
+  // https://support.trustpilot.com/hc/en-us/articles/360019826379-TrustBox-widget-overview
+  "micro-combo": {
+    templateId: TRUSTPILOT_TEMPLATE_IDS["micro-combo"],
+    className: "--is-variant-micro-combo",
+    styles: {
+      height: "25px"
+    }
+  },
+  mini: {
+    templateId: TRUSTPILOT_TEMPLATE_IDS["mini"],
+    className: "--is-variant-mini",
+    styles: {
+      width: "300px",
+      height: "150px"
+    }
+  },
+  carousel: {
+    templateId: TRUSTPILOT_TEMPLATE_IDS["carousel"],
+    className: "--is-variant-carousel",
+    styles: {
+      height: "150px"
+    }
+  },
+  horizontal: {
+    templateId: TRUSTPILOT_TEMPLATE_IDS["horizontal"],
+    className: "--is-variant-horizontal",
+    styles: {
+      height: "28px"
+    }
+  },
+  "micro-star": {
+    templateId: TRUSTPILOT_TEMPLATE_IDS["micro-star"],
+    className: "--is-variant-micro-star",
+    styles: {
+      height: "24px"
+    }
+  }
+};
+
+// src/components/Trust/Trust.tsx
+import { jsx as jsx73 } from "react/jsx-runtime";
+var Trust = ({ ref, ...props }) => {
+  const {
+    elementType: Element = "div",
+    variant,
+    theme,
+    locale,
+    height,
+    width,
+    stars,
+    className
+  } = props;
+  const [isMounted, setIsMounted] = useState22(false);
+  const trustRef = useRef16(null);
+  const {
+    templateId,
+    className: variantClassName,
+    styles
+  } = TRUSTPILOT_WIDGET[variant];
+  const link = TRUSTPILOT_LINKS[locale];
+  const businessUnitId = SIMPLYBUSINESS_UNIT_IDS[locale] || SIMPLYBUSINESS_UNIT_ID;
+  const dataProps = {
+    "data-businessunit-id": businessUnitId,
+    "data-locale": locale,
+    "data-template-id": templateId,
+    "data-theme": theme,
+    "data-style-width": width || "100%",
+    "data-style-height": height,
+    "data-stars": stars
+  };
+  const classes = classNames62(
+    "mobius",
+    "mobius-trust",
+    REQUIRED_TRUSTPILOT_CLASS_NAME,
+    {
+      [`--is-${theme}`]: theme,
+      [variantClassName]: variant
+    },
+    className
+  );
+  useEffect17(() => {
+    const hasTrustpilotLoaded = trustRef.current && window?.Trustpilot && window?.Trustpilot.loadFromElement;
+    if (isMounted && hasTrustpilotLoaded) {
+      window.Trustpilot.loadFromElement(trustRef.current, true);
+    }
+  }, [isMounted]);
+  useEffect17(() => {
+    setIsMounted(true);
+  }, []);
+  if (!isMounted) return /* @__PURE__ */ jsx73("div", { style: styles });
+  return /* @__PURE__ */ jsx73(
+    Element,
+    {
+      ref: mergeRefs([trustRef, ref]),
+      className: classes,
+      style: styles,
+      ...dataProps,
+      children: /* @__PURE__ */ jsx73(
+        "a",
+        {
+          href: link,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "mobius-trust__link",
+          children: "Trustpilot"
+        }
+      )
+    }
+  );
+};
+
+// src/components/ExpandableText/ExpandableText.tsx
+import classNames63 from "classnames/dedupe";
+import { useEffect as useEffect18, useId as useId12, useRef as useRef17, useState as useState23 } from "react";
+import { jsx as jsx74, jsxs as jsxs34 } from "react/jsx-runtime";
+var ExpandableText = ({ ref, ...props }) => {
+  const {
+    text,
+    maxLines = 3,
+    breakpoint,
+    showText = "Read more",
+    hideText = "Read less",
+    className,
+    textProps = {},
+    accordionProps = {},
+    onToggle,
+    ...otherProps
+  } = props;
+  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;
+  useEffect18(() => {
+    if (!shouldCollapse || !textRef.current) {
+      setIsCollapsed(false);
+      return;
+    }
+    const element = textRef.current;
+    const isOverflowing = element.scrollHeight > element.clientHeight;
+    setIsCollapsed(isOverflowing);
+  }, [text, shouldCollapse, maxLines]);
+  if (breakpoint && !shouldCollapse) {
+    return /* @__PURE__ */ jsx74("div", { ref, className, ...otherProps, children: /* @__PURE__ */ jsx74(TextOrHTML, { text, textWrapper: true, ...textProps }) });
+  }
+  const handleAccordionChange = (expanded) => {
+    setIsExpanded(expanded);
+    onToggle?.(expanded);
+  };
+  const classes = classNames63("mobius-expandable-text", className);
+  const textContainerClasses = classNames63("mobius-expandable-text__content", {
+    "mobius-expandable-text__content--collapsed": !isExpanded
+  });
+  const textContainerStyle = {
+    "--line-clamp": maxLines
+  };
+  return /* @__PURE__ */ jsxs34(
+    "div",
+    {
+      ref,
+      className: classes,
+      "data-testid": "expandable-text",
+      ...otherProps,
+      children: [
+        /* @__PURE__ */ jsx74(
+          "div",
+          {
+            ref: textRef,
+            className: textContainerClasses,
+            style: textContainerStyle,
+            "data-testid": "expandable-text-content",
+            "aria-describedby": isCollapsed ? expandButtonId : void 0,
+            children: /* @__PURE__ */ jsx74(TextOrHTML, { elementType: "span", textWrapper: true, text, ...textProps })
+          }
+        ),
+        isCollapsed && /* @__PURE__ */ jsx74(
+          Accordion,
+          {
+            showText,
+            hideText,
+            headerPosition: "bottom",
+            onChange: handleAccordionChange,
+            onClick: (e) => {
+              e?.stopPropagation();
+            },
+            id: expandButtonId,
+            ...accordionProps
+          }
+        )
+      ]
+    }
+  );
+};
+ExpandableText.displayName = "ExpandableText";
+
+// src/components/MaskedField/index.tsx
+import loadable from "@loadable/component";
+import { jsx as jsx75 } from "react/jsx-runtime";
+var LoadableMaskedField = loadable(() => import("./MaskedField-FRCJBGMX.js"), {
+  resolveComponent: (mod) => mod.MaskedField
+});
+function MaskedField(props) {
+  const {
+    mask: _mask,
+    useMaskedValue: _useMaskedValue,
+    "data-testid": _dataTestId,
+    ref: forwardedRef,
+    ...textFieldProps
+  } = props;
+  return /* @__PURE__ */ jsx75(
+    LoadableMaskedField,
+    {
+      ...props,
+      fallback: /* @__PURE__ */ jsx75(
+        TextField,
+        {
+          ...textFieldProps,
+          ref: forwardedRef,
+          type: "text",
+          isDisabled: true,
+          isReadOnly: true
+        }
+      )
+    }
+  );
+}
+MaskedField.displayName = "MaskedField";
+
+export {
+  Flex,
+  Icon,
+  Accordion,
+  Divider,
+  AccordionList,
+  DEFAULT_BREAKPOINTS,
+  useBreakpoint,
+  useButton,
+  useDialogPolyfill,
+  useDialog,
+  useLabel,
+  useTextField,
+  useValidationClasses,
+  ErrorMessage,
+  Label,
+  Stack,
+  TextField,
+  VisuallyHidden,
+  buildOptionTestId,
+  Combobox,
+  AddressLookup,
+  LoqateAddressLookupService,
+  Alert,
+  Box,
+  Breadcrumbs,
+  BreadcrumbItem,
+  Button,
+  Checkbox,
+  CheckboxGroup,
+  Container,
+  convertToDateFormat,
+  isValidDate,
+  MIN_MAX_ERROR,
+  DateField,
+  useDrawer,
+  Drawer2 as Drawer,
+  DropdownMenu2 as DropdownMenu,
+  Fieldset,
+  Grid2 as Grid,
+  Image,
+  Link,
+  LinkButton,
+  List,
+  ListItem,
+  LoadingIndicator,
+  Logo,
+  useModal,
+  Modal2 as Modal,
+  NumberField,
+  Option2 as Option,
+  PasswordField,
+  Popover,
+  Progress,
+  Radio,
+  RadioGroup,
+  SegmentGroup,
+  Segment,
+  Select,
+  Slider,
+  SVG,
+  Switch,
+  Table2 as Table,
+  Text,
+  TextAreaInput,
+  TextArea,
+  TextOrHTML,
+  Title,
+  toast,
+  Toaster,
+  Trust,
+  ExpandableText,
+  MaskedField
+};
+//# sourceMappingURL=chunk-YUDNS4SZ.js.map