@simplybusiness/mobius 5.25.2 → 5.26.0

package/dist/esm/index.js

@@ -1,6 +1,4170 @@
-"use client";
-export * from "./components";
-export * from "./hooks";
-export * from "./types";
+// src/components/Accordion/Accordion.tsx
+import { chevronDown } from "@simplybusiness/icons";
+import classNames3 from "classnames/dedupe";
+import { forwardRef as forwardRef2, useEffect as useEffect2, useState as useState2 } from "react";
 
-//# sourceMappingURL=index.js.map
+// src/hooks/usePrefersReducedMotion/usePrefersReducedMotion.tsx
+import { useEffect, useState } from "react";
+function usePrefersReducedMotion() {
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setPrefersReducedMotion(mediaQuery.matches);
+    const listener = (event) => {
+      setPrefersReducedMotion(event.matches);
+    };
+    mediaQuery.addEventListener("change", listener);
+    return () => {
+      mediaQuery.removeEventListener("change", listener);
+    };
+  }, []);
+  return prefersReducedMotion;
+}
+
+// src/components/Flex/Flex.tsx
+import { forwardRef } from "react";
+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 = forwardRef(
+  (props, ref) => {
+    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({
+  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",
+    {
+      "aria-hidden": "true",
+      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/Accordion.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var AccordionLink = ({
+  text,
+  elementType: LinkElement = "span",
+  toggle,
+  onClick,
+  headerChildren,
+  ariaExpanded
+}) => {
+  const linkClasses = classNames3("mobius-accordion__link", {
+    "--is-open": ariaExpanded
+  });
+  const iconClasses = classNames3("mobius-accordion__link-icon", {
+    "--is-open": ariaExpanded
+  });
+  const handleOnClick = () => {
+    if (onClick) {
+      onClick();
+    }
+    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",
+            {
+              className: linkClasses,
+              onClick: handleOnClick,
+              onKeyDown: handleKeyDown,
+              role: "button",
+              tabIndex: 0,
+              "aria-expanded": !!ariaExpanded,
+              children: [
+                /* @__PURE__ */ jsx3(LinkElement, { className: "mobius-accordion__link-text", children: text }),
+                /* @__PURE__ */ jsx3(Icon, { icon: chevronDown, className: iconClasses })
+              ]
+            }
+          ),
+          headerChildren
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: linkClasses,
+      onClick: handleOnClick,
+      onKeyDown: handleKeyDown,
+      role: "button",
+      tabIndex: 0,
+      "aria-expanded": !!ariaExpanded,
+      children: [
+        /* @__PURE__ */ jsx3(LinkElement, { className: "mobius-accordion__link-text", children: text }),
+        /* @__PURE__ */ jsx3(Icon, { icon: chevronDown, className: iconClasses })
+      ]
+    }
+  );
+};
+var Accordion = forwardRef2((props, ref) => {
+  const {
+    showText = "See more",
+    hideText = "See less",
+    headerPosition = "top",
+    startOpen = false,
+    linkElementType,
+    onOpen,
+    onClose,
+    onChange = () => {
+    },
+    headerChildren,
+    ...rest
+  } = props;
+  const [accordionState, setAccordionState] = useState2({
+    open: true,
+    withAnimation: false
+  });
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const containerClasses = classNames3(
+    "mobius",
+    "mobius-accordion",
+    props.className,
+    {
+      "--should-animate": accordionState.withAnimation && !prefersReducedMotion,
+      "--is-open": accordionState.open
+    }
+  );
+  const contentContainerClasses = classNames3(
+    "mobius-accordion__content-container",
+    {
+      "--is-open": accordionState.open
+    }
+  );
+  const contentClasses = classNames3("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
+    });
+  };
+  useEffect2(() => {
+    setAccordionState({
+      open: startOpen,
+      withAnimation: false
+    });
+  }, [startOpen]);
+  return /* @__PURE__ */ jsxs2("div", { ref, ...rest, className: containerClasses, children: [
+    headerPosition === "top" && /* @__PURE__ */ jsx3(
+      AccordionLink,
+      {
+        text: linkText,
+        elementType: linkElementType,
+        toggle: handleChange,
+        ariaExpanded: accordionState.open,
+        headerChildren
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className: contentContainerClasses,
+        "aria-hidden": !accordionState.open,
+        children: /* @__PURE__ */ jsx3("div", { className: contentClasses, children: props.children })
+      }
+    ),
+    headerPosition === "bottom" && /* @__PURE__ */ jsx3(
+      AccordionLink,
+      {
+        text: linkText,
+        toggle: handleChange,
+        ariaExpanded: accordionState.open,
+        headerChildren
+      }
+    )
+  ] });
+});
+Accordion.displayName = "Accordion";
+
+// src/components/AddressLookup/AddressLookup.tsx
+import { search } from "@simplybusiness/icons";
+import { forwardRef as forwardRef8, useCallback as useCallback4, useState as useState10 } from "react";
+
+// src/components/Combobox/Combobox.tsx
+import classNames12 from "classnames/dedupe";
+import { forwardRef as forwardRef7, useEffect as useEffect14, useId as useId3, useRef as useRef7, useState as useState9 } from "react";
+
+// src/hooks/useBodyScrollLock/useBodyScrollLock.ts
+import { useEffect as useEffect3 } from "react";
+function useBodyScrollLock({
+  enabled = true
+} = {}) {
+  function disableScrollLock() {
+    document.body.style.removeProperty("overflow");
+    document.body.style.removeProperty("scrollbar-gutter");
+    document.documentElement.style.removeProperty("scrollbar-gutter");
+  }
+  function enableScrollLock() {
+    document.body.style.overflow = "hidden";
+    document.body.style.scrollbarGutter = "stable";
+    document.documentElement.style.scrollbarGutter = "stable";
+  }
+  useEffect3(() => {
+    if (enabled) {
+      enableScrollLock();
+    } else {
+      disableScrollLock();
+    }
+    return () => {
+      disableScrollLock();
+    };
+  }, [enabled]);
+}
+
+// src/hooks/useBreakpoint/useBreakpoint.tsx
+import debounce from "lodash.debounce";
+import { useCallback, useEffect as useEffect4, 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 getBreakpoint = (breakpoints, windowWidth) => {
+  const closest = breakpoints.findIndex(
+    (breakpoint) => breakpoint.value >= windowWidth + 1
+  );
+  const smallest = breakpoints[0];
+  const largest = breakpoints[breakpoints.length - 1];
+  const match = breakpoints[closest - 1];
+  if (closest === 0) return smallest;
+  if (closest === -1) return largest;
+  return match;
+};
+var useBreakpoint = (customBreakpoints) => {
+  const window2 = globalThis?.window || void 0;
+  const isClientSide = typeof window2 !== "undefined";
+  const breakpoints = customBreakpoints || DEFAULT_BREAKPOINTS;
+  const defaultBreakpoint = breakpoints[0];
+  const [windowWidth, setWindowWidth] = useState3(
+    isClientSide ? window2.innerWidth : defaultBreakpoint.value
+  );
+  const [currentBreakpoint, setCurrentBreakpoint] = useState3(defaultBreakpoint);
+  const handleResize = () => {
+    setWindowWidth(window2.innerWidth);
+  };
+  useEffect4(() => {
+    if (!windowWidth || breakpoints.length === 0) {
+      setCurrentBreakpoint(breakpoints[0]);
+      return;
+    }
+    const newBreakpoint = getBreakpoint(breakpoints, windowWidth);
+    if (currentBreakpoint.size === newBreakpoint?.size) return;
+    setCurrentBreakpoint(newBreakpoint);
+  }, [currentBreakpoint, windowWidth, breakpoints]);
+  useEffect4(() => {
+    window2.addEventListener("resize", debounce(handleResize, 200), {
+      passive: true
+    });
+    return () => window2.removeEventListener("resize", handleResize);
+  }, [window2]);
+  const up = useCallback(
+    (size) => {
+      const sizeIndex = breakpoints.findIndex((item) => item.size === size);
+      if (sizeIndex === -1) {
+        return false;
+      }
+      const currentIndex = breakpoints.findIndex(
+        (item) => item.size === currentBreakpoint.size
+      );
+      return currentIndex >= sizeIndex;
+    },
+    [currentBreakpoint, breakpoints]
+  );
+  const down = useCallback(
+    (size) => {
+      const sizeIndex = breakpoints.findIndex((item) => item.size === size);
+      if (sizeIndex === -1) {
+        return true;
+      }
+      const currentIndex = breakpoints.findIndex(
+        (item) => item.size === currentBreakpoint.size
+      );
+      return currentIndex <= sizeIndex;
+    },
+    [currentBreakpoint, breakpoints]
+  );
+  return {
+    breakpoint: isClientSide ? currentBreakpoint : defaultBreakpoint,
+    up,
+    down
+  };
+};
+
+// src/hooks/useButton/useButton.tsx
+import { useCallback as useCallback2 } from "react";
+function useButton({
+  elementType = "button",
+  type = "button",
+  isDisabled = false,
+  href,
+  target,
+  rel,
+  role,
+  name,
+  value,
+  onClick,
+  onPress
+}) {
+  const realOnClick = useCallback2(
+    (event) => {
+      if (isDisabled) {
+        return;
+      }
+      onClick?.(event);
+      onPress?.(event);
+    },
+    [isDisabled, onClick, onPress]
+  );
+  function getRole() {
+    if (role) {
+      return role;
+    }
+    if (elementType === "a") {
+      return void 0;
+    }
+    return "button";
+  }
+  const extraProps = elementType === "button" ? { type } : {
+    role: getRole()
+  };
+  return {
+    buttonProps: {
+      href: elementType === "a" ? href : void 0,
+      target: elementType === "a" ? target : void 0,
+      rel: elementType === "a" ? rel : void 0,
+      tabIndex: isDisabled ? -1 : 0,
+      disabled: isDisabled || void 0,
+      "aria-disabled": isDisabled || void 0,
+      name: elementType === "input" || elementType === "button" ? name : void 0,
+      value: elementType === "input" || elementType === "button" ? value : void 0,
+      ...extraProps,
+      onClick: realOnClick
+    }
+  };
+}
+
+// src/hooks/useDebouncedValue/useDebouncedValue.tsx
+import { useEffect as useEffect5, useState as useState4 } from "react";
+function useDebouncedValue(value, delay = 0) {
+  const [debouncedValue, setDebouncedValue] = useState4(value);
+  useEffect5(() => {
+    let timeout = null;
+    if (delay === 0) {
+      setDebouncedValue(value);
+    } else {
+      timeout = setTimeout(() => {
+        setDebouncedValue(value);
+      }, delay);
+    }
+    return () => {
+      if (timeout) {
+        clearTimeout(timeout);
+        timeout = null;
+      }
+    };
+  }, [value, delay]);
+  return debouncedValue;
+}
+
+// src/hooks/useDeprecationWarning/useDeprecationWarning.ts
+import { useRef } from "react";
+var useDeprecationWarning = (props) => {
+  const hasWarned = useRef(false);
+  const deprecatedProps = Object.entries(props).reduce(
+    (acc, [key, value]) => {
+      if (value) {
+        acc.push(key);
+      }
+      return acc;
+    },
+    []
+  );
+  const noDeprecatedProps = deprecatedProps.length === 0;
+  if (noDeprecatedProps) {
+    return;
+  }
+  if (!hasWarned.current) {
+    deprecatedProps.forEach((prop) => {
+      console.warn(
+        `Deprecation warning: Mobius no longer supports the prop '${prop}'. Please refer to the documentation for more information.`
+      );
+    });
+    hasWarned.current = true;
+  }
+};
+
+// src/hooks/useDialog/useDialog.ts
+import { useCallback as useCallback3, useEffect as useEffect7, useState as useState6 } from "react";
+
+// src/hooks/useDialogPolyfill/useDialogPolyfill.ts
+import { useEffect as useEffect6, useRef as useRef2, useState as useState5 } from "react";
+var useDialogPolyfill = () => {
+  const [hasDialogSupport, setHasDialogSupport] = useState5(false);
+  const hasAlreadyLoaded = useRef2(false);
+  useEffect6(() => {
+    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] = useState6(false);
+  const shouldTransition = hasDialogSupport && transition.isEnabled;
+  const { polyfillDialog } = useDialogPolyfill();
+  useEffect7(() => {
+    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]
+  );
+  useEffect7(() => {
+    async function toggleDialog() {
+      if (isOpen && !ref.current?.open) {
+        await polyfillDialog(ref);
+        open();
+        setTimeout(() => {
+          ref.current?.classList.add(TRANSITION_CLASS_NAME);
+        }, 0);
+      } else if (!isOpen && ref.current?.open) {
+        handleClose();
+      }
+    }
+    void toggleDialog();
+  }, [handleClose, isOpen, open, ref, polyfillDialog]);
+  return {
+    open,
+    close: handleClose
+  };
+};
+
+// src/hooks/useLabel/useLabel.tsx
+import { useId, useRef as useRef3 } from "react";
+function useLabel({
+  id: providedId,
+  label,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  labelElementType = "label"
+}) {
+  let labelProps = {};
+  let fieldProps = {};
+  const hasWarnedAboutMissingLabels = useRef3(false);
+  const fallbackId = useId();
+  const id = providedId || fallbackId;
+  const labelId = useId();
+  if (label) {
+    ariaLabelledby = ariaLabelledby ? `${labelId} ${ariaLabelledby}` : labelId;
+    labelProps = {
+      id: labelId,
+      htmlFor: labelElementType === "label" ? id : void 0
+    };
+  } else if (!ariaLabelledby && !ariaLabel && !hasWarnedAboutMissingLabels.current) {
+    hasWarnedAboutMissingLabels.current = true;
+    console.warn(
+      "If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility"
+    );
+  }
+  fieldProps = {
+    id,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby
+  };
+  return {
+    labelProps,
+    fieldProps
+  };
+}
+
+// src/hooks/useOnClickOutside/useOnClickOutside.tsx
+import { useEffect as useEffect8 } from "react";
+var useOnClickOutside = (ref, handler) => {
+  useEffect8(() => {
+    const listener = (event) => {
+      if (!ref.current || ref.current.contains(event.target)) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      handler(event);
+    };
+    const handleEscapeKeyPress = (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        handler(event);
+      }
+    };
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+    document.addEventListener("keydown", handleEscapeKeyPress);
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+      document.addEventListener("keydown", handleEscapeKeyPress);
+    };
+  }, [ref, handler]);
+};
+
+// src/hooks/useOnUnmount/useOnUnmount.tsx
+import { useEffect as useEffect9, useRef as useRef4 } from "react";
+function useOnUnmount(callback) {
+  const callbackRef = useRef4(callback);
+  useEffect9(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+  useEffect9(
+    () => () => {
+      callbackRef.current();
+    },
+    []
+  );
+}
+
+// src/hooks/useRenderCount/useRenderCount.ts
+import { useEffect as useEffect10, useRef as useRef5 } from "react";
+function useRenderCount() {
+  const count = useRef5(1);
+  useEffect10(() => {
+    count.current += 1;
+  });
+  return count.current;
+}
+
+// src/hooks/useTextField/useTextField.tsx
+import { useId as useId2 } from "react";
+function useTextField(props) {
+  const {
+    isDisabled = false,
+    isReadOnly = false,
+    isRequired = false,
+    inputElementType = "input"
+  } = props;
+  const { labelProps, fieldProps } = useLabel(props);
+  const descriptionId = useId2();
+  const descriptionProps = { id: descriptionId };
+  const errorMessageId = useId2();
+  const errorMessageProps = { id: errorMessageId };
+  const ariaDescribedBy = spaceDelimitedList([
+    props.description && descriptionId,
+    props.errorMessage && errorMessageId,
+    props["aria-describedby"]
+  ]);
+  return {
+    descriptionProps,
+    errorMessageProps,
+    labelProps,
+    inputProps: {
+      defaultValue: props.defaultValue,
+      value: props.value,
+      onChange: props.onChange,
+      disabled: isDisabled,
+      readOnly: isReadOnly,
+      required: isRequired,
+      "aria-required": isRequired === true ? true : void 0,
+      "aria-invalid": props.isInvalid,
+      "aria-describedby": ariaDescribedBy,
+      "aria-errormessage": props["aria-errormessage"],
+      role: props.role,
+      type: inputElementType === "input" ? props.type : void 0,
+      pattern: inputElementType === "input" ? props.pattern : void 0,
+      autoComplete: props.autoComplete,
+      maxLength: props.maxLength,
+      minLength: props.minLength,
+      name: props.name,
+      placeholder: props.placeholder,
+      inputMode: props.inputMode,
+      // Clipboard events
+      onCopy: props.onCopy,
+      onCut: props.onCut,
+      onPaste: props.onPaste,
+      // Composition events
+      onCompositionEnd: props.onCompositionEnd,
+      onCompositionStart: props.onCompositionStart,
+      onCompositionUpdate: props.onCompositionUpdate,
+      // Selection events
+      onSelect: props.onSelect,
+      // Input events
+      onBeforeInput: props.onBeforeInput,
+      onInput: props.onInput,
+      // Focus events
+      onFocus: props.onFocus,
+      onBlur: props.onBlur,
+      ...fieldProps
+    }
+  };
+}
+
+// src/hooks/useValidationClasses/useValidationClasses.ts
+var useValidationClasses = (props) => {
+  const { validationState, isInvalid } = props;
+  useDeprecationWarning({ validationState });
+  if (isInvalid || validationState === "invalid") {
+    return "--is-invalid";
+  }
+  if (isInvalid === false || validationState === "valid") {
+    return "--is-valid";
+  }
+  return "";
+};
+
+// src/hooks/useWindowEvent/useWindowEvent.tsx
+import { useEffect as useEffect11 } from "react";
+function normaliseOptions(options, otherOptions = {}) {
+  if (typeof options === "undefined") {
+    return otherOptions;
+  }
+  if (typeof options === "boolean") {
+    return { capture: options, ...otherOptions };
+  }
+  return { ...options, ...otherOptions };
+}
+function useWindowEvent(type, listener, options) {
+  useEffect11(() => {
+    const controller = new AbortController();
+    const { signal } = controller;
+    const normalisedOptions = normaliseOptions(options, { signal });
+    window.addEventListener(type, listener, normalisedOptions);
+    return () => {
+      controller.abort();
+      window.removeEventListener(type, listener, normalisedOptions);
+    };
+  }, [type, listener, options]);
+}
+
+// src/components/TextField/TextField.tsx
+import classNames9 from "classnames/dedupe";
+import { forwardRef as forwardRef6 } from "react";
+
+// src/components/ErrorMessage/ErrorMessage.tsx
+import { error } from "@simplybusiness/icons";
+import classNames5 from "classnames/dedupe";
+
+// src/components/Text/Text.tsx
+import { forwardRef as forwardRef3 } from "react";
+import classNames4 from "classnames/dedupe";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var getElementType = (variant, elementType) => {
+  if (variant) {
+    return ["h1", "h2", "h3", "h4"].includes(variant) ? variant : "p";
+  }
+  return elementType || "p";
+};
+var Text = forwardRef3(
+  ({ elementType: Component = "p", ...props }, ref) => {
+    const { variant, className, spacing, ...otherProps } = props;
+    const elementType = getElementType(variant, Component);
+    const variantType = variant || elementType;
+    const classes = classNames4(
+      "mobius",
+      "mobius-text",
+      { [`--is-${variantType}`]: variantType },
+      { [`--has-line-height-${spacing}`]: spacing },
+      className
+    );
+    return /* @__PURE__ */ jsx4(Component, { ref, ...otherProps, className: classes });
+  }
+);
+Text.displayName = "Text";
+
+// src/components/ErrorMessage/ErrorMessage.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var ErrorMessage = ({
+  id,
+  errorMessage,
+  className
+}) => {
+  const classes = classNames5("mobius", "mobius-error-message", className);
+  if (!errorMessage) return null;
+  return /* @__PURE__ */ jsxs3("div", { id, className: classes, "data-testid": "ErrorMessage", role: "alert", children: [
+    /* @__PURE__ */ jsx5(Icon, { icon: error, className: "mobius-error-message__icon" }),
+    /* @__PURE__ */ jsx5(Text, { elementType: "span", className: "mobius-error-message__text", children: errorMessage })
+  ] });
+};
+ErrorMessage.displayName = "ErrorMessage";
+
+// src/components/Label/Label.tsx
+import { forwardRef as forwardRef4 } from "react";
+import classNames6 from "classnames/dedupe";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var Label = forwardRef4(
+  (props, ref) => {
+    const { elementType: Element = "label", children, ...otherProps } = props;
+    const classes = classNames6("mobius", "mobius-label", props.className);
+    otherProps.className = classes;
+    return /* @__PURE__ */ jsx6(Element, { ref, ...otherProps, className: classes, children });
+  }
+);
+Label.displayName = "Label";
+
+// src/components/Stack/Stack.tsx
+import { forwardRef as forwardRef5 } from "react";
+import classNames7 from "classnames/dedupe";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var Stack = forwardRef5((props, ref) => {
+  const { elementType: Element = "div", gap, ...otherProps } = props;
+  const classes = classNames7(
+    "mobius",
+    "mobius-stack",
+    {
+      [`--gap-${gap}`]: gap
+    },
+    otherProps.className
+  );
+  return /* @__PURE__ */ jsx7(Element, { ref, ...otherProps, className: classes });
+});
+Stack.displayName = "Stack";
+
+// src/components/TextField/adornmentWithClassName.ts
+import classNames8 from "classnames";
+import { cloneElement } from "react";
+var adornmentWithClassName = (component, validationClasses, className) => {
+  if (!component) return null;
+  return cloneElement(component, {
+    className: classNames8(
+      component.props.className,
+      validationClasses,
+      className
+    )
+  });
+};
+
+// src/components/TextField/TextField.tsx
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var TextField = forwardRef6((props, ref) => {
+  const {
+    isDisabled,
+    type = "text",
+    validationState,
+    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({
+    validationState,
+    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 = classNames9(validationClasses, textfieldClasses);
+  const labelClasses = classNames9(
+    {
+      "--is-disabled": isDisabled
+    },
+    validationClasses
+  );
+  const containerClasses = classNames9(
+    "mobius",
+    "mobius-text-field",
+    sharedClasses
+  );
+  const inputClasses = classNames9(
+    "mobius",
+    "mobius-text-field__input",
+    sharedClasses
+  );
+  const inputWrapperClasses = classNames9(
+    "mobius-text-field__input-wrapper",
+    sharedClasses
+  );
+  return /* @__PURE__ */ jsxs4(Stack, { gap: "xs", className: containerClasses, children: [
+    label && !hidden && /* @__PURE__ */ jsx8(Label, { ...labelProps, className: labelClasses, children: label }),
+    /* @__PURE__ */ jsxs4("div", { className: "mobius-text-field__inner-container", children: [
+      adornmentWithClassName(
+        prefixOutside,
+        labelClasses,
+        "mobius-text-field__prefix-outside"
+      ),
+      /* @__PURE__ */ jsxs4("div", { className: inputWrapperClasses, children: [
+        adornmentWithClassName(
+          prefixInside,
+          labelClasses,
+          "mobius-text-field__prefix-inside"
+        ),
+        /* @__PURE__ */ jsx8(
+          "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__ */ jsx8("div", { className: "mobius-text-field__children", children }),
+    /* @__PURE__ */ jsx8(ErrorMessage, { ...errorMessageProps, errorMessage })
+  ] });
+});
+TextField.displayName = "TextField";
+
+// src/components/VisuallyHidden/VisuallyHidden.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+function VisuallyHidden(props) {
+  const {
+    className,
+    children,
+    elementType: Component = "div",
+    ...otherProps
+  } = props;
+  return /* @__PURE__ */ jsx9(
+    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 classNames11 from "classnames";
+
+// src/components/Combobox/Option.tsx
+import { useEffect as useEffect12, useRef as useRef6 } from "react";
+import classNames10 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())
+  );
+}
+
+// src/components/Combobox/Option.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var Option = ({
+  option,
+  isHighlighted,
+  onOptionSelect,
+  optionComponent: OptionComponent,
+  id
+}) => {
+  const optionRef = useRef6(null);
+  useEffect12(() => {
+    if (isHighlighted && optionRef.current && optionRef.current.scrollIntoView) {
+      optionRef.current.scrollIntoView({ block: "nearest" });
+    }
+  }, [isHighlighted]);
+  return /* @__PURE__ */ jsx10(
+    "li",
+    {
+      ref: optionRef,
+      role: "option",
+      id,
+      "aria-selected": isHighlighted,
+      onMouseDown: () => onOptionSelect(option),
+      className: classNames10("mobius-combobox__option", "has-pii", {
+        "mobius-combobox__option--is-highlighted": isHighlighted
+      }),
+      children: OptionComponent ? /* @__PURE__ */ jsx10(OptionComponent, { option, isHighlighted }) : getOptionLabel(option)
+    },
+    getOptionValue(option)
+  );
+};
+
+// src/components/Combobox/Listbox.tsx
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+var Listbox = ({
+  id,
+  options,
+  highlightedIndex,
+  highlightedGroupIndex,
+  onOptionSelect,
+  optionComponent
+}) => {
+  const classes = classNames11("mobius-combobox__list");
+  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 (options && options.length === 0) {
+    return /* @__PURE__ */ jsx11("div", { role: "listbox", id, className: classes, children: /* @__PURE__ */ jsx11("div", { className: "mobius-combobox__no-options", children: "No options" }) });
+  }
+  return /* @__PURE__ */ jsx11("div", { role: "listbox", id, className: classes, children: isOptionGroup(options) ? options.map((option, groupIndex) => /* @__PURE__ */ jsxs5(
+    "ul",
+    {
+      role: "group",
+      "aria-labelledby": `${id}-group-${groupIndex}`,
+      className: "mobius-combobox__group",
+      children: [
+        /* @__PURE__ */ jsx11(
+          "li",
+          {
+            role: "presentation",
+            id: `${id}-group-${groupIndex}`,
+            className: "mobius-combobox__group-label",
+            children: option.heading
+          }
+        ),
+        option.options.map((groupOption, index) => /* @__PURE__ */ jsx11(
+          Option,
+          {
+            option: groupOption,
+            isHighlighted: highlightedIndex === index && highlightedGroupIndex === groupIndex,
+            onOptionSelect,
+            optionComponent,
+            id: getOptionId(groupOption, groupIndex, index)
+          },
+          `${id}-option-${groupIndex}-${index}`
+        ))
+      ]
+    },
+    option.heading
+  )) : typeof options !== "undefined" ? options.map((option, index) => /* @__PURE__ */ jsx11(
+    Option,
+    {
+      option,
+      isHighlighted: highlightedIndex === index,
+      onOptionSelect,
+      optionComponent,
+      id: getOptionId(option, 0, index)
+    },
+    index
+  )) : null });
+};
+
+// src/components/Combobox/useComboboxHighlight.tsx
+import { useState as useState7 } from "react";
+function useComboboxHighlight(options) {
+  const [highlightedIndex, setHighlightedIndex] = useState7(
+    options && options.length ? 0 : -1
+  );
+  const [highlightedGroupIndex, setHighlightedGroupIndex] = useState7(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 useEffect13, useState as useState8 } from "react";
+function useComboboxOptions({
+  options,
+  asyncOptions,
+  delay = 300,
+  minSearchLength = 3,
+  inputValue = "",
+  skipNextDebounceRef,
+  onSearched
+}) {
+  const [filteredOptions, setFilteredOptions] = useState8(void 0);
+  const debouncedInputValue = useDebouncedValue(
+    inputValue,
+    // Don't debounce synchronous options
+    options ? 0 : delay
+  );
+  const [isLoading, setIsLoading] = useState8(false);
+  const [error3, setError] = useState8(null);
+  useEffect13(() => {
+    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 {
+          setFilteredOptions(filterOptions(options, debouncedInputValue));
+        }
+      } 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 jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+var ComboboxInner = forwardRef7(
+  (props, ref) => {
+    const {
+      id,
+      defaultValue,
+      value,
+      options,
+      asyncOptions,
+      delay,
+      minSearchLength,
+      onSelected,
+      className,
+      placeholder,
+      icon,
+      onBlur,
+      onFocus,
+      onChange,
+      onSearched,
+      optionComponent,
+      errorMessage,
+      ...otherProps
+    } = props;
+    const skipNextDebounceRef = useRef7(false);
+    const fallbackRef = useRef7(null);
+    const [inputValue, setInputValue] = useState9(defaultValue || "");
+    const [isOpen, setIsOpen] = useState9(false);
+    const { filteredOptions, updateFilteredOptions, isLoading, error: error3 } = useComboboxOptions({
+      options,
+      asyncOptions,
+      inputValue,
+      delay,
+      minSearchLength,
+      skipNextDebounceRef
+    });
+    const {
+      highlightedIndex,
+      highlightedGroupIndex,
+      highlightNextOption,
+      highlightPreviousOption,
+      highlightFirstOption,
+      highlightLastOption,
+      clearHighlight
+    } = useComboboxHighlight(filteredOptions);
+    const showListbox = isOpen && filteredOptions && filteredOptions.length > 0;
+    const inputRef = ref || fallbackRef;
+    const listboxId = useId3();
+    const statusId = useId3();
+    const blurTimeoutRef = useRef7(null);
+    const { down } = useBreakpoint();
+    const isMobile = down("md");
+    const handleFocus = (e) => {
+      if (!filteredOptions || filteredOptions.length === 0) return;
+      if (blurTimeoutRef.current) {
+        clearTimeout(blurTimeoutRef.current);
+        blurTimeoutRef.current = null;
+      } else {
+        onFocus?.(e);
+      }
+      setIsOpen(true);
+    };
+    useOnUnmount(() => {
+      if (blurTimeoutRef.current) {
+        clearTimeout(blurTimeoutRef.current);
+      }
+    });
+    const handleInputChange = (e) => {
+      const newValue = e.target.value;
+      setInputValue(newValue);
+      setIsOpen(true);
+      clearHighlight();
+      onChange?.(e);
+    };
+    const handleOptionSelect = (option) => {
+      const val = getOptionValue(option);
+      if (!val) return;
+      if (typeof option === "object" && "callback" in option && option.callback && typeof option.callback === "function") {
+        setTimeout(() => inputRef.current.focus(), 0);
+        updateFilteredOptions(option.callback());
+        return;
+      }
+      skipNextDebounceRef.current = true;
+      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) => {
+      const typedText = inputValue.trim().toLowerCase();
+      const highlightedOption = getHighlightedOption();
+      const label = getOptionLabel(highlightedOption);
+      if (typedText === label?.toLowerCase()) {
+        handleOptionSelect(highlightedOption);
+      }
+      blurTimeoutRef.current = setTimeout(() => {
+        onBlur?.(e);
+        setIsOpen(false);
+      }, 150);
+    };
+    const handleKeyDown = (e) => {
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          setIsOpen(true);
+          highlightNextOption();
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setIsOpen(true);
+          highlightPreviousOption();
+          break;
+        case "Home":
+          e.preventDefault();
+          setIsOpen(true);
+          highlightFirstOption();
+          break;
+        case "End":
+          e.preventDefault();
+          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:
+      }
+    };
+    useEffect14(() => {
+      if (value) {
+        setInputValue(value);
+      }
+    }, [value]);
+    const classes = classNames12(
+      "mobius mobius-combobox",
+      {
+        "mobius-combobox--is-expanded": isOpen,
+        "mobius-combobox--is-loading": isLoading,
+        "mobius-combobox--is-mobile": isMobile
+      },
+      className
+    );
+    return /* @__PURE__ */ jsxs6("div", { id, "data-testid": "mobius-combobox__wrapper", className: classes, children: [
+      isLoading && /* @__PURE__ */ jsx12(
+        VisuallyHidden,
+        {
+          role: "status",
+          "aria-live": "polite",
+          id: statusId,
+          elementType: "div",
+          className: "mobius-combobox__status",
+          children: "Loading options"
+        }
+      ),
+      /* @__PURE__ */ jsx12(
+        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-controls": showListbox ? listboxId : void 0,
+          "aria-expanded": showListbox ? true : void 0,
+          "aria-activedescendant": highlightedIndex === -1 ? void 0 : getHighlightedOptionId(),
+          prefixInside: icon,
+          ref: inputRef,
+          errorMessage: errorMessage || error3?.message || void 0
+        }
+      ),
+      showListbox && /* @__PURE__ */ jsx12(
+        Listbox,
+        {
+          id: listboxId,
+          isLoading,
+          options: filteredOptions,
+          highlightedIndex,
+          highlightedGroupIndex,
+          onOptionSelect: handleOptionSelect,
+          optionComponent
+        }
+      )
+    ] });
+  }
+);
+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 jsx13 } 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 = forwardRef8(
+  ({
+    addressLookupService,
+    onAddressSelected,
+    onError,
+    errorMessage,
+    ...otherProps
+  }, ref) => {
+    const [error3, _setError] = useState10(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);
+          return optionsFromResponse(response, addressLookupService);
+        } catch (e) {
+          setError(e);
+          return [];
+        }
+      },
+      [addressLookupService, setError]
+    );
+    const handleSelected = (selected) => {
+      setError(null);
+      return addressLookupService.get(selected.id).then(onAddressSelected).catch(setError);
+    };
+    const realErrorMessage = error3 && "An error occurred" || errorMessage;
+    return /* @__PURE__ */ jsx13(
+      Combobox,
+      {
+        ...otherProps,
+        ref,
+        onSelected: handleSelected,
+        asyncOptions,
+        errorMessage: realErrorMessage,
+        icon: /* @__PURE__ */ jsx13(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 LoqateAddressLookupService = class {
+  /**
+   * Base URL for the Loqate API
+   */
+  #baseUrl;
+  /**
+   * API key for the Loqate API
+   */
+  #apiKey;
+  /**
+   * List of allowed country codes for the Loqate API
+   * 2 or 3 character ISO country codes
+   */
+  #countries;
+  constructor({
+    baseUrl,
+    apiKey,
+    countries
+  }) {
+    this.#apiKey = apiKey;
+    this.#baseUrl = baseUrl || LOQATE_BASE_URL;
+    this.#countries = countries || DEFAULT_COUNTRIES;
+  }
+  fetchFromApi(url) {
+    return fetch(`${this.#baseUrl}${url}`).then((response) => response.json()).then((json) => {
+      if (json.Items?.some((item) => item.Error)) {
+        throw new LoqateAddressLookupError(json);
+      }
+      return json;
+    });
+  }
+  search(searchTerm) {
+    const url = `${LOQATE_FIND_URL}?Key=${this.#apiKey}&Text=${searchTerm}&Countries=${this.#countries?.join(",")}`;
+    return this.fetchFromApi(url);
+  }
+  findById(id) {
+    const url = `${LOQATE_FIND_URL}?Key=${this.#apiKey}&Container=${id}&Countries=${this.#countries?.join(",")}`;
+    return this.fetchFromApi(url);
+  }
+  async get(id) {
+    const url = `${LOQATE_RETRIEVE_URL}?Key=${this.#apiKey}&Id=${id}`;
+    const response = await this.fetchFromApi(url);
+    return response.Items[0];
+  }
+};
+
+// src/components/Alert/Alert.tsx
+import { circleInfo, circleTick, error as error2, warning } from "@simplybusiness/icons";
+import classNames13 from "classnames/dedupe";
+import { forwardRef as forwardRef9 } from "react";
+import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+var Alert = forwardRef9(
+  (props, ref) => {
+    const {
+      elementType: Element = "div",
+      variant = "info",
+      show = true,
+      header,
+      children,
+      ...otherProps
+    } = props;
+    if (!show) return null;
+    const classes = classNames13(
+      "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 = classNames13("mobius", "mobius-alert__header");
+    const iconClasses = classNames13("mobius", "mobius-alert__icon");
+    const contentClasses = classNames13("mobius", "mobius-alert__content");
+    return /* @__PURE__ */ jsxs7(Element, { ref, role: "alert", ...otherProps, className: classes, children: [
+      /* @__PURE__ */ jsx14("span", { className: iconClasses, children: /* @__PURE__ */ jsx14(Icon, { icon: icon[variant] }) }),
+      /* @__PURE__ */ jsxs7("div", { children: [
+        header && /* @__PURE__ */ jsx14("p", { className: headerClasses, children: header }),
+        /* @__PURE__ */ jsx14("div", { className: contentClasses, children })
+      ] })
+    ] });
+  }
+);
+Alert.displayName = "Alert";
+
+// src/components/Box/Box.tsx
+import { forwardRef as forwardRef10 } from "react";
+import classNames14 from "classnames/dedupe";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var Box = forwardRef10(
+  (props, ref) => {
+    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 = classNames14("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__ */ jsx15(
+      Element,
+      {
+        ref,
+        style: styleProps,
+        ...otherProps,
+        className: classes
+      }
+    );
+  }
+);
+Box.displayName = "Box";
+
+// src/components/Breadcrumbs/Breadcrumbs.tsx
+import { forwardRef as forwardRef11, Children, cloneElement as cloneElement2 } from "react";
+import classNames15 from "classnames/dedupe";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var Breadcrumbs = forwardRef11((props, ref) => {
+  const { "aria-label": ariaLabel = "Breadcrumbs" } = props;
+  const { navProps } = { navProps: { "aria-label": ariaLabel } };
+  const { children, ...otherProps } = props;
+  const childArray = Children.toArray(children);
+  const classes = classNames15(
+    "mobius",
+    "mobius-breadcrumb",
+    otherProps.className
+  );
+  return /* @__PURE__ */ jsx16("nav", { ref, ...otherProps, ...navProps, className: classes, children: /* @__PURE__ */ jsx16("ul", { children: childArray.map(
+    (child, i) => cloneElement2(child, {
+      isCurrent: i === childArray.length - 1
+    })
+  ) }) });
+});
+Breadcrumbs.displayName = "Breadcrumbs";
+
+// src/components/Breadcrumbs/BreadcrumbItem.tsx
+import { forwardRef as forwardRef12, cloneElement as cloneElement3, Children as Children2 } from "react";
+import classNames16 from "classnames/dedupe";
+import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
+var BreadcrumbItem = forwardRef12((props, ref) => {
+  const {
+    isDisabled = false,
+    isCurrent = false,
+    "aria-current": ariaCurrent = "page",
+    children,
+    separator = /* @__PURE__ */ jsx17(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 = classNames16(
+    "mobius",
+    "mobius-breadcrumb__item",
+    props.className
+  );
+  const child = typeof children === "string" ? /* @__PURE__ */ jsx17("span", { ...itemProps, children }) : Children2.only(children);
+  return /* @__PURE__ */ jsxs8("li", { className: classes, children: [
+    cloneElement3(child, { ...child.props, ...itemProps, ref }),
+    !props.isCurrent && separator
+  ] });
+});
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+// src/components/Button/Button.tsx
+import { forwardRef as forwardRef13 } from "react";
+import classNames17 from "classnames/dedupe";
+
+// src/components/Button/Loading.tsx
+import { loading } from "@simplybusiness/icons";
+import { Fragment, jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
+var Loading = (props) => {
+  const { children } = props;
+  return /* @__PURE__ */ jsxs9(Fragment, { children: [
+    /* @__PURE__ */ jsx18("div", { className: "mobius-button__icon-wrapper", children: /* @__PURE__ */ jsx18(Icon, { icon: loading, spin: true, size: "md" }) }),
+    /* @__PURE__ */ jsx18(VisuallyHidden, { className: "mobius-button__loading-text", children: "Loading" }),
+    children
+  ] });
+};
+
+// src/components/Button/Success.tsx
+import { tick } from "@simplybusiness/icons";
+import { Fragment as Fragment2, jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
+var Success = () => /* @__PURE__ */ jsxs10(Fragment2, { children: [
+  /* @__PURE__ */ jsx19("div", { className: "mobius-button__icon-wrapper", children: /* @__PURE__ */ jsx19(Icon, { icon: tick, size: "md" }) }),
+  /* @__PURE__ */ jsx19(VisuallyHidden, { className: "mobius-button__success-text", children: "Success" })
+] });
+
+// src/components/Button/Button.tsx
+import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
+var Button = forwardRef13((props, ref) => {
+  const {
+    children,
+    elementType: Component = "button",
+    isDisabled,
+    isLoading,
+    isSuccess,
+    variant = "primary",
+    size = "md",
+    onPress,
+    onClick,
+    ...otherProps
+  } = props;
+  const { buttonProps } = useButton(props);
+  useDeprecationWarning({
+    "variant 'inverse'": variant === "inverse",
+    "variant 'inverse-ghost'": variant === "inverse-ghost"
+  });
+  const getVariant = (type) => {
+    if (type === "inverse") {
+      return "basic";
+    }
+    if (type === "inverse-ghost") {
+      return "secondary";
+    }
+    return variant;
+  };
+  const buttonVariant = getVariant(variant);
+  const classes = classNames17(
+    "mobius",
+    "mobius-button",
+    `--variant-${buttonVariant}`,
+    `--size-${size}`,
+    {
+      "--is-disabled": isDisabled,
+      "--is-loading": isLoading,
+      "--is-success": isSuccess && !isLoading
+    },
+    otherProps.className
+  );
+  otherProps.className = classes;
+  return (
+    // @ts-expect-error - ref type is not correct
+    /* @__PURE__ */ jsxs11(Component, { ref, ...buttonProps, ...otherProps, children: [
+      isLoading ? /* @__PURE__ */ jsx20(Loading, { children }) : children,
+      isSuccess && !isLoading && /* @__PURE__ */ jsx20(Success, {})
+    ] })
+  );
+});
+Button.displayName = "Button";
+
+// src/components/Checkbox/Checkbox.tsx
+import { forwardRef as forwardRef14, useRef as useRef8, useId as useId4, useState as useState11, useEffect as useEffect15 } from "react";
+import classNames18 from "classnames/dedupe";
+import { squareTick, square } from "@simplybusiness/icons";
+import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
+var Checkbox = forwardRef14((props, ref) => {
+  const {
+    id,
+    label,
+    isDisabled,
+    isRequired,
+    validationState,
+    isInvalid,
+    onChange,
+    className,
+    errorMessage,
+    selected,
+    defaultSelected = false,
+    isReadOnly,
+    isLastItem,
+    name,
+    value,
+    ["aria-describedby"]: ariaDescribedBy,
+    ...rest
+  } = props;
+  const [checked, setChecked] = useState11(defaultSelected);
+  const fallbackRef = useRef8(null);
+  const refObj = ref || fallbackRef;
+  const inputId = useId4();
+  const isControlled = typeof selected === "boolean";
+  useEffect15(() => {
+    if (isControlled) {
+      setChecked(selected);
+    }
+  }, [selected, isControlled]);
+  const validationClasses = useValidationClasses({
+    validationState,
+    isInvalid
+  });
+  const sharedClasses = classNames18(
+    {
+      "--is-disabled": isDisabled,
+      "--is-selected": checked,
+      "--is-required": typeof isRequired === "boolean" && isRequired,
+      "--is-optional": typeof isRequired === "boolean" && !isRequired
+    },
+    validationClasses
+  );
+  const wrapperClasses = classNames18(
+    "mobius",
+    "mobius-checkbox",
+    sharedClasses,
+    className
+  );
+  const labelClasses = classNames18("mobius-checkbox__label", sharedClasses);
+  const inputClasses = classNames18("mobius-checkbox__input", sharedClasses);
+  const iconClasses = classNames18("mobius-checkbox__icon", sharedClasses);
+  const errorMessageId = useId4();
+  const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
+  const describedBy = spaceDelimitedList([
+    shouldErrorMessageShow,
+    ariaDescribedBy
+  ]);
+  const labelId = useId4();
+  const handleChange = (event) => {
+    setChecked(!checked);
+    if (onChange) {
+      onChange(event, isLastItem);
+    }
+  };
+  return /* @__PURE__ */ jsxs12(Stack, { gap: "xs", className: wrapperClasses, children: [
+    /* @__PURE__ */ jsxs12("label", { className: labelClasses, children: [
+      /* @__PURE__ */ jsx21(
+        "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__ */ jsx21(
+        Icon,
+        {
+          icon: checked ? squareTick : square,
+          size: "md",
+          className: iconClasses
+        }
+      ),
+      /* @__PURE__ */ jsx21("span", { id: labelId, className: "mobius-checkbox__visible-label", children: label })
+    ] }),
+    /* @__PURE__ */ jsx21(ErrorMessage, { id: errorMessageId, errorMessage })
+  ] });
+});
+Checkbox.displayName = "Checkbox";
+
+// src/components/Checkbox/CheckboxGroup.tsx
+import classNames19 from "classnames/dedupe";
+import {
+  Children as Children3,
+  cloneElement as cloneElement4,
+  forwardRef as forwardRef15,
+  isValidElement,
+  useId as useId5,
+  useState as useState12
+} from "react";
+import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
+var CheckboxGroup = forwardRef15((props, ref) => {
+  const {
+    label,
+    isDisabled = false,
+    isRequired,
+    validationState,
+    isInvalid,
+    orientation = "vertical",
+    onChange,
+    className,
+    errorMessage,
+    children,
+    defaultValue = [],
+    isReadOnly,
+    itemsPerRow,
+    lastItemDisables = false,
+    ...rest
+  } = props;
+  const [selected, setSelected] = useState12(defaultValue);
+  const checkboxGroupClasses = classNames19(
+    "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({
+    validationState,
+    isInvalid
+  });
+  const labelClasses = classNames19(
+    {
+      "--is-disabled": isDisabled
+    },
+    validationClasses
+  );
+  const errorMessageId = useId5();
+  const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
+  const describedBy = spaceDelimitedList([
+    shouldErrorMessageShow,
+    props["aria-describedby"]
+  ]);
+  const labelId = useId5();
+  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__ */ jsxs13(
+    "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__ */ jsx22(Label, { elementType: "span", id: labelId, className: labelClasses, children: label }),
+        /* @__PURE__ */ jsx22("div", { className: "mobius-checkbox-group__wrapper", children: childrenArray.map((child) => {
+          if (isValidElement(child)) {
+            const isLastItem = child === lastCheckbox;
+            const isChildDisabled = isDisabled || lastItemDisables && lastCheckboxIsChecked && !isLastItem;
+            return cloneElement4(child, {
+              isDisabled: isChildDisabled,
+              isRequired,
+              isReadOnly,
+              isInvalid,
+              isLastItem,
+              selected: selected.includes(child.props.value),
+              onChange: handleChange,
+              "aria-describedby": describedBy
+            });
+          }
+          return child;
+        }) }),
+        errorMessage && /* @__PURE__ */ jsx22(ErrorMessage, { id: errorMessageId, errorMessage })
+      ]
+    }
+  );
+});
+CheckboxGroup.displayName = "CheckboxGroup";
+
+// src/components/Container/Container.tsx
+import { forwardRef as forwardRef16 } from "react";
+import classNames20 from "classnames/dedupe";
+import { jsx as jsx23 } from "react/jsx-runtime";
+var Container = forwardRef16((props, ref) => {
+  const { elementType: Element = "div", size = "md", ...otherProps } = props;
+  const classes = classNames20(
+    "mobius",
+    "mobius-container",
+    sizeClasses(size),
+    otherProps.className
+  );
+  return /* @__PURE__ */ jsx23(Element, { ref, ...otherProps, className: classes });
+});
+Container.displayName = "Container";
+
+// src/components/Divider/Divider.tsx
+import classNames21 from "classnames/dedupe";
+import { jsx as jsx24 } from "react/jsx-runtime";
+var Divider = ({
+  "aria-orientation": ariaOrientation = "horizontal",
+  className,
+  ...rest
+}) => {
+  const classes = classNames21("mobius", "mobius-divider", className);
+  return /* @__PURE__ */ jsx24(
+    "div",
+    {
+      className: classes,
+      role: "separator",
+      "aria-orientation": ariaOrientation,
+      ...rest,
+      children: /* @__PURE__ */ jsx24("div", { className: "mobius-divider__inner" })
+    }
+  );
+};
+Divider.displayName = "Divider";
+
+// src/components/Drawer/Content.tsx
+import { forwardRef as forwardRef17 } from "react";
+import { jsx as jsx25 } from "react/jsx-runtime";
+var Content = forwardRef17(
+  ({ children, ...otherProps }, ref) => /* @__PURE__ */ jsx25("div", { ref, ...otherProps, className: "mobius-drawer__content", children })
+);
+Content.displayName = "Content";
+
+// src/components/Drawer/Drawer.tsx
+import classNames22 from "classnames/dedupe";
+import { forwardRef as forwardRef18, useEffect as useEffect16, useId as useId6, useMemo, useRef as useRef9, useState as useState13 } from "react";
+
+// src/components/Drawer/DrawerContext.tsx
+import { createContext } from "react";
+var DrawerContext = createContext({
+  onClose: () => {
+  },
+  closeLabel: void 0
+});
+
+// src/components/Drawer/Drawer.tsx
+import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
+var TRANSITION_CSS_VARIABLE = "--drawer-transition-duration";
+var Drawer = forwardRef18((props, ref) => {
+  const {
+    isOpen,
+    className,
+    closeLabel,
+    direction,
+    announce = "Drawer opened on screen",
+    onOpen,
+    onClose,
+    children
+  } = props;
+  const dialogRef = useRef9(null);
+  const [shouldTransition, setShouldTransition] = useState13(false);
+  const { close } = useDialog({
+    ref: dialogRef,
+    isOpen,
+    onOpen,
+    onClose,
+    transition: {
+      isEnabled: true,
+      CSSVariable: TRANSITION_CSS_VARIABLE
+    }
+  });
+  const hiddenId = `screen-reader-announce-${useId6()}`;
+  const dialogClasses = classNames22(
+    "mobius",
+    "mobius-drawer",
+    `--${direction}`,
+    className,
+    {
+      "--should-transition": shouldTransition
+    }
+  );
+  useEffect16(() => {
+    setShouldTransition(supportsDialog());
+  }, []);
+  const contextValue = useMemo(
+    () => ({
+      onClose: close,
+      closeLabel
+    }),
+    [close, closeLabel]
+  );
+  return /* @__PURE__ */ jsxs14(
+    "dialog",
+    {
+      id: useId6(),
+      ref: mergeRefs([dialogRef, ref]),
+      onCancel: close,
+      className: dialogClasses,
+      "aria-describedby": hiddenId,
+      children: [
+        /* @__PURE__ */ jsx26(VisuallyHidden, { children: /* @__PURE__ */ jsx26("div", { id: hiddenId, children: announce }) }),
+        /* @__PURE__ */ jsx26(DrawerContext.Provider, { value: contextValue, children })
+      ]
+    }
+  );
+});
+Drawer.displayName = "Drawer";
+
+// src/components/Drawer/useDrawer.ts
+import { useContext } from "react";
+var useDrawer = () => {
+  const { onClose, closeLabel } = useContext(DrawerContext);
+  return { onClose, closeLabel };
+};
+
+// src/components/Drawer/Header.tsx
+import { forwardRef as forwardRef19 } from "react";
+import { cross } from "@simplybusiness/icons";
+import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
+var Header = forwardRef19(
+  ({ children, ...otherProps }, ref) => {
+    const { onClose, closeLabel } = useDrawer();
+    return /* @__PURE__ */ jsxs15("header", { ref, ...otherProps, className: "mobius-drawer__header", children: [
+      children,
+      /* @__PURE__ */ jsxs15(
+        Button,
+        {
+          "aria-label": "Close",
+          variant: "basic",
+          onPress: onClose,
+          className: "mobius-drawer__close",
+          size: "sm",
+          children: [
+            /* @__PURE__ */ jsx27(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 {
+  forwardRef as forwardRef20,
+  Children as Children4,
+  isValidElement as isValidElement2,
+  cloneElement as cloneElement5,
+  useState as useState14
+} from "react";
+import useDropdownMenu from "react-accessible-dropdown-menu-hook";
+import classNames23 from "classnames/dedupe";
+import { jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
+var DropdownMenu = forwardRef20((props, ref) => {
+  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 = classNames23(
+    "mobius",
+    "mobius-dropdown-menu",
+    otherProps.className
+  );
+  const triggerClasses = classNames23("mobius", "mobius-dropdown-menu__trigger");
+  const listClasses = classNames23("mobius", "mobius-dropdown-menu__list", {
+    "--is-open": open
+  });
+  const handleChildClick = ({ onClick }, index) => {
+    setActiveId(index);
+    setIsOpen(false);
+    if (onClick) {
+      onClick();
+    }
+  };
+  return /* @__PURE__ */ jsxs16(Element, { ref, ...otherProps, className: classes, children: [
+    trigger ? cloneElement5(trigger, {
+      className: triggerClasses,
+      open,
+      label,
+      ...buttonProps
+    }) : /* @__PURE__ */ jsx28(Button, { className: triggerClasses, ...buttonProps, children: label }),
+    /* @__PURE__ */ jsx28("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 { forwardRef as forwardRef21, cloneElement as cloneElement6, isValidElement as isValidElement3, Children as Children5 } from "react";
+import classNames24 from "classnames/dedupe";
+import { jsx as jsx29 } from "react/jsx-runtime";
+var Item = forwardRef21(
+  (props, ref) => {
+    const {
+      elementType: Element = "li",
+      active,
+      onClick,
+      children,
+      ...otherProps
+    } = props;
+    const classes = classNames24(
+      "mobius",
+      "mobius-dropdown-menu__item",
+      { "--is-active": active },
+      otherProps.className
+    );
+    return /* @__PURE__ */ jsx29(Element, { ref, onClick, ...otherProps, children: Children5.map(children, (child) => {
+      if (isValidElement3(child)) {
+        const childClasses = classNames24(child.props.className, classes);
+        return cloneElement6(child, {
+          className: childClasses
+        });
+      }
+      return /* @__PURE__ */ jsx29("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 classNames25 from "classnames/dedupe";
+import { cloneElement as cloneElement7, forwardRef as forwardRef22, useId as useId7 } from "react";
+import { jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
+var useFieldset = (props) => {
+  const { legend } = props;
+  let legendProps = {};
+  let containerProps = {
+    role: "group"
+  };
+  const legendId = useId7();
+  if (legend) {
+    legendProps = {
+      ...legendProps,
+      id: legendId
+    };
+    containerProps = {
+      ...containerProps,
+      "aria-labelledby": legendId
+    };
+  }
+  return {
+    legendProps,
+    containerProps
+  };
+};
+var Fieldset = forwardRef22((props, _ref) => {
+  const {
+    children,
+    legend,
+    legendComponent = /* @__PURE__ */ jsx30("legend", {}),
+    ...otherProps
+  } = props;
+  const { legendProps, containerProps } = useFieldset(props);
+  const classes = classNames25("mobius", "mobius-fieldset", props.className);
+  legendProps.className = "mobius-fieldset__legend";
+  return /* @__PURE__ */ jsxs17(Flex, { ...containerProps, ...otherProps, className: classes, children: [
+    legend && cloneElement7(legendComponent, { ...legendProps }, [legend]),
+    children
+  ] });
+});
+Fieldset.displayName = "Fieldset";
+
+// src/components/Grid/Grid.tsx
+import { forwardRef as forwardRef23 } from "react";
+import classNames26 from "classnames/dedupe";
+import { jsx as jsx31 } from "react/jsx-runtime";
+var Grid = forwardRef23(
+  (props, _ref) => {
+    const {
+      columns = 12,
+      gap,
+      columnGap,
+      rowGap,
+      alignContent,
+      alignItems,
+      justifyContent,
+      justifyItems,
+      className,
+      style,
+      ...rest
+    } = props;
+    const classes = classNames26("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__ */ jsx31("div", { style: styles, className: classes, ...rest });
+  }
+);
+Grid.displayName = "Grid";
+
+// src/components/Grid/Item.tsx
+import { forwardRef as forwardRef24, useEffect as useEffect17, useState as useState15 } from "react";
+import classNames27 from "classnames/dedupe";
+import { jsx as jsx32 } 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 = forwardRef24((props, _ref) => {
+  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 = classNames27("mobius-grid__item", className);
+  useEffect17(() => {
+    setResponsiveSpan(breakpointMap[breakpointSize]);
+  }, [breakpointSize, breakpointMap]);
+  const styles = {
+    gridColumn: responsiveSpan ? `span ${responsiveSpan}` : void 0,
+    alignSelf,
+    justifySelf
+  };
+  return /* @__PURE__ */ jsx32("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 { forwardRef as forwardRef25 } from "react";
+import classNames28 from "classnames/dedupe";
+import { jsx as jsx33 } from "react/jsx-runtime";
+var Image = forwardRef25(
+  ({ alt, elementType: Component = "img", ...otherProps }, ref) => {
+    const classes = classNames28("mobius", "mobius-image", otherProps.className);
+    return /* @__PURE__ */ jsx33(Component, { alt, ref, ...otherProps, className: classes });
+  }
+);
+Image.displayName = "Image";
+
+// src/components/Link/Link.tsx
+import { forwardRef as forwardRef26 } from "react";
+import classNames29 from "classnames/dedupe";
+import { jsx as jsx34 } from "react/jsx-runtime";
+var Link = forwardRef26(
+  (props, ref) => {
+    const {
+      isDisabled = false,
+      elementType: Component = "a",
+      style,
+      className,
+      ...otherProps
+    } = props;
+    const disabledStyles = {
+      pointerEvents: "none"
+    };
+    const styles = { ...style, ...isDisabled && disabledStyles };
+    const classes = classNames29("mobius", "mobius-link", className, {
+      "--is-disabled": isDisabled
+    });
+    return /* @__PURE__ */ jsx34(
+      Component,
+      {
+        ref,
+        style: styles,
+        className: classes,
+        "aria-disabled": isDisabled,
+        ...otherProps,
+        children: props.children
+      }
+    );
+  }
+);
+Link.displayName = "Link";
+
+// src/components/LinkButton/LinkButton.tsx
+import classNames30 from "classnames/dedupe";
+import { jsx as jsx35 } from "react/jsx-runtime";
+function LinkButton({
+  href,
+  children,
+  className,
+  elementType = "a",
+  ...rest
+}) {
+  if (!href) {
+    throw new Error("LinkButton requires a href prop");
+  }
+  const classes = classNames30("mobius", "mobius-link-button", className);
+  return (
+    // @ts-expect-error Button only allows elementType of string, not React component
+    /* @__PURE__ */ jsx35(Button, { elementType, href, className: classes, ...rest, children })
+  );
+}
+
+// src/components/List/List.tsx
+import { Children as Children6, cloneElement as cloneElement8, forwardRef as forwardRef27, isValidElement as isValidElement4 } from "react";
+import classNames31 from "classnames/dedupe";
+import { jsx as jsx36 } from "react/jsx-runtime";
+var List = forwardRef27(
+  (props, ref) => {
+    const Component = props.isOrdered ? "ol" : "ul";
+    const { children, icon, ...otherProps } = props;
+    const { isOrdered, liststyletype, isReversed, ...restProps } = otherProps;
+    const mappedProps = {
+      ...restProps,
+      reversed: isReversed
+    };
+    const classes = classNames31(
+      "mobius",
+      "mobius-list",
+      {
+        "--has-icon": icon,
+        [`--is-${liststyletype}`]: liststyletype
+      },
+      otherProps.className
+    );
+    return /* @__PURE__ */ jsx36(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 { forwardRef as forwardRef28 } from "react";
+import classNames32 from "classnames/dedupe";
+import { jsx as jsx37, jsxs as jsxs18 } from "react/jsx-runtime";
+var ListItem = forwardRef28((props, ref) => {
+  const { parentIcon, icon, children, ...otherProps } = props;
+  const iconContent = icon || parentIcon;
+  const classes = classNames32(
+    "mobius",
+    "mobius-list__item",
+    {
+      "--has-icon": iconContent
+    },
+    props.className
+  );
+  const contentClasses = classNames32("mobius", "mobius-list__item-content");
+  const iconClasses = classNames32("mobius", "mobius-list__icon");
+  if (iconContent) {
+    return /* @__PURE__ */ jsx37("li", { ref, ...otherProps, className: classes, children: /* @__PURE__ */ jsxs18("span", { className: contentClasses, children: [
+      /* @__PURE__ */ jsx37("span", { className: iconClasses, children: iconContent }),
+      children
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx37("li", { ref, ...otherProps, className: classes, children });
+});
+ListItem.displayName = "ListItem";
+
+// src/components/LoadingIndicator/LoadingIndicator.tsx
+import { forwardRef as forwardRef29 } from "react";
+import classNames33 from "classnames/dedupe";
+import { loading as loading2 } from "@simplybusiness/icons";
+import { jsx as jsx38 } from "react/jsx-runtime";
+var LoadingIndicator = forwardRef29((props, ref) => {
+  const { icon = loading2, ...otherProps } = props;
+  const classes = classNames33(
+    "mobius",
+    "mobius-loading-indicator",
+    otherProps.className
+  );
+  return /* @__PURE__ */ jsx38(Icon, { icon, spin: true, ref, ...otherProps, className: classes });
+});
+LoadingIndicator.displayName = "LoadingIndicator";
+
+// src/components/Logo/Logo.tsx
+import { forwardRef as forwardRef30 } from "react";
+import classNames34 from "classnames/dedupe";
+import { jsx as jsx39, jsxs as jsxs19 } from "react/jsx-runtime";
+var Logo = forwardRef30((props, ref) => {
+  const { className, width, height, ...otherProps } = props;
+  const classes = classNames34("mobius", "mobius-logo", className);
+  return /* @__PURE__ */ jsxs19(
+    "svg",
+    {
+      width,
+      height,
+      ref,
+      className: classes,
+      viewBox: "0 0 144 37",
+      ...otherProps,
+      children: [
+        /* @__PURE__ */ jsx39("defs", { children: /* @__PURE__ */ jsxs19(
+          "linearGradient",
+          {
+            id: "logo-gradient",
+            x1: "83.508%",
+            x2: "11.891%",
+            y1: "76.042%",
+            y2: "26.973%",
+            children: [
+              /* @__PURE__ */ jsx39("stop", { stopColor: "#4632D8", offset: "0%" }),
+              /* @__PURE__ */ jsx39("stop", { stopColor: "#9084E8", offset: "100%" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxs19("g", { children: [
+          /* @__PURE__ */ jsx39(
+            "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__ */ jsx39(
+            "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__ */ jsx39(
+            "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 { forwardRef as forwardRef31 } from "react";
+import { jsx as jsx40 } from "react/jsx-runtime";
+var Content2 = forwardRef31(
+  ({ children, ...otherProps }, ref) => /* @__PURE__ */ jsx40("div", { ref, ...otherProps, className: "mobius-modal__content", children })
+);
+Content2.displayName = "Content";
+
+// src/components/Modal/Header.tsx
+import { forwardRef as forwardRef32 } from "react";
+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 jsx41, jsxs as jsxs20 } from "react/jsx-runtime";
+var Header2 = forwardRef32(
+  ({ children, ...otherProps }, ref) => {
+    const { onClose, closeLabel } = useModal();
+    return /* @__PURE__ */ jsxs20("header", { ref, ...otherProps, className: "mobius-modal__header", children: [
+      children,
+      /* @__PURE__ */ jsxs20(
+        Button,
+        {
+          "aria-label": "Close",
+          variant: "basic",
+          onPress: onClose,
+          className: "mobius-modal__close",
+          children: [
+            /* @__PURE__ */ jsx41(Icon, { icon: cross2 }),
+            " ",
+            closeLabel
+          ]
+        }
+      )
+    ] });
+  }
+);
+Header2.displayName = "Header";
+
+// src/components/Modal/Modal.tsx
+import classNames35 from "classnames/dedupe";
+import { forwardRef as forwardRef33, useEffect as useEffect18, useMemo as useMemo2, useRef as useRef10, useState as useState16 } from "react";
+import { jsx as jsx42 } from "react/jsx-runtime";
+var TRANSITION_CSS_VARIABLE2 = "--modal-transition-duration";
+var Modal = forwardRef33((props, ref) => {
+  const {
+    isOpen,
+    onClose,
+    onOpen,
+    children,
+    className,
+    closeLabel,
+    isFullScreen,
+    animation,
+    // Deprecated props below
+    size,
+    appElement,
+    preventCloseOnEsc,
+    shouldFocusAfterRender,
+    parentSelector,
+    ...rest
+  } = props;
+  const [shouldTransition, setShouldTransition] = useState16(false);
+  useDeprecationWarning({
+    size,
+    appElement,
+    preventCloseOnEsc,
+    shouldFocusAfterRender,
+    parentSelector
+  });
+  useEffect18(() => {
+    setShouldTransition(supportsDialog());
+  }, []);
+  const dialogRef = useRef10(null);
+  const { close } = useDialog({
+    ref: dialogRef,
+    isOpen,
+    onOpen,
+    onClose,
+    transition: {
+      isEnabled: !!animation,
+      CSSVariable: TRANSITION_CSS_VARIABLE2
+    }
+  });
+  const modalClasses = classNames35(
+    "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 = useMemo2(
+    () => ({
+      onClose: close,
+      closeLabel
+    }),
+    [close, closeLabel]
+  );
+  return /* @__PURE__ */ jsx42(
+    "dialog",
+    {
+      ref: mergeRefs([dialogRef, ref]),
+      onCancel: close,
+      className: modalClasses,
+      ...rest,
+      children: /* @__PURE__ */ jsx42(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 classNames36 from "classnames/dedupe";
+import { forwardRef as forwardRef34 } from "react";
+import { jsx as jsx43 } from "react/jsx-runtime";
+var NumberField = forwardRef34((props, ref) => {
+  const { minValue, maxValue, step, defaultValue, className, ...otherProps } = props;
+  const containerClasses = classNames36("mobius-number-field", className);
+  const handleBeforeInput = (event) => {
+    const { data } = event.nativeEvent;
+    if (step != null && Number.isInteger(step) && data === ".") {
+      event.preventDefault();
+    }
+    if (minValue != null && minValue >= 0 && data === "-") {
+      event.preventDefault();
+    }
+  };
+  return /* @__PURE__ */ jsx43(
+    TextField,
+    {
+      ...otherProps,
+      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 { forwardRef as forwardRef35 } from "react";
+import { jsx as jsx44 } from "react/jsx-runtime";
+var Option2 = forwardRef35((props, ref) => {
+  const { isDisabled, ...rest } = props;
+  const mappedProps = {
+    ...rest,
+    disabled: isDisabled
+  };
+  return /* @__PURE__ */ jsx44("option", { ...mappedProps, ref });
+});
+Option2.displayName = "Option";
+
+// src/components/PasswordField/PasswordField.tsx
+import classNames37 from "classnames/dedupe";
+import { forwardRef as forwardRef36, useState as useState17, useRef as useRef11 } from "react";
+
+// src/components/PasswordField/ShowHideButton.tsx
+import { jsx as jsx45 } from "react/jsx-runtime";
+var ShowHideButton = ({
+  show = false,
+  onClick
+}) => /* @__PURE__ */ jsx45(
+  "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: show ? "hide" : "show"
+  }
+);
+
+// src/components/PasswordField/PasswordField.tsx
+import { jsx as jsx46 } from "react/jsx-runtime";
+var PasswordField = forwardRef36(
+  ({ className, ...props }, ref) => {
+    const [show, setShow] = useState17(false);
+    const type = show ? "text" : "password";
+    const classes = classNames37("mobius-password-field", className);
+    const localRef = useRef11(null);
+    const handleShowHideButtonClick = () => {
+      setShow((oldShow) => !oldShow);
+      localRef.current?.focus();
+    };
+    return /* @__PURE__ */ jsx46(
+      TextField,
+      {
+        ref: mergeRefs([localRef, ref]),
+        className: classes,
+        ...props,
+        type,
+        suffixInside: /* @__PURE__ */ jsx46(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 classNames38 from "classnames";
+import { cloneElement as cloneElement9, useRef as useRef12, useState as useState18 } from "react";
+import { Fragment as Fragment3, jsx as jsx47, jsxs as jsxs21 } 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 = classNames38(
+    "mobius",
+    "mobius-popover__container",
+    className
+  );
+  const toggleVisibility = () => {
+    if (isOpen) {
+      setIsOpen(false);
+      onClose?.();
+      return;
+    }
+    setIsOpen(true);
+    onOpen?.();
+  };
+  const triggerComponent = cloneElement9(trigger, {
+    ref: refs.setReference,
+    className: classNames38(trigger.props.className, "mobius-popover__toggle"),
+    onClick: toggleVisibility,
+    ...getReferenceProps()
+  });
+  useWindowEvent("keydown", (e) => {
+    if (e.key === "Escape") {
+      onClose?.();
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  });
+  return /* @__PURE__ */ jsxs21(Fragment3, { children: [
+    triggerComponent,
+    isOpen && /* @__PURE__ */ jsxs21(
+      "div",
+      {
+        className: containerClasses,
+        ref: refs.setFloating,
+        style: floatingStyles,
+        ...getFloatingProps(),
+        children: [
+          /* @__PURE__ */ jsxs21("div", { className: "mobius-popover", children: [
+            /* @__PURE__ */ jsx47("header", { className: "mobius-popover__header", children: /* @__PURE__ */ jsx47(
+              Button,
+              {
+                type: "button",
+                className: "mobius-popover__close-button",
+                onClick: toggleVisibility,
+                "aria-label": "Close",
+                variant: "ghost",
+                children: /* @__PURE__ */ jsx47(
+                  Icon,
+                  {
+                    icon: cross3,
+                    size: "md",
+                    className: "mobius-popover__close-icon"
+                  }
+                )
+              }
+            ) }),
+            /* @__PURE__ */ jsx47("div", { className: "mobius-popover__body", children })
+          ] }),
+          /* @__PURE__ */ jsx47(
+            FloatingArrow,
+            {
+              ref: arrowRef,
+              context,
+              width: 20,
+              className: "mobius-popover__arrow-icon"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+
+// src/components/Progress/Progress.tsx
+import classNames39 from "classnames/dedupe";
+import { forwardRef as forwardRef37, useId as useId8 } from "react";
+import { jsx as jsx48, jsxs as jsxs22 } 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) => {
+  const numberValue = parseFloat(value);
+  return Number.isNaN(numberValue) ? defaultValue : numberValue;
+};
+var getLabelComponent = (label, progressLabelId, showLabel) => {
+  if (showLabel) {
+    return /* @__PURE__ */ jsx48(
+      Label,
+      {
+        id: progressLabelId,
+        className: "mobius-progress__label",
+        elementType: "span",
+        children: label
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx48(VisuallyHidden, { children: /* @__PURE__ */ jsx48(
+    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 = forwardRef37((props, ref) => {
+  const progressId = useId8();
+  const progressLabelId = useId8();
+  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 = classNames39("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__ */ jsxs22(
+    "div",
+    {
+      id: id || progressId,
+      ...progressBarProps,
+      ref,
+      className: classes,
+      role: "progressbar",
+      "aria-labelledby": progressLabelId,
+      children: [
+        labelComponent,
+        /* @__PURE__ */ jsx48("div", { className: "mobius-progress__track", children: /* @__PURE__ */ jsx48("div", { className: "mobius-progress__bar", style: { width: barWidth } }) }),
+        showValueLabel && /* @__PURE__ */ jsx48(Label, { "data-testid": "value-label", elementType: "span", children: progressBarProps["aria-valuetext"] })
+      ]
+    }
+  );
+});
+Progress.displayName = "Progress";
+
+// src/components/Radio/Radio.tsx
+import classNames40 from "classnames/dedupe";
+import { forwardRef as forwardRef38 } from "react";
+import { Fragment as Fragment4, jsx as jsx49, jsxs as jsxs23 } from "react/jsx-runtime";
+var Radio = forwardRef38(
+  (props, ref) => {
+    const {
+      children,
+      value,
+      label,
+      className,
+      isDisabled,
+      errorMessage,
+      onChange,
+      defaultChecked,
+      groupDisabled,
+      name,
+      selected,
+      setSelected,
+      isRequired,
+      ...otherProps
+    } = props;
+    const realDisabled = groupDisabled || isDisabled;
+    const isMultiline = label && children;
+    const isDefaultSelected = selected === value || defaultChecked;
+    const radioClasses = {
+      "--is-disabled": realDisabled,
+      "--is-selected": selected === value,
+      "--is-multiline": !!isMultiline,
+      "--is-required": isRequired
+    };
+    const containerClasses = classNames40(
+      "mobius-radio__label",
+      radioClasses,
+      className
+    );
+    const inputClasses = classNames40("mobius-radio__input", radioClasses);
+    const handleClick = (event) => {
+      if (onChange) {
+        onChange(event);
+      }
+      if (setSelected) {
+        setSelected(event.currentTarget.value);
+      }
+    };
+    const {
+      // @ts-expect-error - TS doesn't like the orientation prop
+      orientation,
+      "aria-describedby": _ariaDescribedBy,
+      ...rest
+    } = otherProps;
+    return /* @__PURE__ */ jsxs23(Fragment4, { children: [
+      /* @__PURE__ */ jsxs23(Label, { className: containerClasses, children: [
+        /* @__PURE__ */ jsx49(
+          "input",
+          {
+            "aria-describedby": otherProps["aria-describedby"],
+            disabled: realDisabled,
+            ref,
+            className: inputClasses,
+            onClick: handleClick,
+            value,
+            tabIndex: 0,
+            type: "radio",
+            defaultChecked: isDefaultSelected,
+            name,
+            required: isRequired,
+            ...rest
+          }
+        ),
+        isMultiline ? /* @__PURE__ */ jsxs23("div", { className: "mobius-radio__content--multiline", children: [
+          /* @__PURE__ */ jsx49("div", { className: "mobius-radio__content-first-line", children: label }),
+          /* @__PURE__ */ jsx49("div", { className: "mobius-radio__extra-content", children })
+        ] }) : /* @__PURE__ */ jsx49("div", { className: "mobius-radio__content", children: label || children })
+      ] }),
+      errorMessage && /* @__PURE__ */ jsx49(ErrorMessage, { errorMessage })
+    ] });
+  }
+);
+Radio.displayName = "Radio";
+
+// src/components/Radio/RadioGroup.tsx
+import {
+  Children as Children7,
+  cloneElement as cloneElement10,
+  forwardRef as forwardRef39,
+  isValidElement as isValidElement5,
+  useId as useId9,
+  useState as useState19
+} from "react";
+import classNames41 from "classnames/dedupe";
+import { jsx as jsx50, jsxs as jsxs24 } 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 = forwardRef39((props, ref) => {
+  const {
+    label,
+    isDisabled = false,
+    isRequired,
+    validationState,
+    isInvalid,
+    orientation = "vertical",
+    className,
+    errorMessage,
+    children,
+    defaultValue,
+    isReadOnly,
+    name,
+    onChange,
+    ...rest
+  } = props;
+  const defaultSelected = getDefaultVal(children, defaultValue);
+  const [selected, setSelected] = useState19(defaultSelected);
+  const validationClasses = useValidationClasses({
+    validationState,
+    isInvalid
+  });
+  const radioClasses = {
+    "--is-disabled": isDisabled,
+    "--is-required": typeof isRequired === "boolean" && isRequired,
+    "--is-optional": typeof isRequired === "boolean" && !isRequired,
+    [`--is-${orientation}`]: true,
+    [className || ""]: true
+  };
+  const radioGroupClasses = classNames41(
+    "mobius",
+    "mobius-radio-group",
+    radioClasses,
+    validationClasses
+  );
+  const radioWrapperClasses = classNames41("mobius-radio__wrapper", {
+    [`--is-${orientation}`]: true
+  });
+  const labelClasses = classNames41(radioClasses, validationClasses);
+  const errorMessageId = useId9();
+  const defaultNameAttrId = useId9();
+  const nameAttribute = name || defaultNameAttrId;
+  const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
+  const describedBy = spaceDelimitedList([
+    shouldErrorMessageShow,
+    props["aria-describedby"]
+  ]);
+  const labelId = useId9();
+  return /* @__PURE__ */ jsx50(
+    "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": orientation,
+      "aria-readonly": isReadOnly,
+      "aria-required": isRequired,
+      ref,
+      className: radioGroupClasses,
+      role: "radiogroup",
+      children: /* @__PURE__ */ jsxs24(Stack, { gap: "xs", children: [
+        label && /* @__PURE__ */ jsx50(Label, { htmlFor: name, id: labelId, className: labelClasses, children: label }),
+        /* @__PURE__ */ jsx50("div", { className: radioWrapperClasses, children: Children7.map(children, (child) => {
+          if (isValidElement5(child)) {
+            return cloneElement10(child, {
+              orientation,
+              groupDisabled: isDisabled,
+              name: nameAttribute,
+              selected,
+              setSelected,
+              isRequired,
+              "aria-describedby": describedBy,
+              onChange
+            });
+          }
+          return child;
+        }) }),
+        /* @__PURE__ */ jsx50(ErrorMessage, { id: errorMessageId, errorMessage })
+      ] })
+    }
+  );
+});
+RadioGroup.displayName = "RadioGroup";
+
+// src/components/Segment/SegmentGroup.tsx
+import classNames42 from "classnames/dedupe";
+import { jsx as jsx51 } from "react/jsx-runtime";
+var SegmentGroup = (props) => {
+  const { children, horizontal, gap, className, ...rest } = props;
+  const gapClass = gap ? `gap-${gap}` : "";
+  const classes = classNames42(
+    "mobius",
+    "mobius-segment-group",
+    className,
+    { "--is-horizontal": horizontal },
+    gapClass
+  );
+  return /* @__PURE__ */ jsx51("div", { className: classes, ...rest, children });
+};
+SegmentGroup.displayName = "SegmentGroup";
+
+// src/components/Segment/Segment.tsx
+import classNames43 from "classnames/dedupe";
+import { jsx as jsx52, jsxs as jsxs25 } from "react/jsx-runtime";
+var Segment = (props) => {
+  const { heading, children, colour, inverted, className, ...rest } = props;
+  const classes = classNames43(
+    "mobius",
+    "mobius-segment",
+    colour,
+    { inverted },
+    className
+  );
+  return /* @__PURE__ */ jsxs25("div", { className: classes, ...rest, children: [
+    heading && /* @__PURE__ */ jsx52("div", { className: "mobius-segment__heading", children: heading }),
+    children
+  ] });
+};
+Segment.displayName = "Segment";
+
+// src/components/Select/Select.tsx
+import classNames44 from "classnames/dedupe";
+import { forwardRef as forwardRef40, useId as useId10 } from "react";
+import { chevronDown as chevronDown2 } from "@simplybusiness/icons";
+import { jsx as jsx53, jsxs as jsxs26 } from "react/jsx-runtime";
+var Select = forwardRef40((props, ref) => {
+  const {
+    label,
+    onChange,
+    validationState,
+    isInvalid,
+    errorMessage,
+    isDisabled = false,
+    isRequired,
+    ...otherProps
+  } = props;
+  const { labelProps, fieldProps } = useLabel({
+    label,
+    ...otherProps
+  });
+  const validationClasses = useValidationClasses({
+    validationState,
+    isInvalid
+  });
+  const stateClasses = {
+    "--is-disabled": isDisabled,
+    "--is-required": typeof isRequired === "boolean" && isRequired,
+    "--is-optional": typeof isRequired === "boolean" && !isRequired
+  };
+  const sharedClasses = classNames44(validationClasses, stateClasses);
+  const wrapperClasses = classNames44(
+    "mobius-select__wrapper",
+    sharedClasses,
+    otherProps.className
+  );
+  const selectClasses = classNames44(
+    "mobius-select",
+    sharedClasses,
+    otherProps.className
+  );
+  const labelClasses = classNames44(
+    "mobius-label",
+    sharedClasses,
+    otherProps.className
+  );
+  const iconClasses = classNames44("mobius-select__icon", sharedClasses);
+  const errorMessageId = useId10();
+  const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
+  const describedBy = spaceDelimitedList([
+    shouldErrorMessageShow,
+    props["aria-describedby"]
+  ]);
+  const handleChange = (e) => {
+    if (onChange) {
+      onChange(e);
+    }
+  };
+  return /* @__PURE__ */ jsxs26(Stack, { className: "mobius mobius-select__outer", gap: "xs", children: [
+    label && /* @__PURE__ */ jsx53(Label, { ...labelProps, className: labelClasses, children: label }),
+    /* @__PURE__ */ jsxs26("div", { className: wrapperClasses, children: [
+      /* @__PURE__ */ jsx53(
+        "select",
+        {
+          ...otherProps,
+          ...fieldProps,
+          ref,
+          multiple: false,
+          className: selectClasses,
+          disabled: isDisabled,
+          "aria-invalid": !!errorMessage,
+          "aria-describedby": describedBy,
+          "aria-required": isRequired,
+          onChange: handleChange
+        }
+      ),
+      /* @__PURE__ */ jsx53("span", { className: iconClasses, children: /* @__PURE__ */ jsx53(Icon, { icon: chevronDown2 }) })
+    ] }),
+    errorMessage && /* @__PURE__ */ jsx53(ErrorMessage, { id: errorMessageId, errorMessage })
+  ] });
+});
+Select.displayName = "Select";
+
+// src/components/Slider/Slider.tsx
+import classNames45 from "classnames/dedupe";
+import { useRef as useRef13, useState as useState20 } from "react";
+
+// src/components/Slider/helpers.ts
+import { useCallback as useCallback5, useMemo as useMemo3 } 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 jsx54, jsxs as jsxs27 } 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 = useRef13(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 = classNames45("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__ */ jsxs27("div", { className: classes, children: [
+    /* @__PURE__ */ jsxs27("div", { className: "mobius-slider__label-wrapper", children: [
+      label && /* @__PURE__ */ jsx54(Label, { ...labelProps, children: label }),
+      label && /* @__PURE__ */ jsx54("output", { style: { flex: "1 0 auto", textAlign: "end" }, children: formattedValue })
+    ] }),
+    /* @__PURE__ */ jsx54("div", { ref: trackRef, className: "mobius-slider__track-wrapper", children: /* @__PURE__ */ jsx54(
+      "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__ */ jsxs27("div", { className: "mobius-slider__labels", children: [
+      /* @__PURE__ */ jsx54("div", { className: "mobius-slider__min-label", "data-testid": "min-label", children: minLabel }),
+      /* @__PURE__ */ jsx54("div", { className: "mobius-slider__max-label", "data-testid": "max-label", children: maxLabel })
+    ] })
+  ] });
+};
+
+// src/components/SVG/SVG.tsx
+import { forwardRef as forwardRef41, Children as Children8 } from "react";
+import classNames46 from "classnames/dedupe";
+import { jsx as jsx55 } from "react/jsx-runtime";
+var SVG = forwardRef41(
+  (props, ref) => {
+    const { children, className, ...otherProps } = props;
+    const classes = classNames46("mobius", "mobius-svg", className);
+    const svgNode = Children8.only(children);
+    const { children: svgChildren, viewBox, xmlns } = svgNode.props;
+    return /* @__PURE__ */ jsx55(
+      "svg",
+      {
+        viewBox,
+        xmlns,
+        ref,
+        ...otherProps,
+        className: classes,
+        children: svgChildren
+      }
+    );
+  }
+);
+SVG.displayName = "SVG";
+
+// src/components/Switch/Switch.tsx
+import {
+  forwardRef as forwardRef42,
+  useState as useState21,
+  useEffect as useEffect19
+} from "react";
+import classNames47 from "classnames/dedupe";
+import { jsx as jsx56, jsxs as jsxs28 } from "react/jsx-runtime";
+var Switch = forwardRef42((props, ref) => {
+  const {
+    checked = false,
+    className,
+    onChange,
+    isDisabled = false,
+    ...otherProps
+  } = props;
+  const [enabled, setEnabled] = useState21(checked);
+  useEffect19(() => {
+    setEnabled(checked);
+  }, [checked]);
+  const classes = classNames47(
+    "mobius",
+    "mobius-switch",
+    {
+      "mobius-switch--checked": enabled,
+      "mobius-switch--disabled": isDisabled
+    },
+    className
+  );
+  const handleChange = (event) => {
+    setEnabled(!enabled);
+    if (onChange) {
+      onChange(event);
+    }
+  };
+  return /* @__PURE__ */ jsxs28("label", { ref, className: classes, children: [
+    /* @__PURE__ */ jsx56(VisuallyHidden, { children: /* @__PURE__ */ jsx56("span", { children: enabled ? "On" : "Off" }) }),
+    /* @__PURE__ */ jsx56(
+      "input",
+      {
+        type: "checkbox",
+        role: "switch",
+        checked: enabled,
+        onChange: handleChange,
+        disabled: isDisabled,
+        ...otherProps
+      }
+    ),
+    /* @__PURE__ */ jsx56("span", { className: "mobius-switch__slider" })
+  ] });
+});
+Switch.displayName = "Switch";
+
+// src/components/Table/Table.tsx
+import { forwardRef as forwardRef43 } from "react";
+import classNames48 from "classnames/dedupe";
+import { jsx as jsx57 } from "react/jsx-runtime";
+var Table = forwardRef43(
+  (props, ref) => {
+    const classes = classNames48("mobius", "mobius-table", props.className);
+    return /* @__PURE__ */ jsx57("table", { ref, ...props, className: classes });
+  }
+);
+Table.displayName = "Table";
+
+// src/components/Table/Head.tsx
+import { forwardRef as forwardRef44 } from "react";
+import classNames49 from "classnames/dedupe";
+import { jsx as jsx58 } from "react/jsx-runtime";
+var Head = forwardRef44((props, ref) => {
+  const classes = classNames49("mobius", "mobius-table__head", props.className);
+  return /* @__PURE__ */ jsx58("thead", { ref, ...props, className: classes });
+});
+Head.displayName = "Table.Head";
+
+// src/components/Table/Body.tsx
+import { forwardRef as forwardRef45 } from "react";
+import classNames50 from "classnames/dedupe";
+import { jsx as jsx59 } from "react/jsx-runtime";
+var Body = forwardRef45((props, ref) => {
+  const classes = classNames50("mobius", "mobius-table__body", props.className);
+  return /* @__PURE__ */ jsx59("tbody", { ref, ...props, className: classes });
+});
+Body.displayName = "Table.Body";
+
+// src/components/Table/Foot.tsx
+import { forwardRef as forwardRef46 } from "react";
+import classNames51 from "classnames/dedupe";
+import { jsx as jsx60 } from "react/jsx-runtime";
+var Foot = forwardRef46((props, ref) => {
+  const classes = classNames51("mobius", "mobius-table__foot", props.className);
+  return /* @__PURE__ */ jsx60("tfoot", { ref, ...props, className: classes });
+});
+Foot.displayName = "Table.Foot";
+
+// src/components/Table/Row.tsx
+import { forwardRef as forwardRef47 } from "react";
+import classNames52 from "classnames/dedupe";
+import { jsx as jsx61 } from "react/jsx-runtime";
+var Row = forwardRef47(
+  (props, ref) => {
+    const classes = classNames52("mobius", "mobius-table__row", props.className);
+    return /* @__PURE__ */ jsx61("tr", { ref, ...props, className: classes });
+  }
+);
+Row.displayName = "Table.Row";
+
+// src/components/Table/HeaderCell.tsx
+import { forwardRef as forwardRef48 } from "react";
+import classNames53 from "classnames/dedupe";
+import { jsx as jsx62 } from "react/jsx-runtime";
+var HeaderCell = forwardRef48((props, ref) => {
+  const classes = classNames53(
+    "mobius",
+    "mobius-table__head-cell",
+    props.className
+  );
+  return /* @__PURE__ */ jsx62("th", { ...props, ref, className: classes });
+});
+HeaderCell.displayName = "Table.HeaderCell";
+
+// src/components/Table/Cell.tsx
+import { forwardRef as forwardRef49 } from "react";
+import classNames54 from "classnames/dedupe";
+import { jsx as jsx63 } from "react/jsx-runtime";
+var Cell = forwardRef49(
+  (props, ref) => {
+    const classes = classNames54(
+      "mobius",
+      "mobius-table__body-cell",
+      props.className
+    );
+    return /* @__PURE__ */ jsx63("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/TextArea/TextArea.tsx
+import classNames56 from "classnames/dedupe";
+import { forwardRef as forwardRef51 } from "react";
+
+// src/components/TextAreaInput/TextAreaInput.tsx
+import classNames55 from "classnames/dedupe";
+import { forwardRef as forwardRef50 } from "react";
+import { jsx as jsx64 } from "react/jsx-runtime";
+var TextAreaInput = forwardRef50((props, ref) => {
+  const { isSelected, isDisabled, isReadOnly, isRequired, ...otherProps } = props;
+  const classes = classNames55(
+    "mobius",
+    "mobius-text-area__input",
+    {
+      "--is-disabled": isDisabled,
+      "--is-selected": isSelected,
+      "--is-required": isRequired
+    },
+    otherProps.className
+  );
+  return /* @__PURE__ */ jsx64(
+    "textarea",
+    {
+      ref,
+      ...otherProps,
+      required: isRequired,
+      readOnly: isReadOnly,
+      className: classes
+    }
+  );
+});
+TextAreaInput.displayName = "TextAreaInput";
+
+// src/components/TextArea/TextArea.tsx
+import { jsx as jsx65, jsxs as jsxs29 } from "react/jsx-runtime";
+var TextArea = forwardRef51((props, ref) => {
+  const {
+    isDisabled,
+    className,
+    errorMessage,
+    label,
+    validationState,
+    isInvalid,
+    ...otherProps
+  } = props;
+  const { inputProps, labelProps, errorMessageProps } = useTextField(props);
+  const classes = classNames56("mobius", "mobius-text-area", className);
+  const validationClasses = useValidationClasses({
+    validationState,
+    isInvalid
+  });
+  const inputClasses = classNames56(
+    "mobius-text-area__input",
+    validationClasses
+  );
+  const labelClasses = classNames56(
+    {
+      "--is-disabled": isDisabled
+    },
+    validationClasses
+  );
+  return /* @__PURE__ */ jsxs29(Stack, { className: classes, gap: "xs", children: [
+    label && /* @__PURE__ */ jsx65(Label, { ...labelProps, className: labelClasses, children: props.label }),
+    /* @__PURE__ */ jsx65(
+      TextAreaInput,
+      {
+        ...otherProps,
+        ...inputProps,
+        ref,
+        className: inputClasses,
+        isDisabled,
+        "aria-invalid": errorMessage != null
+      }
+    ),
+    /* @__PURE__ */ jsx65(ErrorMessage, { ...errorMessageProps, errorMessage })
+  ] });
+});
+TextArea.displayName = "TextArea";
+
+// src/components/Title/Title.tsx
+import { forwardRef as forwardRef52 } from "react";
+import classNames57 from "classnames/dedupe";
+import { jsx as jsx66, jsxs as jsxs30 } from "react/jsx-runtime";
+var Title = forwardRef52(
+  (props, ref) => {
+    const {
+      elementType: Element = "div",
+      title,
+      description,
+      ...otherProps
+    } = props;
+    const classes = classNames57("mobius", "mobius-title", otherProps.className);
+    const headerClasses = classNames57("mobius", "mobius-title__header");
+    const contentClasses = classNames57("mobius", "mobius-title__description");
+    const containerClasses = classNames57("mobius", "mobius-title__container");
+    return /* @__PURE__ */ jsx66(Element, { ref, ...otherProps, className: classes, children: /* @__PURE__ */ jsxs30(Flex, { flexDirection: "column", className: containerClasses, children: [
+      /* @__PURE__ */ jsx66("p", { className: headerClasses, children: title }),
+      /* @__PURE__ */ jsx66("p", { className: contentClasses, children: description })
+    ] }) });
+  }
+);
+Title.displayName = "Title";
+
+// src/components/Trust/Trust.tsx
+import classNames58 from "classnames/dedupe";
+import { forwardRef as forwardRef53, useEffect as useEffect20, useRef as useRef14, useState as useState22 } from "react";
+
+// src/components/Trust/constants.ts
+var REQUIRED_TRUSTPILOT_CLASS_NAME = "trustpilot-widget";
+var SIMPLYBUSINESS_UNIT_ID = "5ca35a3da72b330001954cef";
+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"
+};
+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"
+    }
+  }
+};
+
+// src/components/Trust/Trust.tsx
+import { jsx as jsx67 } from "react/jsx-runtime";
+var Trust = forwardRef53((props, ref) => {
+  const {
+    elementType: Element = "div",
+    variant,
+    theme,
+    locale,
+    height,
+    width,
+    stars,
+    className
+  } = props;
+  const [isMounted, setIsMounted] = useState22(false);
+  const trustRef = useRef14(null);
+  const {
+    templateId,
+    className: variantClassName,
+    styles
+  } = TRUSTPILOT_WIDGET[variant];
+  const link = TRUSTPILOT_LINKS[locale];
+  const dataProps = {
+    "data-businessunit-id": SIMPLYBUSINESS_UNIT_ID,
+    "data-locale": locale,
+    "data-template-id": templateId,
+    "data-theme": theme,
+    "data-style-width": width || "100%",
+    "data-style-height": height,
+    "data-stars": stars
+  };
+  const classes = classNames58(
+    "mobius",
+    "mobius-trust",
+    REQUIRED_TRUSTPILOT_CLASS_NAME,
+    {
+      [`--is-${theme}`]: theme,
+      [variantClassName]: variant
+    },
+    className
+  );
+  useEffect20(() => {
+    const hasTrustpilotLoaded = trustRef.current && window?.Trustpilot && window?.Trustpilot.loadFromElement;
+    if (isMounted && hasTrustpilotLoaded) {
+      window.Trustpilot.loadFromElement(trustRef.current, true);
+    }
+  }, [isMounted]);
+  useEffect20(() => {
+    setIsMounted(true);
+  }, []);
+  if (!isMounted) return /* @__PURE__ */ jsx67("div", { style: styles });
+  return /* @__PURE__ */ jsx67(
+    Element,
+    {
+      ref: mergeRefs([trustRef, ref]),
+      className: classes,
+      style: styles,
+      ...dataProps,
+      children: /* @__PURE__ */ jsx67(
+        "a",
+        {
+          href: link,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "mobius-trust__link",
+          children: "Trustpilot"
+        }
+      )
+    }
+  );
+});
+export {
+  Accordion,
+  AddressLookup,
+  Alert,
+  Box,
+  BreadcrumbItem,
+  Breadcrumbs,
+  Button,
+  Checkbox,
+  CheckboxGroup,
+  Combobox,
+  Container,
+  DEFAULT_BREAKPOINTS,
+  Divider,
+  Drawer2 as Drawer,
+  DropdownMenu2 as DropdownMenu,
+  ErrorMessage,
+  Fieldset,
+  Flex,
+  Grid2 as Grid,
+  Icon,
+  Image,
+  Label,
+  Link,
+  LinkButton,
+  List,
+  ListItem,
+  LoadingIndicator,
+  Logo,
+  LoqateAddressLookupService,
+  Modal2 as Modal,
+  NumberField,
+  Option2 as Option,
+  PasswordField,
+  Popover,
+  Progress,
+  Radio,
+  RadioGroup,
+  SVG,
+  Segment,
+  SegmentGroup,
+  Select,
+  Slider,
+  Stack,
+  Switch,
+  Table2 as Table,
+  Text,
+  TextArea,
+  TextAreaInput,
+  TextField,
+  Title,
+  Trust,
+  VisuallyHidden,
+  useBodyScrollLock,
+  useBreakpoint,
+  useButton,
+  useDebouncedValue,
+  useDeprecationWarning,
+  useDialog,
+  useDialogPolyfill,
+  useDrawer,
+  useLabel,
+  useModal,
+  useOnClickOutside,
+  useOnUnmount,
+  usePrefersReducedMotion,
+  useRenderCount,
+  useTextField,
+  useValidationClasses,
+  useWindowEvent
+};