@simplybusiness/mobius 5.25.2 → 5.26.0

package/dist/cjs/index.js

@@ -1,23 +1,4169 @@
-"use client";
 "use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-_export_star(require("./components"), exports);
-_export_star(require("./hooks"), exports);
-_export_star(require("./types"), exports);
-function _export_star(from, to) {
-    Object.keys(from).forEach(function(k) {
-        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
-            Object.defineProperty(to, k, {
-                enumerable: true,
-                get: function() {
-                    return from[k];
-                }
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// index.tsx
+var index_exports = {};
+__export(index_exports, {
+  Accordion: () => Accordion,
+  AddressLookup: () => AddressLookup,
+  Alert: () => Alert,
+  Box: () => Box,
+  BreadcrumbItem: () => BreadcrumbItem,
+  Breadcrumbs: () => Breadcrumbs,
+  Button: () => Button,
+  Checkbox: () => Checkbox,
+  CheckboxGroup: () => CheckboxGroup,
+  Combobox: () => Combobox,
+  Container: () => Container,
+  DEFAULT_BREAKPOINTS: () => DEFAULT_BREAKPOINTS,
+  Divider: () => Divider,
+  Drawer: () => Drawer2,
+  DropdownMenu: () => DropdownMenu2,
+  ErrorMessage: () => ErrorMessage,
+  Fieldset: () => Fieldset,
+  Flex: () => Flex,
+  Grid: () => Grid2,
+  Icon: () => Icon,
+  Image: () => Image,
+  Label: () => Label,
+  Link: () => Link,
+  LinkButton: () => LinkButton,
+  List: () => List,
+  ListItem: () => ListItem,
+  LoadingIndicator: () => LoadingIndicator,
+  Logo: () => Logo,
+  LoqateAddressLookupService: () => LoqateAddressLookupService,
+  Modal: () => Modal2,
+  NumberField: () => NumberField,
+  Option: () => Option2,
+  PasswordField: () => PasswordField,
+  Popover: () => Popover,
+  Progress: () => Progress,
+  Radio: () => Radio,
+  RadioGroup: () => RadioGroup,
+  SVG: () => SVG,
+  Segment: () => Segment,
+  SegmentGroup: () => SegmentGroup,
+  Select: () => Select,
+  Slider: () => Slider,
+  Stack: () => Stack,
+  Switch: () => Switch,
+  Table: () => Table2,
+  Text: () => Text,
+  TextArea: () => TextArea,
+  TextAreaInput: () => TextAreaInput,
+  TextField: () => TextField,
+  Title: () => Title,
+  Trust: () => Trust,
+  VisuallyHidden: () => VisuallyHidden,
+  useBodyScrollLock: () => useBodyScrollLock,
+  useBreakpoint: () => useBreakpoint,
+  useButton: () => useButton,
+  useDebouncedValue: () => useDebouncedValue,
+  useDeprecationWarning: () => useDeprecationWarning,
+  useDialog: () => useDialog,
+  useDialogPolyfill: () => useDialogPolyfill,
+  useDrawer: () => useDrawer,
+  useLabel: () => useLabel,
+  useModal: () => useModal,
+  useOnClickOutside: () => useOnClickOutside,
+  useOnUnmount: () => useOnUnmount,
+  usePrefersReducedMotion: () => usePrefersReducedMotion,
+  useRenderCount: () => useRenderCount,
+  useTextField: () => useTextField,
+  useValidationClasses: () => useValidationClasses,
+  useWindowEvent: () => useWindowEvent
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/Accordion/Accordion.tsx
+var import_icons = require("@simplybusiness/icons");
+var import_dedupe3 = __toESM(require("classnames/dedupe"));
+var import_react3 = require("react");
+
+// src/hooks/usePrefersReducedMotion/usePrefersReducedMotion.tsx
+var import_react = require("react");
+function usePrefersReducedMotion() {
+  const [prefersReducedMotion, setPrefersReducedMotion] = (0, import_react.useState)(false);
+  (0, import_react.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
+var import_react2 = require("react");
+var import_dedupe = __toESM(require("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
+var import_jsx_runtime = require("react/jsx-runtime");
+var Flex = (0, import_react2.forwardRef)(
+  (props, ref) => {
+    const {
+      elementType: Element = "div",
+      style,
+      className,
+      ...otherProps
+    } = props;
+    const classes = (0, import_dedupe.default)("mobius", "mobius-flex", className);
+    const [styleProps, restProps] = splitProps(otherProps);
+    const flexStyles = buildFlexStyles(styleProps);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Element,
+      {
+        ref,
+        style: {
+          ...flexStyles,
+          ...style
+        },
+        className: classes,
+        ...restProps
+      }
+    );
+  }
+);
+Flex.displayName = "Flex";
+
+// src/components/Icon/Icon.tsx
+var import_dedupe2 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime2 = require("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 = (0, import_dedupe2.default)(
+    "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__ */ (0, import_jsx_runtime2.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__ */ (0, import_jsx_runtime2.jsx)("title", { children: titleText }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { fill: "currentColor", d: svgPathData })
+      ]
+    }
+  );
+}
+
+// src/components/Accordion/Accordion.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var AccordionLink = ({
+  text,
+  elementType: LinkElement = "span",
+  toggle,
+  onClick,
+  headerChildren,
+  ariaExpanded
+}) => {
+  const linkClasses = (0, import_dedupe3.default)("mobius-accordion__link", {
+    "--is-open": ariaExpanded
+  });
+  const iconClasses = (0, import_dedupe3.default)("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__ */ (0, import_jsx_runtime3.jsxs)(
+      Flex,
+      {
+        justifyContent: "space-between",
+        alignItems: "center",
+        className: "mobius-accordion__header",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "div",
+            {
+              className: linkClasses,
+              onClick: handleOnClick,
+              onKeyDown: handleKeyDown,
+              role: "button",
+              tabIndex: 0,
+              "aria-expanded": !!ariaExpanded,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LinkElement, { className: "mobius-accordion__link-text", children: text }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { icon: import_icons.chevronDown, className: iconClasses })
+              ]
+            }
+          ),
+          headerChildren
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      className: linkClasses,
+      onClick: handleOnClick,
+      onKeyDown: handleKeyDown,
+      role: "button",
+      tabIndex: 0,
+      "aria-expanded": !!ariaExpanded,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LinkElement, { className: "mobius-accordion__link-text", children: text }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { icon: import_icons.chevronDown, className: iconClasses })
+      ]
+    }
+  );
+};
+var Accordion = (0, import_react3.forwardRef)((props, ref) => {
+  const {
+    showText = "See more",
+    hideText = "See less",
+    headerPosition = "top",
+    startOpen = false,
+    linkElementType,
+    onOpen,
+    onClose,
+    onChange = () => {
+    },
+    headerChildren,
+    ...rest
+  } = props;
+  const [accordionState, setAccordionState] = (0, import_react3.useState)({
+    open: true,
+    withAnimation: false
+  });
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const containerClasses = (0, import_dedupe3.default)(
+    "mobius",
+    "mobius-accordion",
+    props.className,
+    {
+      "--should-animate": accordionState.withAnimation && !prefersReducedMotion,
+      "--is-open": accordionState.open
+    }
+  );
+  const contentContainerClasses = (0, import_dedupe3.default)(
+    "mobius-accordion__content-container",
+    {
+      "--is-open": accordionState.open
+    }
+  );
+  const contentClasses = (0, import_dedupe3.default)("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
+    });
+  };
+  (0, import_react3.useEffect)(() => {
+    setAccordionState({
+      open: startOpen,
+      withAnimation: false
+    });
+  }, [startOpen]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { ref, ...rest, className: containerClasses, children: [
+    headerPosition === "top" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      AccordionLink,
+      {
+        text: linkText,
+        elementType: linkElementType,
+        toggle: handleChange,
+        ariaExpanded: accordionState.open,
+        headerChildren
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        className: contentContainerClasses,
+        "aria-hidden": !accordionState.open,
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: contentClasses, children: props.children })
+      }
+    ),
+    headerPosition === "bottom" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      AccordionLink,
+      {
+        text: linkText,
+        toggle: handleChange,
+        ariaExpanded: accordionState.open,
+        headerChildren
+      }
+    )
+  ] });
+});
+Accordion.displayName = "Accordion";
+
+// src/components/AddressLookup/AddressLookup.tsx
+var import_icons3 = require("@simplybusiness/icons");
+var import_react26 = require("react");
+
+// src/components/Combobox/Combobox.tsx
+var import_dedupe10 = __toESM(require("classnames/dedupe"));
+var import_react25 = require("react");
+
+// src/hooks/useBodyScrollLock/useBodyScrollLock.ts
+var import_react4 = require("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";
+  }
+  (0, import_react4.useEffect)(() => {
+    if (enabled) {
+      enableScrollLock();
+    } else {
+      disableScrollLock();
+    }
+    return () => {
+      disableScrollLock();
+    };
+  }, [enabled]);
+}
+
+// src/hooks/useBreakpoint/useBreakpoint.tsx
+var import_lodash = __toESM(require("lodash.debounce"));
+var import_react5 = require("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] = (0, import_react5.useState)(
+    isClientSide ? window2.innerWidth : defaultBreakpoint.value
+  );
+  const [currentBreakpoint, setCurrentBreakpoint] = (0, import_react5.useState)(defaultBreakpoint);
+  const handleResize = () => {
+    setWindowWidth(window2.innerWidth);
+  };
+  (0, import_react5.useEffect)(() => {
+    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]);
+  (0, import_react5.useEffect)(() => {
+    window2.addEventListener("resize", (0, import_lodash.default)(handleResize, 200), {
+      passive: true
+    });
+    return () => window2.removeEventListener("resize", handleResize);
+  }, [window2]);
+  const up = (0, import_react5.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 = (0, import_react5.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
+var import_react6 = require("react");
+function useButton({
+  elementType = "button",
+  type = "button",
+  isDisabled = false,
+  href,
+  target,
+  rel,
+  role,
+  name,
+  value,
+  onClick,
+  onPress
+}) {
+  const realOnClick = (0, import_react6.useCallback)(
+    (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
+var import_react7 = require("react");
+function useDebouncedValue(value, delay = 0) {
+  const [debouncedValue, setDebouncedValue] = (0, import_react7.useState)(value);
+  (0, import_react7.useEffect)(() => {
+    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
+var import_react8 = require("react");
+var useDeprecationWarning = (props) => {
+  const hasWarned = (0, import_react8.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
+var import_react10 = require("react");
+
+// src/hooks/useDialogPolyfill/useDialogPolyfill.ts
+var import_react9 = require("react");
+var useDialogPolyfill = () => {
+  const [hasDialogSupport, setHasDialogSupport] = (0, import_react9.useState)(false);
+  const hasAlreadyLoaded = (0, import_react9.useRef)(false);
+  (0, import_react9.useEffect)(() => {
+    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] = (0, import_react10.useState)(false);
+  const shouldTransition = hasDialogSupport && transition.isEnabled;
+  const { polyfillDialog } = useDialogPolyfill();
+  (0, import_react10.useEffect)(() => {
+    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 = (0, import_react10.useCallback)(() => {
+    ref.current?.showModal();
+    onOpen?.();
+  }, [onOpen, ref]);
+  const close = (0, import_react10.useCallback)(() => {
+    ref.current?.close();
+    onClose?.();
+  }, [onClose, ref]);
+  const handleClose = (0, import_react10.useCallback)(
+    (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]
+  );
+  (0, import_react10.useEffect)(() => {
+    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
+var import_react11 = require("react");
+function useLabel({
+  id: providedId,
+  label,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  labelElementType = "label"
+}) {
+  let labelProps = {};
+  let fieldProps = {};
+  const hasWarnedAboutMissingLabels = (0, import_react11.useRef)(false);
+  const fallbackId = (0, import_react11.useId)();
+  const id = providedId || fallbackId;
+  const labelId = (0, import_react11.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
+var import_react12 = require("react");
+var useOnClickOutside = (ref, handler) => {
+  (0, import_react12.useEffect)(() => {
+    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
+var import_react13 = require("react");
+function useOnUnmount(callback) {
+  const callbackRef = (0, import_react13.useRef)(callback);
+  (0, import_react13.useEffect)(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+  (0, import_react13.useEffect)(
+    () => () => {
+      callbackRef.current();
+    },
+    []
+  );
+}
+
+// src/hooks/useRenderCount/useRenderCount.ts
+var import_react14 = require("react");
+function useRenderCount() {
+  const count = (0, import_react14.useRef)(1);
+  (0, import_react14.useEffect)(() => {
+    count.current += 1;
+  });
+  return count.current;
+}
+
+// src/hooks/useTextField/useTextField.tsx
+var import_react15 = require("react");
+function useTextField(props) {
+  const {
+    isDisabled = false,
+    isReadOnly = false,
+    isRequired = false,
+    inputElementType = "input"
+  } = props;
+  const { labelProps, fieldProps } = useLabel(props);
+  const descriptionId = (0, import_react15.useId)();
+  const descriptionProps = { id: descriptionId };
+  const errorMessageId = (0, import_react15.useId)();
+  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
+var import_react16 = require("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) {
+  (0, import_react16.useEffect)(() => {
+    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
+var import_dedupe8 = __toESM(require("classnames/dedupe"));
+var import_react21 = require("react");
+
+// src/components/ErrorMessage/ErrorMessage.tsx
+var import_icons2 = require("@simplybusiness/icons");
+var import_dedupe5 = __toESM(require("classnames/dedupe"));
+
+// src/components/Text/Text.tsx
+var import_react17 = require("react");
+var import_dedupe4 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var getElementType = (variant, elementType) => {
+  if (variant) {
+    return ["h1", "h2", "h3", "h4"].includes(variant) ? variant : "p";
+  }
+  return elementType || "p";
+};
+var Text = (0, import_react17.forwardRef)(
+  ({ elementType: Component = "p", ...props }, ref) => {
+    const { variant, className, spacing, ...otherProps } = props;
+    const elementType = getElementType(variant, Component);
+    const variantType = variant || elementType;
+    const classes = (0, import_dedupe4.default)(
+      "mobius",
+      "mobius-text",
+      { [`--is-${variantType}`]: variantType },
+      { [`--has-line-height-${spacing}`]: spacing },
+      className
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Component, { ref, ...otherProps, className: classes });
+  }
+);
+Text.displayName = "Text";
+
+// src/components/ErrorMessage/ErrorMessage.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var ErrorMessage = ({
+  id,
+  errorMessage,
+  className
+}) => {
+  const classes = (0, import_dedupe5.default)("mobius", "mobius-error-message", className);
+  if (!errorMessage) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { id, className: classes, "data-testid": "ErrorMessage", role: "alert", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon: import_icons2.error, className: "mobius-error-message__icon" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { elementType: "span", className: "mobius-error-message__text", children: errorMessage })
+  ] });
+};
+ErrorMessage.displayName = "ErrorMessage";
+
+// src/components/Label/Label.tsx
+var import_react18 = require("react");
+var import_dedupe6 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var Label = (0, import_react18.forwardRef)(
+  (props, ref) => {
+    const { elementType: Element = "label", children, ...otherProps } = props;
+    const classes = (0, import_dedupe6.default)("mobius", "mobius-label", props.className);
+    otherProps.className = classes;
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Element, { ref, ...otherProps, className: classes, children });
+  }
+);
+Label.displayName = "Label";
+
+// src/components/Stack/Stack.tsx
+var import_react19 = require("react");
+var import_dedupe7 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Stack = (0, import_react19.forwardRef)((props, ref) => {
+  const { elementType: Element = "div", gap, ...otherProps } = props;
+  const classes = (0, import_dedupe7.default)(
+    "mobius",
+    "mobius-stack",
+    {
+      [`--gap-${gap}`]: gap
+    },
+    otherProps.className
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Element, { ref, ...otherProps, className: classes });
+});
+Stack.displayName = "Stack";
+
+// src/components/TextField/adornmentWithClassName.ts
+var import_classnames = __toESM(require("classnames"));
+var import_react20 = require("react");
+var adornmentWithClassName = (component, validationClasses, className) => {
+  if (!component) return null;
+  return (0, import_react20.cloneElement)(component, {
+    className: (0, import_classnames.default)(
+      component.props.className,
+      validationClasses,
+      className
+    )
+  });
+};
+
+// src/components/TextField/TextField.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var TextField = (0, import_react21.forwardRef)((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 = (0, import_dedupe8.default)(validationClasses, textfieldClasses);
+  const labelClasses = (0, import_dedupe8.default)(
+    {
+      "--is-disabled": isDisabled
+    },
+    validationClasses
+  );
+  const containerClasses = (0, import_dedupe8.default)(
+    "mobius",
+    "mobius-text-field",
+    sharedClasses
+  );
+  const inputClasses = (0, import_dedupe8.default)(
+    "mobius",
+    "mobius-text-field__input",
+    sharedClasses
+  );
+  const inputWrapperClasses = (0, import_dedupe8.default)(
+    "mobius-text-field__input-wrapper",
+    sharedClasses
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Stack, { gap: "xs", className: containerClasses, children: [
+    label && !hidden && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Label, { ...labelProps, className: labelClasses, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "mobius-text-field__inner-container", children: [
+      adornmentWithClassName(
+        prefixOutside,
+        labelClasses,
+        "mobius-text-field__prefix-outside"
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: inputWrapperClasses, children: [
+        adornmentWithClassName(
+          prefixInside,
+          labelClasses,
+          "mobius-text-field__prefix-inside"
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "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__ */ (0, import_jsx_runtime8.jsx)("div", { className: "mobius-text-field__children", children }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ErrorMessage, { ...errorMessageProps, errorMessage })
+  ] });
+});
+TextField.displayName = "TextField";
+
+// src/components/VisuallyHidden/VisuallyHidden.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function VisuallyHidden(props) {
+  const {
+    className,
+    children,
+    elementType: Component = "div",
+    ...otherProps
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    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
+var import_classnames2 = __toESM(require("classnames"));
+
+// src/components/Combobox/Option.tsx
+var import_react22 = require("react");
+var import_dedupe9 = __toESM(require("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
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Option = ({
+  option,
+  isHighlighted,
+  onOptionSelect,
+  optionComponent: OptionComponent,
+  id
+}) => {
+  const optionRef = (0, import_react22.useRef)(null);
+  (0, import_react22.useEffect)(() => {
+    if (isHighlighted && optionRef.current && optionRef.current.scrollIntoView) {
+      optionRef.current.scrollIntoView({ block: "nearest" });
+    }
+  }, [isHighlighted]);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "li",
+    {
+      ref: optionRef,
+      role: "option",
+      id,
+      "aria-selected": isHighlighted,
+      onMouseDown: () => onOptionSelect(option),
+      className: (0, import_dedupe9.default)("mobius-combobox__option", "has-pii", {
+        "mobius-combobox__option--is-highlighted": isHighlighted
+      }),
+      children: OptionComponent ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(OptionComponent, { option, isHighlighted }) : getOptionLabel(option)
+    },
+    getOptionValue(option)
+  );
+};
+
+// src/components/Combobox/Listbox.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Listbox = ({
+  id,
+  options,
+  highlightedIndex,
+  highlightedGroupIndex,
+  onOptionSelect,
+  optionComponent
+}) => {
+  const classes = (0, import_classnames2.default)("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__ */ (0, import_jsx_runtime11.jsx)("div", { role: "listbox", id, className: classes, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "mobius-combobox__no-options", children: "No options" }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { role: "listbox", id, className: classes, children: isOptionGroup(options) ? options.map((option, groupIndex) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "ul",
+    {
+      role: "group",
+      "aria-labelledby": `${id}-group-${groupIndex}`,
+      className: "mobius-combobox__group",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "li",
+          {
+            role: "presentation",
+            id: `${id}-group-${groupIndex}`,
+            className: "mobius-combobox__group-label",
+            children: option.heading
+          }
+        ),
+        option.options.map((groupOption, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          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__ */ (0, import_jsx_runtime11.jsx)(
+    Option,
+    {
+      option,
+      isHighlighted: highlightedIndex === index,
+      onOptionSelect,
+      optionComponent,
+      id: getOptionId(option, 0, index)
+    },
+    index
+  )) : null });
+};
+
+// src/components/Combobox/useComboboxHighlight.tsx
+var import_react23 = require("react");
+function useComboboxHighlight(options) {
+  const [highlightedIndex, setHighlightedIndex] = (0, import_react23.useState)(
+    options && options.length ? 0 : -1
+  );
+  const [highlightedGroupIndex, setHighlightedGroupIndex] = (0, import_react23.useState)(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
+var import_react24 = require("react");
+function useComboboxOptions({
+  options,
+  asyncOptions,
+  delay = 300,
+  minSearchLength = 3,
+  inputValue = "",
+  skipNextDebounceRef,
+  onSearched
+}) {
+  const [filteredOptions, setFilteredOptions] = (0, import_react24.useState)(void 0);
+  const debouncedInputValue = useDebouncedValue(
+    inputValue,
+    // Don't debounce synchronous options
+    options ? 0 : delay
+  );
+  const [isLoading, setIsLoading] = (0, import_react24.useState)(false);
+  const [error3, setError] = (0, import_react24.useState)(null);
+  (0, import_react24.useEffect)(() => {
+    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
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var ComboboxInner = (0, import_react25.forwardRef)(
+  (props, ref) => {
+    const {
+      id,
+      defaultValue,
+      value,
+      options,
+      asyncOptions,
+      delay,
+      minSearchLength,
+      onSelected,
+      className,
+      placeholder,
+      icon,
+      onBlur,
+      onFocus,
+      onChange,
+      onSearched,
+      optionComponent,
+      errorMessage,
+      ...otherProps
+    } = props;
+    const skipNextDebounceRef = (0, import_react25.useRef)(false);
+    const fallbackRef = (0, import_react25.useRef)(null);
+    const [inputValue, setInputValue] = (0, import_react25.useState)(defaultValue || "");
+    const [isOpen, setIsOpen] = (0, import_react25.useState)(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 = (0, import_react25.useId)();
+    const statusId = (0, import_react25.useId)();
+    const blurTimeoutRef = (0, import_react25.useRef)(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:
+      }
+    };
+    (0, import_react25.useEffect)(() => {
+      if (value) {
+        setInputValue(value);
+      }
+    }, [value]);
+    const classes = (0, import_dedupe10.default)(
+      "mobius mobius-combobox",
+      {
+        "mobius-combobox--is-expanded": isOpen,
+        "mobius-combobox--is-loading": isLoading,
+        "mobius-combobox--is-mobile": isMobile
+      },
+      className
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { id, "data-testid": "mobius-combobox__wrapper", className: classes, children: [
+      isLoading && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        VisuallyHidden,
+        {
+          role: "status",
+          "aria-live": "polite",
+          id: statusId,
+          elementType: "div",
+          className: "mobius-combobox__status",
+          children: "Loading options"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        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__ */ (0, import_jsx_runtime12.jsx)(
+        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
+var import_jsx_runtime13 = require("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 = (0, import_react26.forwardRef)(
+  ({
+    addressLookupService,
+    onAddressSelected,
+    onError,
+    errorMessage,
+    ...otherProps
+  }, ref) => {
+    const [error3, _setError] = (0, import_react26.useState)(null);
+    const setError = (0, import_react26.useCallback)(
+      (newError) => {
+        if (newError != null) onError?.(newError);
+        _setError(newError);
+      },
+      [onError]
+    );
+    const asyncOptions = (0, import_react26.useCallback)(
+      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__ */ (0, import_jsx_runtime13.jsx)(
+      Combobox,
+      {
+        ...otherProps,
+        ref,
+        onSelected: handleSelected,
+        asyncOptions,
+        errorMessage: realErrorMessage,
+        icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { icon: import_icons3.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
+var import_icons4 = require("@simplybusiness/icons");
+var import_dedupe11 = __toESM(require("classnames/dedupe"));
+var import_react27 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var Alert = (0, import_react27.forwardRef)(
+  (props, ref) => {
+    const {
+      elementType: Element = "div",
+      variant = "info",
+      show = true,
+      header,
+      children,
+      ...otherProps
+    } = props;
+    if (!show) return null;
+    const classes = (0, import_dedupe11.default)(
+      "mobius",
+      "mobius-alert",
+      {
+        "--info": variant === "info",
+        "--success": variant === "success",
+        "--warning": variant === "warning",
+        "--error": variant === "error",
+        "--has-header": header
+      },
+      otherProps.className
+    );
+    const icon = {
+      info: import_icons4.circleInfo,
+      success: import_icons4.circleTick,
+      warning: import_icons4.warning,
+      error: import_icons4.error
+    };
+    const headerClasses = (0, import_dedupe11.default)("mobius", "mobius-alert__header");
+    const iconClasses = (0, import_dedupe11.default)("mobius", "mobius-alert__icon");
+    const contentClasses = (0, import_dedupe11.default)("mobius", "mobius-alert__content");
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Element, { ref, role: "alert", ...otherProps, className: classes, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: iconClasses, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { icon: icon[variant] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { children: [
+        header && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: headerClasses, children: header }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: contentClasses, children })
+      ] })
+    ] });
+  }
+);
+Alert.displayName = "Alert";
+
+// src/components/Box/Box.tsx
+var import_react28 = require("react");
+var import_dedupe12 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var Box = (0, import_react28.forwardRef)(
+  (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 = (0, import_dedupe12.default)("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__ */ (0, import_jsx_runtime15.jsx)(
+      Element,
+      {
+        ref,
+        style: styleProps,
+        ...otherProps,
+        className: classes
+      }
+    );
+  }
+);
+Box.displayName = "Box";
+
+// src/components/Breadcrumbs/Breadcrumbs.tsx
+var import_react29 = require("react");
+var import_dedupe13 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var Breadcrumbs = (0, import_react29.forwardRef)((props, ref) => {
+  const { "aria-label": ariaLabel = "Breadcrumbs" } = props;
+  const { navProps } = { navProps: { "aria-label": ariaLabel } };
+  const { children, ...otherProps } = props;
+  const childArray = import_react29.Children.toArray(children);
+  const classes = (0, import_dedupe13.default)(
+    "mobius",
+    "mobius-breadcrumb",
+    otherProps.className
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("nav", { ref, ...otherProps, ...navProps, className: classes, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("ul", { children: childArray.map(
+    (child, i) => (0, import_react29.cloneElement)(child, {
+      isCurrent: i === childArray.length - 1
+    })
+  ) }) });
+});
+Breadcrumbs.displayName = "Breadcrumbs";
+
+// src/components/Breadcrumbs/BreadcrumbItem.tsx
+var import_react30 = require("react");
+var import_dedupe14 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var BreadcrumbItem = (0, import_react30.forwardRef)((props, ref) => {
+  const {
+    isDisabled = false,
+    isCurrent = false,
+    "aria-current": ariaCurrent = "page",
+    children,
+    separator = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(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 = (0, import_dedupe14.default)(
+    "mobius",
+    "mobius-breadcrumb__item",
+    props.className
+  );
+  const child = typeof children === "string" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { ...itemProps, children }) : import_react30.Children.only(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("li", { className: classes, children: [
+    (0, import_react30.cloneElement)(child, { ...child.props, ...itemProps, ref }),
+    !props.isCurrent && separator
+  ] });
+});
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+// src/components/Button/Button.tsx
+var import_react31 = require("react");
+var import_dedupe15 = __toESM(require("classnames/dedupe"));
+
+// src/components/Button/Loading.tsx
+var import_icons5 = require("@simplybusiness/icons");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var Loading = (props) => {
+  const { children } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "mobius-button__icon-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { icon: import_icons5.loading, spin: true, size: "md" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VisuallyHidden, { className: "mobius-button__loading-text", children: "Loading" }),
+    children
+  ] });
+};
+
+// src/components/Button/Success.tsx
+var import_icons6 = require("@simplybusiness/icons");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var Success = () => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "mobius-button__icon-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { icon: import_icons6.tick, size: "md" }) }),
+  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(VisuallyHidden, { className: "mobius-button__success-text", children: "Success" })
+] });
+
+// src/components/Button/Button.tsx
+var import_jsx_runtime20 = (
+  // @ts-expect-error - ref type is not correct
+  require("react/jsx-runtime")
+);
+var Button = (0, import_react31.forwardRef)((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 = (0, import_dedupe15.default)(
+    "mobius",
+    "mobius-button",
+    `--variant-${buttonVariant}`,
+    `--size-${size}`,
+    {
+      "--is-disabled": isDisabled,
+      "--is-loading": isLoading,
+      "--is-success": isSuccess && !isLoading
+    },
+    otherProps.className
+  );
+  otherProps.className = classes;
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Component, { ref, ...buttonProps, ...otherProps, children: [
+    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Loading, { children }) : children,
+    isSuccess && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Success, {})
+  ] });
+});
+Button.displayName = "Button";
+
+// src/components/Checkbox/Checkbox.tsx
+var import_react32 = require("react");
+var import_dedupe16 = __toESM(require("classnames/dedupe"));
+var import_icons7 = require("@simplybusiness/icons");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var Checkbox = (0, import_react32.forwardRef)((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] = (0, import_react32.useState)(defaultSelected);
+  const fallbackRef = (0, import_react32.useRef)(null);
+  const refObj = ref || fallbackRef;
+  const inputId = (0, import_react32.useId)();
+  const isControlled = typeof selected === "boolean";
+  (0, import_react32.useEffect)(() => {
+    if (isControlled) {
+      setChecked(selected);
+    }
+  }, [selected, isControlled]);
+  const validationClasses = useValidationClasses({
+    validationState,
+    isInvalid
+  });
+  const sharedClasses = (0, import_dedupe16.default)(
+    {
+      "--is-disabled": isDisabled,
+      "--is-selected": checked,
+      "--is-required": typeof isRequired === "boolean" && isRequired,
+      "--is-optional": typeof isRequired === "boolean" && !isRequired
+    },
+    validationClasses
+  );
+  const wrapperClasses = (0, import_dedupe16.default)(
+    "mobius",
+    "mobius-checkbox",
+    sharedClasses,
+    className
+  );
+  const labelClasses = (0, import_dedupe16.default)("mobius-checkbox__label", sharedClasses);
+  const inputClasses = (0, import_dedupe16.default)("mobius-checkbox__input", sharedClasses);
+  const iconClasses = (0, import_dedupe16.default)("mobius-checkbox__icon", sharedClasses);
+  const errorMessageId = (0, import_react32.useId)();
+  const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
+  const describedBy = spaceDelimitedList([
+    shouldErrorMessageShow,
+    ariaDescribedBy
+  ]);
+  const labelId = (0, import_react32.useId)();
+  const handleChange = (event) => {
+    setChecked(!checked);
+    if (onChange) {
+      onChange(event, isLastItem);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Stack, { gap: "xs", className: wrapperClasses, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { className: labelClasses, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        "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__ */ (0, import_jsx_runtime21.jsx)(
+        Icon,
+        {
+          icon: checked ? import_icons7.squareTick : import_icons7.square,
+          size: "md",
+          className: iconClasses
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { id: labelId, className: "mobius-checkbox__visible-label", children: label })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ErrorMessage, { id: errorMessageId, errorMessage })
+  ] });
+});
+Checkbox.displayName = "Checkbox";
+
+// src/components/Checkbox/CheckboxGroup.tsx
+var import_dedupe17 = __toESM(require("classnames/dedupe"));
+var import_react33 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var CheckboxGroup = (0, import_react33.forwardRef)((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] = (0, import_react33.useState)(defaultValue);
+  const checkboxGroupClasses = (0, import_dedupe17.default)(
+    "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 = (0, import_dedupe17.default)(
+    {
+      "--is-disabled": isDisabled
+    },
+    validationClasses
+  );
+  const errorMessageId = (0, import_react33.useId)();
+  const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
+  const describedBy = spaceDelimitedList([
+    shouldErrorMessageShow,
+    props["aria-describedby"]
+  ]);
+  const labelId = (0, import_react33.useId)();
+  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 = import_react33.Children.toArray(children);
+  const lastCheckbox = childrenArray.filter(
+    (child) => (0, import_react33.isValidElement)(child) && child.type === Checkbox
+  ).pop();
+  const lastCheckboxIsChecked = lastCheckbox && selected.includes(lastCheckbox.props.value);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    "div",
+    {
+      ...rest,
+      "aria-labelledby": props["aria-labelledby"] || labelId,
+      ref,
+      className: checkboxGroupClasses,
+      role: "group",
+      style: {
+        "--checkbox-items-per-row": itemsPerRow || import_react33.Children.count(children)
+      },
+      children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Label, { elementType: "span", id: labelId, className: labelClasses, children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "mobius-checkbox-group__wrapper", children: childrenArray.map((child) => {
+          if ((0, import_react33.isValidElement)(child)) {
+            const isLastItem = child === lastCheckbox;
+            const isChildDisabled = isDisabled || lastItemDisables && lastCheckboxIsChecked && !isLastItem;
+            return (0, import_react33.cloneElement)(child, {
+              isDisabled: isChildDisabled,
+              isRequired,
+              isReadOnly,
+              isInvalid,
+              isLastItem,
+              selected: selected.includes(child.props.value),
+              onChange: handleChange,
+              "aria-describedby": describedBy
             });
+          }
+          return child;
+        }) }),
+        errorMessage && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ErrorMessage, { id: errorMessageId, errorMessage })
+      ]
+    }
+  );
+});
+CheckboxGroup.displayName = "CheckboxGroup";
+
+// src/components/Container/Container.tsx
+var import_react34 = require("react");
+var import_dedupe18 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var Container = (0, import_react34.forwardRef)((props, ref) => {
+  const { elementType: Element = "div", size = "md", ...otherProps } = props;
+  const classes = (0, import_dedupe18.default)(
+    "mobius",
+    "mobius-container",
+    sizeClasses(size),
+    otherProps.className
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Element, { ref, ...otherProps, className: classes });
+});
+Container.displayName = "Container";
+
+// src/components/Divider/Divider.tsx
+var import_dedupe19 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var Divider = ({
+  "aria-orientation": ariaOrientation = "horizontal",
+  className,
+  ...rest
+}) => {
+  const classes = (0, import_dedupe19.default)("mobius", "mobius-divider", className);
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    "div",
+    {
+      className: classes,
+      role: "separator",
+      "aria-orientation": ariaOrientation,
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "mobius-divider__inner" })
+    }
+  );
+};
+Divider.displayName = "Divider";
+
+// src/components/Drawer/Content.tsx
+var import_react35 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var Content = (0, import_react35.forwardRef)(
+  ({ children, ...otherProps }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ref, ...otherProps, className: "mobius-drawer__content", children })
+);
+Content.displayName = "Content";
+
+// src/components/Drawer/Drawer.tsx
+var import_dedupe20 = __toESM(require("classnames/dedupe"));
+var import_react37 = require("react");
+
+// src/components/Drawer/DrawerContext.tsx
+var import_react36 = require("react");
+var DrawerContext = (0, import_react36.createContext)({
+  onClose: () => {
+  },
+  closeLabel: void 0
+});
+
+// src/components/Drawer/Drawer.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var TRANSITION_CSS_VARIABLE = "--drawer-transition-duration";
+var Drawer = (0, import_react37.forwardRef)((props, ref) => {
+  const {
+    isOpen,
+    className,
+    closeLabel,
+    direction,
+    announce = "Drawer opened on screen",
+    onOpen,
+    onClose,
+    children
+  } = props;
+  const dialogRef = (0, import_react37.useRef)(null);
+  const [shouldTransition, setShouldTransition] = (0, import_react37.useState)(false);
+  const { close } = useDialog({
+    ref: dialogRef,
+    isOpen,
+    onOpen,
+    onClose,
+    transition: {
+      isEnabled: true,
+      CSSVariable: TRANSITION_CSS_VARIABLE
+    }
+  });
+  const hiddenId = `screen-reader-announce-${(0, import_react37.useId)()}`;
+  const dialogClasses = (0, import_dedupe20.default)(
+    "mobius",
+    "mobius-drawer",
+    `--${direction}`,
+    className,
+    {
+      "--should-transition": shouldTransition
+    }
+  );
+  (0, import_react37.useEffect)(() => {
+    setShouldTransition(supportsDialog());
+  }, []);
+  const contextValue = (0, import_react37.useMemo)(
+    () => ({
+      onClose: close,
+      closeLabel
+    }),
+    [close, closeLabel]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+    "dialog",
+    {
+      id: (0, import_react37.useId)(),
+      ref: mergeRefs([dialogRef, ref]),
+      onCancel: close,
+      className: dialogClasses,
+      "aria-describedby": hiddenId,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { id: hiddenId, children: announce }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DrawerContext.Provider, { value: contextValue, children })
+      ]
+    }
+  );
+});
+Drawer.displayName = "Drawer";
+
+// src/components/Drawer/useDrawer.ts
+var import_react38 = require("react");
+var useDrawer = () => {
+  const { onClose, closeLabel } = (0, import_react38.useContext)(DrawerContext);
+  return { onClose, closeLabel };
+};
+
+// src/components/Drawer/Header.tsx
+var import_react39 = require("react");
+var import_icons8 = require("@simplybusiness/icons");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var Header = (0, import_react39.forwardRef)(
+  ({ children, ...otherProps }, ref) => {
+    const { onClose, closeLabel } = useDrawer();
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("header", { ref, ...otherProps, className: "mobius-drawer__header", children: [
+      children,
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+        Button,
+        {
+          "aria-label": "Close",
+          variant: "basic",
+          onPress: onClose,
+          className: "mobius-drawer__close",
+          size: "sm",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon, { icon: import_icons8.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
+var import_react40 = require("react");
+var import_react_accessible_dropdown_menu_hook = __toESM(require("react-accessible-dropdown-menu-hook"));
+var import_dedupe21 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var DropdownMenu = (0, import_react40.forwardRef)((props, ref) => {
+  const {
+    elementType: Element = "nav",
+    trigger,
+    label = "Menu",
+    children,
+    ...otherProps
+  } = props;
+  const [activeId, setActiveId] = (0, import_react40.useState)(null);
+  const numberOfItems = import_react40.Children.count(children);
+  const {
+    buttonProps,
+    itemProps,
+    isOpen: open,
+    setIsOpen
+  } = (0, import_react_accessible_dropdown_menu_hook.default)(numberOfItems);
+  const classes = (0, import_dedupe21.default)(
+    "mobius",
+    "mobius-dropdown-menu",
+    otherProps.className
+  );
+  const triggerClasses = (0, import_dedupe21.default)("mobius", "mobius-dropdown-menu__trigger");
+  const listClasses = (0, import_dedupe21.default)("mobius", "mobius-dropdown-menu__list", {
+    "--is-open": open
+  });
+  const handleChildClick = ({ onClick }, index) => {
+    setActiveId(index);
+    setIsOpen(false);
+    if (onClick) {
+      onClick();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Element, { ref, ...otherProps, className: classes, children: [
+    trigger ? (0, import_react40.cloneElement)(trigger, {
+      className: triggerClasses,
+      open,
+      label,
+      ...buttonProps
+    }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Button, { className: triggerClasses, ...buttonProps, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("ul", { className: listClasses, role: "menu", children: import_react40.Children.map(children, (child, index) => {
+      if ((0, import_react40.isValidElement)(child)) {
+        return (0, import_react40.cloneElement)(child, {
+          onClick: () => handleChildClick(child.props, index),
+          active: index === activeId,
+          ...itemProps[index]
+        });
+      }
+      return child;
+    }) })
+  ] });
+});
+DropdownMenu.displayName = "DropdownMenu";
+
+// src/components/DropdownMenu/Item.tsx
+var import_react41 = require("react");
+var import_dedupe22 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var Item = (0, import_react41.forwardRef)(
+  (props, ref) => {
+    const {
+      elementType: Element = "li",
+      active,
+      onClick,
+      children,
+      ...otherProps
+    } = props;
+    const classes = (0, import_dedupe22.default)(
+      "mobius",
+      "mobius-dropdown-menu__item",
+      { "--is-active": active },
+      otherProps.className
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Element, { ref, onClick, ...otherProps, children: import_react41.Children.map(children, (child) => {
+      if ((0, import_react41.isValidElement)(child)) {
+        const childClasses = (0, import_dedupe22.default)(child.props.className, classes);
+        return (0, import_react41.cloneElement)(child, {
+          className: childClasses
+        });
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("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
+var import_dedupe23 = __toESM(require("classnames/dedupe"));
+var import_react42 = require("react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var useFieldset = (props) => {
+  const { legend } = props;
+  let legendProps = {};
+  let containerProps = {
+    role: "group"
+  };
+  const legendId = (0, import_react42.useId)();
+  if (legend) {
+    legendProps = {
+      ...legendProps,
+      id: legendId
+    };
+    containerProps = {
+      ...containerProps,
+      "aria-labelledby": legendId
+    };
+  }
+  return {
+    legendProps,
+    containerProps
+  };
+};
+var Fieldset = (0, import_react42.forwardRef)((props, _ref) => {
+  const {
+    children,
+    legend,
+    legendComponent = /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("legend", {}),
+    ...otherProps
+  } = props;
+  const { legendProps, containerProps } = useFieldset(props);
+  const classes = (0, import_dedupe23.default)("mobius", "mobius-fieldset", props.className);
+  legendProps.className = "mobius-fieldset__legend";
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Flex, { ...containerProps, ...otherProps, className: classes, children: [
+    legend && (0, import_react42.cloneElement)(legendComponent, { ...legendProps }, [legend]),
+    children
+  ] });
+});
+Fieldset.displayName = "Fieldset";
+
+// src/components/Grid/Grid.tsx
+var import_react43 = require("react");
+var import_dedupe24 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var Grid = (0, import_react43.forwardRef)(
+  (props, _ref) => {
+    const {
+      columns = 12,
+      gap,
+      columnGap,
+      rowGap,
+      alignContent,
+      alignItems,
+      justifyContent,
+      justifyItems,
+      className,
+      style,
+      ...rest
+    } = props;
+    const classes = (0, import_dedupe24.default)("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 from;
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { style: styles, className: classes, ...rest });
+  }
+);
+Grid.displayName = "Grid";
+
+// src/components/Grid/Item.tsx
+var import_react44 = require("react");
+var import_dedupe25 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime32 = require("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 = (0, import_react44.forwardRef)((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] = (0, import_react44.useState)();
+  const classes = (0, import_dedupe25.default)("mobius-grid__item", className);
+  (0, import_react44.useEffect)(() => {
+    setResponsiveSpan(breakpointMap[breakpointSize]);
+  }, [breakpointSize, breakpointMap]);
+  const styles = {
+    gridColumn: responsiveSpan ? `span ${responsiveSpan}` : void 0,
+    alignSelf,
+    justifySelf
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("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
+var import_react45 = require("react");
+var import_dedupe26 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var Image = (0, import_react45.forwardRef)(
+  ({ alt, elementType: Component = "img", ...otherProps }, ref) => {
+    const classes = (0, import_dedupe26.default)("mobius", "mobius-image", otherProps.className);
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Component, { alt, ref, ...otherProps, className: classes });
+  }
+);
+Image.displayName = "Image";
+
+// src/components/Link/Link.tsx
+var import_react46 = require("react");
+var import_dedupe27 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var Link = (0, import_react46.forwardRef)(
+  (props, ref) => {
+    const {
+      isDisabled = false,
+      elementType: Component = "a",
+      style,
+      className,
+      ...otherProps
+    } = props;
+    const disabledStyles = {
+      pointerEvents: "none"
+    };
+    const styles = { ...style, ...isDisabled && disabledStyles };
+    const classes = (0, import_dedupe27.default)("mobius", "mobius-link", className, {
+      "--is-disabled": isDisabled
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      Component,
+      {
+        ref,
+        style: styles,
+        className: classes,
+        "aria-disabled": isDisabled,
+        ...otherProps,
+        children: props.children
+      }
+    );
+  }
+);
+Link.displayName = "Link";
+
+// src/components/LinkButton/LinkButton.tsx
+var import_dedupe28 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime35 = (
+  // @ts-expect-error Button only allows elementType of string, not React component
+  require("react/jsx-runtime")
+);
+function LinkButton({
+  href,
+  children,
+  className,
+  elementType = "a",
+  ...rest
+}) {
+  if (!href) {
+    throw new Error("LinkButton requires a href prop");
+  }
+  const classes = (0, import_dedupe28.default)("mobius", "mobius-link-button", className);
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Button, { elementType, href, className: classes, ...rest, children });
 }
 
-//# sourceMappingURL=index.js.map
+// src/components/List/List.tsx
+var import_react47 = require("react");
+var import_dedupe29 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var List = (0, import_react47.forwardRef)(
+  (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 = (0, import_dedupe29.default)(
+      "mobius",
+      "mobius-list",
+      {
+        "--has-icon": icon,
+        [`--is-${liststyletype}`]: liststyletype
+      },
+      otherProps.className
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Component, { ref, ...mappedProps, className: classes, children: import_react47.Children.map(children, (child) => {
+      if ((0, import_react47.isValidElement)(child)) {
+        return (0, import_react47.cloneElement)(child, {
+          parentIcon: icon
+        });
+      }
+      return child;
+    }) });
+  }
+);
+List.displayName = "List";
+
+// src/components/List/ListItem.tsx
+var import_react48 = require("react");
+var import_dedupe30 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var ListItem = (0, import_react48.forwardRef)((props, ref) => {
+  const { parentIcon, icon, children, ...otherProps } = props;
+  const iconContent = icon || parentIcon;
+  const classes = (0, import_dedupe30.default)(
+    "mobius",
+    "mobius-list__item",
+    {
+      "--has-icon": iconContent
+    },
+    props.className
+  );
+  const contentClasses = (0, import_dedupe30.default)("mobius", "mobius-list__item-content");
+  const iconClasses = (0, import_dedupe30.default)("mobius", "mobius-list__icon");
+  if (iconContent) {
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("li", { ref, ...otherProps, className: classes, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: contentClasses, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: iconClasses, children: iconContent }),
+      children
+    ] }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("li", { ref, ...otherProps, className: classes, children });
+});
+ListItem.displayName = "ListItem";
+
+// src/components/LoadingIndicator/LoadingIndicator.tsx
+var import_react49 = require("react");
+var import_dedupe31 = __toESM(require("classnames/dedupe"));
+var import_icons9 = require("@simplybusiness/icons");
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var LoadingIndicator = (0, import_react49.forwardRef)((props, ref) => {
+  const { icon = import_icons9.loading, ...otherProps } = props;
+  const classes = (0, import_dedupe31.default)(
+    "mobius",
+    "mobius-loading-indicator",
+    otherProps.className
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icon, { icon, spin: true, ref, ...otherProps, className: classes });
+});
+LoadingIndicator.displayName = "LoadingIndicator";
+
+// src/components/Logo/Logo.tsx
+var import_react50 = require("react");
+var import_dedupe32 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var Logo = (0, import_react50.forwardRef)((props, ref) => {
+  const { className, width, height, ...otherProps } = props;
+  const classes = (0, import_dedupe32.default)("mobius", "mobius-logo", className);
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+    "svg",
+    {
+      width,
+      height,
+      ref,
+      className: classes,
+      viewBox: "0 0 144 37",
+      ...otherProps,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+          "linearGradient",
+          {
+            id: "logo-gradient",
+            x1: "83.508%",
+            x2: "11.891%",
+            y1: "76.042%",
+            y2: "26.973%",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("stop", { stopColor: "#4632D8", offset: "0%" }),
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("stop", { stopColor: "#9084E8", offset: "100%" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("g", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+            "path",
+            {
+              fill: "#0E0A2B",
+              d: "M68.788 11.307c0-2.486-2.027-3.345-3.833-4.1-1.332-.562-2.471-1.036-2.471-2.072 0-.873.77-1.42 1.968-1.42 1.051 0 1.806.444 2.294.725.193.103.474.222.755.133.192-.06.34-.207.459-.444l.34-.621c.266-.474.163-.888-.281-1.2-.533-.384-1.88-1.05-3.537-1.05-2.738 0-4.647 1.643-4.647 4.01 0 2.413 2.012 3.301 3.788 4.07 1.347.593 2.516 1.096 2.516 2.161 0 .873-.754 1.45-1.924 1.45-1.287 0-2.22-.65-2.678-.961l-.03-.015c-.533-.296-.903-.237-1.228.192l-.415.607c-.444.607-.148.992.134 1.228.828.637 2.427 1.392 4.203 1.392 2.708 0 4.587-1.673 4.587-4.085zm4.44 2.975V6.186c0-.577-.31-.888-.873-.888h-.843c-.563 0-.874.311-.874.888v8.096c0 .577.296.888.874.888h.843c.563 0 .873-.311.873-.888zM71.482 4.203h.755c.518 0 .814-.281.814-.8v-.517c0-.518-.296-.814-.814-.814h-.755c-.518 0-.8.281-.8.814v.518c.016.518.297.8.8.8zM92.645 24.48h.755c.518 0 .814-.282.814-.8v-.518c0-.518-.296-.814-.814-.814h-.755c-.518 0-.799.282-.799.814v.518c0 .518.281.8.8.8zm-6.26-19.42c-1.539 0-2.397.962-2.945 1.895-.444-1.243-1.435-1.895-2.871-1.895-1.362 0-2.146.888-2.723 1.806v-.68c0-.578-.311-.889-.873-.889h-.74c-.563 0-.873.311-.873.888v8.096c0 .577.295.888.873.888h.843c.577 0 .873-.311.873-.888V10.73c0-2.25.888-3.271 2.058-3.271 1.006 0 1.198.71 1.198 1.85v4.987c0 .578.311.888.888.888h.844c.577 0 .873-.31.873-.888v-3.551c0-2.25.873-3.271 2.013-3.271 1.036 0 1.243.74 1.243 1.85v4.987c0 .577.31.888.888.888h.814c.577 0 .888-.31.888-.888V8.835c0-2.5-1.095-3.774-3.27-3.774zm10.804 10.33c2.679 0 4.558-2.13 4.558-5.164 0-3.094-1.776-5.166-4.425-5.166-1.761 0-2.708 1.036-3.049 1.51v-.533c0-.459-.34-.755-.873-.755h-.607c-.562 0-.888.326-.888.888v11.9c0 .576.311.887.888.887h.814c.578 0 .888-.31.888-.888v-3.404c0-.207-.014-.4-.014-.532.325.429 1.184 1.258 2.708 1.258zm-2.768-5.105c0-1.362.622-2.975 2.368-2.975 1.377 0 2.309 1.184 2.309 2.945 0 1.746-.947 2.916-2.338 2.916-1.54 0-2.339-1.45-2.339-2.886zm12.965 4.07v-.652c0-.444-.252-.725-.681-.784-.34-.03-.68-.192-.68-1.066v-9.47c0-.563-.326-.888-.874-.888h-.843c-.563 0-.874.31-.874.888v9.679c0 1.258.34 2.16 1.021 2.678.637.489 1.466.533 2.013.533.607 0 .918-.325.918-.917zm9.457-9.073h-.962c-.518 0-.844.237-.977.726l-1.717 4.972c-.089.311-.192.71-.251.977-.074-.281-.193-.71-.296-1.021l-1.835-4.943c-.163-.489-.489-.71-.977-.71h-1.036c-.415 0-.622.162-.71.295-.09.134-.163.385.014.755l3.685 8.57-.34.813c-.252.592-.77 1.229-1.45 1.229-.267 0-.474-.09-.652-.163h-.014c-.43-.104-.755.074-.962.488l-.163.415c-.119.251-.148.517-.06.725.075.192.237.34.474.429.326.118.814.296 1.391.296 1.628 0 2.975-.977 3.597-2.605l3.996-10.226c.103-.296.088-.563-.045-.755-.163-.163-.4-.267-.71-.267zM67.634 28.297c.977-.592 1.54-1.658 1.54-2.886 0-2.176-1.688-3.567-4.293-3.567h-4.04c-.562 0-.873.311-.873.888v11.899c0 .577.296.888.873.888h4.1c1.346 0 2.5-.34 3.33-.962.932-.71 1.42-1.761 1.42-3.049.03-1.524-.784-2.767-2.057-3.211zm-5.017-.962v-3.212h2.25c1.02 0 1.628.592 1.628 1.584 0 .991-.607 1.643-1.57 1.643h-2.308v-.015zm4.396 4.01c0 1.155-.71 1.865-1.865 1.865h-2.53v-3.714h2.53c1.14.014 1.865.74 1.865 1.85zm12.638-5.712h-.814c-.577 0-.888.31-.888.888v3.655c0 2.176-1.361 3.182-2.634 3.182-1.006 0-1.406-.547-1.406-1.88v-4.942c0-.578-.31-.888-.888-.888h-.814c-.562 0-.888.325-.888.888v5.431c0 2.516 1.17 3.774 3.463 3.774a3.937 3.937 0 003.286-1.761v.651c0 .577.296.888.873.888h.74c.577 0 .888-.31.888-.888v-8.095c-.03-.578-.355-.903-.918-.903zm6.956 3.937c-.917-.311-1.702-.592-1.702-1.184 0-.74.77-.859 1.229-.859.784 0 1.406.281 1.805.474.548.237.947.118 1.184-.34l.193-.341c.251-.518.133-.947-.326-1.184-.326-.178-1.288-.71-2.753-.71-2.279 0-3.803 1.213-3.803 3.004 0 2.042 1.731 2.65 3.137 3.138.903.325 1.687.592 1.687 1.169 0 .547-.488.902-1.258.902-.917 0-1.613-.37-2.057-.621l-.059-.03c-.533-.28-.903-.207-1.213.222l-.222.34c-.178.252-.237.504-.178.726.044.207.192.37.4.488a5.774 5.774 0 003.285 1.007c2.235 0 3.789-1.273 3.789-3.079-.03-2.042-1.761-2.649-3.138-3.122zm6.897-3.937h-.844c-.562 0-.873.31-.873.888v8.095c0 .577.296.888.873.888h.844c.577 0 .873-.31.873-.888v-8.095c0-.563-.31-.888-.873-.888zm9.324-.237c-1.924 0-2.93 1.154-3.36 1.806v-.681c0-.577-.31-.888-.873-.888h-.74c-.563 0-.873.31-.873.888v8.095c0 .577.296.888.873.888h.843c.578 0 .874-.31.874-.888v-3.744c0-1.79 1.14-3.078 2.708-3.078 1.021 0 1.436.547 1.436 1.88v4.942c0 .577.31.888.887.888h.814c.578 0 .888-.31.888-.888v-5.431c0-2.516-1.169-3.789-3.477-3.789zm10.448 0c-2.96 0-5.032 2.131-5.032 5.165 0 2.99 2.235 5.165 5.313 5.165 1.48 0 2.635-.533 3.345-.977.444-.266.562-.695.296-1.198l-.222-.385c-.266-.459-.651-.563-1.184-.31h-.015a3.885 3.885 0 01-2.042.606c-1.54 0-2.634-.962-2.812-2.472h5.816a.935.935 0 00.933-.917c.014-2.827-1.717-4.677-4.396-4.677zm-.044 2.013c1.065 0 1.79.77 1.864 1.968h-4.1c.253-1.213 1.096-1.968 2.236-1.968zm10.152 2.16c-.917-.31-1.702-.591-1.702-1.183 0-.74.77-.859 1.229-.859.784 0 1.406.281 1.805.474.548.237.947.118 1.184-.34l.192-.341c.252-.518.134-.947-.325-1.184-.326-.178-1.288-.71-2.753-.71-2.279 0-3.803 1.213-3.803 3.004 0 2.042 1.731 2.65 3.137 3.138.903.325 1.687.592 1.687 1.169 0 .547-.488.902-1.258.902-.917 0-1.613-.37-2.057-.621l-.059-.03c-.533-.28-.903-.207-1.214.222l-.222.34c-.177.252-.236.504-.177.726.044.207.192.37.4.488a5.774 5.774 0 003.285 1.007c2.235 0 3.789-1.273 3.789-3.079-.015-2.042-1.747-2.649-3.138-3.122zm8.791 0c-.917-.31-1.702-.591-1.702-1.183 0-.74.77-.859 1.229-.859.784 0 1.406.281 1.805.474.548.237.947.118 1.184-.34l.192-.341c.252-.518.134-.947-.325-1.184-.326-.178-1.288-.71-2.753-.71-2.279 0-3.803 1.213-3.803 3.004 0 2.042 1.731 2.65 3.137 3.138.903.325 1.687.592 1.687 1.169 0 .547-.488.902-1.258.902-.917 0-1.613-.37-2.057-.621l-.059-.03c-.533-.28-.903-.207-1.214.222l-.222.34c-.177.252-.236.504-.177.726.044.207.192.37.4.488a5.774 5.774 0 003.285 1.007c2.235 0 3.789-1.273 3.789-3.079-.015-2.042-1.747-2.649-3.138-3.122z"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+            "path",
+            {
+              fill: "url(#logo-gradient)",
+              d: "M22.747 22.288c.607 1.214.918 2.59.918 4.144 0 1.45-.267 2.827-.8 4.1a10.018 10.018 0 01-2.279 3.36c-.991.961-2.235 1.73-3.744 2.278-1.51.563-3.167.829-4.988.829-2.264 0-4.35-.385-6.29-1.14-1.938-.77-3.492-1.598-4.676-2.5-.31-.252-.548-.504-.696-.77a1.332 1.332 0 01-.177-.71.718.718 0 010-.252c.03-.37.207-.785.547-1.199l1.14-1.598c.4-.548.829-.844 1.288-.918a.896.896 0 01.222-.03c.4 0 .873.163 1.39.474 2.487 1.776 4.914 2.679 7.252 2.679 1.643 0 2.96-.385 3.922-1.14.962-.755 1.45-1.746 1.45-2.96 0-.725-.192-1.39-.562-1.983a5.347 5.347 0 00-1.539-1.569 18.207 18.207 0 00-2.235-1.287 56.102 56.102 0 00-2.649-1.214c-.917-.4-1.835-.814-2.752-1.258a19.282 19.282 0 01-2.62-1.539 14.014 14.014 0 01-2.22-1.924c-.666-.695-1.169-1.539-1.554-2.545-.37-.992-.562-2.087-.562-3.271 0-2.042.533-3.863 1.598-5.446 1.066-1.584 2.516-2.797 4.336-3.641C8.303.414 10.345 0 12.624 0c1.91 0 3.685.281 5.358.844 1.657.562 2.96 1.198 3.892 1.88.68.473 1.006 1.035 1.006 1.671 0 .385-.118.785-.37 1.2l-.917 1.657c-.385.74-.903 1.11-1.554 1.11-.4 0-.83-.133-1.318-.4a42.421 42.421 0 00-1.687-.947c-.473-.237-1.14-.488-1.998-.71a9.458 9.458 0 00-2.56-.356c-1.672 0-3.004.37-3.981 1.11-.992.74-1.48 1.717-1.48 2.946 0 .902.31 1.701.932 2.412.622.695 1.421 1.302 2.398 1.79.977.489 2.057.977 3.256 1.466a54.048 54.048 0 013.552 1.628 20.795 20.795 0 013.24 2.042c.948.755 1.732 1.732 2.354 2.945zm31.257 2.945c0 3.197-1.155 6.083-3.256 8.14-2.265 2.205-5.506 3.36-9.368 3.36H30.71c-2.443 0-4.278-1.836-4.278-4.278V4.53c0-1.2.43-2.28 1.214-3.064C28.43.681 29.51.252 30.709.252h9.013c3.419 0 6.32 1.095 8.377 3.182 1.909 1.923 2.945 4.558 2.945 7.429 0 2.294-.622 4.203-1.91 5.816 1.377.77 2.487 1.776 3.286 2.99 1.066 1.583 1.584 3.448 1.584 5.564zm-12.106-7.68c.044-.03 4.913-3.02 4.913-6.675 0-1.761-.607-3.345-1.717-4.455-1.568-1.584-3.788-1.924-5.372-1.924H30.68v28h10.7c2.738 0 4.958-.754 6.408-2.16 1.273-1.243 1.983-3.049 1.983-5.106 0-1.272-.296-2.353-.858-3.196v-.03c-1.362-2.353-6.838-3.774-6.897-3.789l-.844-.222.726-.444z"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+            "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
+var import_react51 = require("react");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var Content2 = (0, import_react51.forwardRef)(
+  ({ children, ...otherProps }, ref) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { ref, ...otherProps, className: "mobius-modal__content", children })
+);
+Content2.displayName = "Content";
+
+// src/components/Modal/Header.tsx
+var import_react54 = require("react");
+var import_icons10 = require("@simplybusiness/icons");
+
+// src/components/Modal/useModal.ts
+var import_react53 = require("react");
+
+// src/components/Modal/ModalContext.tsx
+var import_react52 = require("react");
+var ModalContext = (0, import_react52.createContext)({
+  onClose: () => {
+  },
+  closeLabel: void 0
+});
+
+// src/components/Modal/useModal.ts
+var useModal = () => {
+  const { onClose, closeLabel } = (0, import_react53.useContext)(ModalContext);
+  return { onClose, closeLabel };
+};
+
+// src/components/Modal/Header.tsx
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var Header2 = (0, import_react54.forwardRef)(
+  ({ children, ...otherProps }, ref) => {
+    const { onClose, closeLabel } = useModal();
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("header", { ref, ...otherProps, className: "mobius-modal__header", children: [
+      children,
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+        Button,
+        {
+          "aria-label": "Close",
+          variant: "basic",
+          onPress: onClose,
+          className: "mobius-modal__close",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon, { icon: import_icons10.cross }),
+            " ",
+            closeLabel
+          ]
+        }
+      )
+    ] });
+  }
+);
+Header2.displayName = "Header";
+
+// src/components/Modal/Modal.tsx
+var import_dedupe33 = __toESM(require("classnames/dedupe"));
+var import_react55 = require("react");
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var TRANSITION_CSS_VARIABLE2 = "--modal-transition-duration";
+var Modal = (0, import_react55.forwardRef)((props, ref) => {
+  const {
+    isOpen,
+    onClose,
+    onOpen,
+    children,
+    className,
+    closeLabel,
+    isFullScreen,
+    animation,
+    // Deprecated props below
+    size,
+    appElement,
+    preventCloseOnEsc,
+    shouldFocusAfterRender,
+    parentSelector,
+    ...rest
+  } = props;
+  const [shouldTransition, setShouldTransition] = (0, import_react55.useState)(false);
+  useDeprecationWarning({
+    size,
+    appElement,
+    preventCloseOnEsc,
+    shouldFocusAfterRender,
+    parentSelector
+  });
+  (0, import_react55.useEffect)(() => {
+    setShouldTransition(supportsDialog());
+  }, []);
+  const dialogRef = (0, import_react55.useRef)(null);
+  const { close } = useDialog({
+    ref: dialogRef,
+    isOpen,
+    onOpen,
+    onClose,
+    transition: {
+      isEnabled: !!animation,
+      CSSVariable: TRANSITION_CSS_VARIABLE2
+    }
+  });
+  const modalClasses = (0, import_dedupe33.default)(
+    "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 = (0, import_react55.useMemo)(
+    () => ({
+      onClose: close,
+      closeLabel
+    }),
+    [close, closeLabel]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    "dialog",
+    {
+      ref: mergeRefs([dialogRef, ref]),
+      onCancel: close,
+      className: modalClasses,
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(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
+var import_dedupe34 = __toESM(require("classnames/dedupe"));
+var import_react56 = require("react");
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var NumberField = (0, import_react56.forwardRef)((props, ref) => {
+  const { minValue, maxValue, step, defaultValue, className, ...otherProps } = props;
+  const containerClasses = (0, import_dedupe34.default)("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__ */ (0, import_jsx_runtime43.jsx)(
+    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
+var import_react57 = require("react");
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var Option2 = (0, import_react57.forwardRef)((props, ref) => {
+  const { isDisabled, ...rest } = props;
+  const mappedProps = {
+    ...rest,
+    disabled: isDisabled
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("option", { ...mappedProps, ref });
+});
+Option2.displayName = "Option";
+
+// src/components/PasswordField/PasswordField.tsx
+var import_dedupe35 = __toESM(require("classnames/dedupe"));
+var import_react58 = require("react");
+
+// src/components/PasswordField/ShowHideButton.tsx
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var ShowHideButton = ({
+  show = false,
+  onClick
+}) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  "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
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var PasswordField = (0, import_react58.forwardRef)(
+  ({ className, ...props }, ref) => {
+    const [show, setShow] = (0, import_react58.useState)(false);
+    const type = show ? "text" : "password";
+    const classes = (0, import_dedupe35.default)("mobius-password-field", className);
+    const localRef = (0, import_react58.useRef)(null);
+    const handleShowHideButtonClick = () => {
+      setShow((oldShow) => !oldShow);
+      localRef.current?.focus();
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      TextField,
+      {
+        ref: mergeRefs([localRef, ref]),
+        className: classes,
+        ...props,
+        type,
+        suffixInside: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ShowHideButton, { onClick: handleShowHideButtonClick, show })
+      }
+    );
+  }
+);
+PasswordField.displayName = "PasswordField";
+
+// src/components/Popover/Popover.tsx
+var import_react59 = require("@floating-ui/react");
+var import_icons11 = require("@simplybusiness/icons");
+var import_classnames3 = __toESM(require("classnames"));
+var import_react60 = require("react");
+var import_jsx_runtime47 = require("react/jsx-runtime");
+var OFFSET_FROM_CONTENT_DEFAULT = 10;
+var Popover = (props) => {
+  const { trigger, children, onOpen, onClose, className } = props;
+  const arrowRef = (0, import_react60.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react60.useState)(false);
+  const { refs, floatingStyles, context } = (0, import_react59.useFloating)({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    whileElementsMounted: import_react59.autoUpdate,
+    middleware: [
+      (0, import_react59.arrow)({
+        element: arrowRef
+      }),
+      (0, import_react59.offset)(OFFSET_FROM_CONTENT_DEFAULT),
+      (0, import_react59.shift)(),
+      (0, import_react59.flip)()
+    ]
+  });
+  const dismiss = (0, import_react59.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 } = (0, import_react59.useInteractions)([dismiss]);
+  const containerClasses = (0, import_classnames3.default)(
+    "mobius",
+    "mobius-popover__container",
+    className
+  );
+  const toggleVisibility = () => {
+    if (isOpen) {
+      setIsOpen(false);
+      onClose?.();
+      return;
+    }
+    setIsOpen(true);
+    onOpen?.();
+  };
+  const triggerComponent = (0, import_react60.cloneElement)(trigger, {
+    ref: refs.setReference,
+    className: (0, import_classnames3.default)(trigger.props.className, "mobius-popover__toggle"),
+    onClick: toggleVisibility,
+    ...getReferenceProps()
+  });
+  useWindowEvent("keydown", (e) => {
+    if (e.key === "Escape") {
+      onClose?.();
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
+    triggerComponent,
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+      "div",
+      {
+        className: containerClasses,
+        ref: refs.setFloating,
+        style: floatingStyles,
+        ...getFloatingProps(),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "mobius-popover", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("header", { className: "mobius-popover__header", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              Button,
+              {
+                type: "button",
+                className: "mobius-popover__close-button",
+                onClick: toggleVisibility,
+                "aria-label": "Close",
+                variant: "ghost",
+                children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                  Icon,
+                  {
+                    icon: import_icons11.cross,
+                    size: "md",
+                    className: "mobius-popover__close-icon"
+                  }
+                )
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "mobius-popover__body", children })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+            import_react59.FloatingArrow,
+            {
+              ref: arrowRef,
+              context,
+              width: 20,
+              className: "mobius-popover__arrow-icon"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+
+// src/components/Progress/Progress.tsx
+var import_dedupe36 = __toESM(require("classnames/dedupe"));
+var import_react61 = require("react");
+var import_jsx_runtime48 = require("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__ */ (0, import_jsx_runtime48.jsx)(
+      Label,
+      {
+        id: progressLabelId,
+        className: "mobius-progress__label",
+        elementType: "span",
+        children: label
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    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 = (0, import_react61.forwardRef)((props, ref) => {
+  const progressId = (0, import_react61.useId)();
+  const progressLabelId = (0, import_react61.useId)();
+  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 = (0, import_dedupe36.default)("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__ */ (0, import_jsx_runtime48.jsxs)(
+    "div",
+    {
+      id: id || progressId,
+      ...progressBarProps,
+      ref,
+      className: classes,
+      role: "progressbar",
+      "aria-labelledby": progressLabelId,
+      children: [
+        labelComponent,
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "mobius-progress__track", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "mobius-progress__bar", style: { width: barWidth } }) }),
+        showValueLabel && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Label, { "data-testid": "value-label", elementType: "span", children: progressBarProps["aria-valuetext"] })
+      ]
+    }
+  );
+});
+Progress.displayName = "Progress";
+
+// src/components/Radio/Radio.tsx
+var import_dedupe37 = __toESM(require("classnames/dedupe"));
+var import_react62 = require("react");
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var Radio = (0, import_react62.forwardRef)(
+  (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 = (0, import_dedupe37.default)(
+      "mobius-radio__label",
+      radioClasses,
+      className
+    );
+    const inputClasses = (0, import_dedupe37.default)("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__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Label, { className: containerClasses, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          "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__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "mobius-radio__content--multiline", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "mobius-radio__content-first-line", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "mobius-radio__extra-content", children })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "mobius-radio__content", children: label || children })
+      ] }),
+      errorMessage && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ErrorMessage, { errorMessage })
+    ] });
+  }
+);
+Radio.displayName = "Radio";
+
+// src/components/Radio/RadioGroup.tsx
+var import_react63 = require("react");
+var import_dedupe38 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime50 = require("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 = (0, import_react63.forwardRef)((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] = (0, import_react63.useState)(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 = (0, import_dedupe38.default)(
+    "mobius",
+    "mobius-radio-group",
+    radioClasses,
+    validationClasses
+  );
+  const radioWrapperClasses = (0, import_dedupe38.default)("mobius-radio__wrapper", {
+    [`--is-${orientation}`]: true
+  });
+  const labelClasses = (0, import_dedupe38.default)(radioClasses, validationClasses);
+  const errorMessageId = (0, import_react63.useId)();
+  const defaultNameAttrId = (0, import_react63.useId)();
+  const nameAttribute = name || defaultNameAttrId;
+  const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
+  const describedBy = spaceDelimitedList([
+    shouldErrorMessageShow,
+    props["aria-describedby"]
+  ]);
+  const labelId = (0, import_react63.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    "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__ */ (0, import_jsx_runtime50.jsxs)(Stack, { gap: "xs", children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Label, { htmlFor: name, id: labelId, className: labelClasses, children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: radioWrapperClasses, children: import_react63.Children.map(children, (child) => {
+          if ((0, import_react63.isValidElement)(child)) {
+            return (0, import_react63.cloneElement)(child, {
+              orientation,
+              groupDisabled: isDisabled,
+              name: nameAttribute,
+              selected,
+              setSelected,
+              isRequired,
+              "aria-describedby": describedBy,
+              onChange
+            });
+          }
+          return child;
+        }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ErrorMessage, { id: errorMessageId, errorMessage })
+      ] })
+    }
+  );
+});
+RadioGroup.displayName = "RadioGroup";
+
+// src/components/Segment/SegmentGroup.tsx
+var import_dedupe39 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime51 = require("react/jsx-runtime");
+var SegmentGroup = (props) => {
+  const { children, horizontal, gap, className, ...rest } = props;
+  const gapClass = gap ? `gap-${gap}` : "";
+  const classes = (0, import_dedupe39.default)(
+    "mobius",
+    "mobius-segment-group",
+    className,
+    { "--is-horizontal": horizontal },
+    gapClass
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: classes, ...rest, children });
+};
+SegmentGroup.displayName = "SegmentGroup";
+
+// src/components/Segment/Segment.tsx
+var import_dedupe40 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime52 = require("react/jsx-runtime");
+var Segment = (props) => {
+  const { heading, children, colour, inverted, className, ...rest } = props;
+  const classes = (0, import_dedupe40.default)(
+    "mobius",
+    "mobius-segment",
+    colour,
+    { inverted },
+    className
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: classes, ...rest, children: [
+    heading && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "mobius-segment__heading", children: heading }),
+    children
+  ] });
+};
+Segment.displayName = "Segment";
+
+// src/components/Select/Select.tsx
+var import_dedupe41 = __toESM(require("classnames/dedupe"));
+var import_react64 = require("react");
+var import_icons12 = require("@simplybusiness/icons");
+var import_jsx_runtime53 = require("react/jsx-runtime");
+var Select = (0, import_react64.forwardRef)((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 = (0, import_dedupe41.default)(validationClasses, stateClasses);
+  const wrapperClasses = (0, import_dedupe41.default)(
+    "mobius-select__wrapper",
+    sharedClasses,
+    otherProps.className
+  );
+  const selectClasses = (0, import_dedupe41.default)(
+    "mobius-select",
+    sharedClasses,
+    otherProps.className
+  );
+  const labelClasses = (0, import_dedupe41.default)(
+    "mobius-label",
+    sharedClasses,
+    otherProps.className
+  );
+  const iconClasses = (0, import_dedupe41.default)("mobius-select__icon", sharedClasses);
+  const errorMessageId = (0, import_react64.useId)();
+  const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
+  const describedBy = spaceDelimitedList([
+    shouldErrorMessageShow,
+    props["aria-describedby"]
+  ]);
+  const handleChange = (e) => {
+    if (onChange) {
+      onChange(e);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Stack, { className: "mobius mobius-select__outer", gap: "xs", children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Label, { ...labelProps, className: labelClasses, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: wrapperClasses, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+        "select",
+        {
+          ...otherProps,
+          ...fieldProps,
+          ref,
+          multiple: false,
+          className: selectClasses,
+          disabled: isDisabled,
+          "aria-invalid": !!errorMessage,
+          "aria-describedby": describedBy,
+          "aria-required": isRequired,
+          onChange: handleChange
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: iconClasses, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icon, { icon: import_icons12.chevronDown }) })
+    ] }),
+    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ErrorMessage, { id: errorMessageId, errorMessage })
+  ] });
+});
+Select.displayName = "Select";
+
+// src/components/Slider/Slider.tsx
+var import_dedupe42 = __toESM(require("classnames/dedupe"));
+var import_react66 = require("react");
+
+// src/components/Slider/helpers.ts
+var import_react65 = require("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
+var import_jsx_runtime54 = require("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 = (0, import_react66.useRef)(null);
+  const [currentValue, setCurrentValue] = (0, import_react66.useState)(
+    value || defaultValue || 0
+  );
+  const [isDragging, setIsDraggging] = (0, import_react66.useState)(false);
+  const { labelProps, fieldProps } = useLabel({
+    id,
+    label,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy
+  });
+  const formattedValue = numberFormatter(currentValue, formatOptions);
+  const classes = (0, import_dedupe42.default)("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__ */ (0, import_jsx_runtime54.jsxs)("div", { className: classes, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "mobius-slider__label-wrapper", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Label, { ...labelProps, children: label }),
+      label && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("output", { style: { flex: "1 0 auto", textAlign: "end" }, children: formattedValue })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { ref: trackRef, className: "mobius-slider__track-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      "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__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "mobius-slider__labels", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "mobius-slider__min-label", "data-testid": "min-label", children: minLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "mobius-slider__max-label", "data-testid": "max-label", children: maxLabel })
+    ] })
+  ] });
+};
+
+// src/components/SVG/SVG.tsx
+var import_react67 = require("react");
+var import_dedupe43 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime55 = require("react/jsx-runtime");
+var SVG = (0, import_react67.forwardRef)(
+  (props, ref) => {
+    const { children, className, ...otherProps } = props;
+    const classes = (0, import_dedupe43.default)("mobius", "mobius-svg", className);
+    const svgNode = import_react67.Children.only(children);
+    const { children: svgChildren, viewBox, xmlns } = svgNode.props;
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+      "svg",
+      {
+        viewBox,
+        xmlns,
+        ref,
+        ...otherProps,
+        className: classes,
+        children: svgChildren
+      }
+    );
+  }
+);
+SVG.displayName = "SVG";
+
+// src/components/Switch/Switch.tsx
+var import_react68 = require("react");
+var import_dedupe44 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime56 = require("react/jsx-runtime");
+var Switch = (0, import_react68.forwardRef)((props, ref) => {
+  const {
+    checked = false,
+    className,
+    onChange,
+    isDisabled = false,
+    ...otherProps
+  } = props;
+  const [enabled, setEnabled] = (0, import_react68.useState)(checked);
+  (0, import_react68.useEffect)(() => {
+    setEnabled(checked);
+  }, [checked]);
+  const classes = (0, import_dedupe44.default)(
+    "mobius",
+    "mobius-switch",
+    {
+      "mobius-switch--checked": enabled,
+      "mobius-switch--disabled": isDisabled
+    },
+    className
+  );
+  const handleChange = (event) => {
+    setEnabled(!enabled);
+    if (onChange) {
+      onChange(event);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("label", { ref, className: classes, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { children: enabled ? "On" : "Off" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+      "input",
+      {
+        type: "checkbox",
+        role: "switch",
+        checked: enabled,
+        onChange: handleChange,
+        disabled: isDisabled,
+        ...otherProps
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "mobius-switch__slider" })
+  ] });
+});
+Switch.displayName = "Switch";
+
+// src/components/Table/Table.tsx
+var import_react69 = require("react");
+var import_dedupe45 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime57 = require("react/jsx-runtime");
+var Table = (0, import_react69.forwardRef)(
+  (props, ref) => {
+    const classes = (0, import_dedupe45.default)("mobius", "mobius-table", props.className);
+    return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("table", { ref, ...props, className: classes });
+  }
+);
+Table.displayName = "Table";
+
+// src/components/Table/Head.tsx
+var import_react70 = require("react");
+var import_dedupe46 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime58 = require("react/jsx-runtime");
+var Head = (0, import_react70.forwardRef)((props, ref) => {
+  const classes = (0, import_dedupe46.default)("mobius", "mobius-table__head", props.className);
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("thead", { ref, ...props, className: classes });
+});
+Head.displayName = "Table.Head";
+
+// src/components/Table/Body.tsx
+var import_react71 = require("react");
+var import_dedupe47 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime59 = require("react/jsx-runtime");
+var Body = (0, import_react71.forwardRef)((props, ref) => {
+  const classes = (0, import_dedupe47.default)("mobius", "mobius-table__body", props.className);
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("tbody", { ref, ...props, className: classes });
+});
+Body.displayName = "Table.Body";
+
+// src/components/Table/Foot.tsx
+var import_react72 = require("react");
+var import_dedupe48 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime60 = require("react/jsx-runtime");
+var Foot = (0, import_react72.forwardRef)((props, ref) => {
+  const classes = (0, import_dedupe48.default)("mobius", "mobius-table__foot", props.className);
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("tfoot", { ref, ...props, className: classes });
+});
+Foot.displayName = "Table.Foot";
+
+// src/components/Table/Row.tsx
+var import_react73 = require("react");
+var import_dedupe49 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime61 = require("react/jsx-runtime");
+var Row = (0, import_react73.forwardRef)(
+  (props, ref) => {
+    const classes = (0, import_dedupe49.default)("mobius", "mobius-table__row", props.className);
+    return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("tr", { ref, ...props, className: classes });
+  }
+);
+Row.displayName = "Table.Row";
+
+// src/components/Table/HeaderCell.tsx
+var import_react74 = require("react");
+var import_dedupe50 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime62 = require("react/jsx-runtime");
+var HeaderCell = (0, import_react74.forwardRef)((props, ref) => {
+  const classes = (0, import_dedupe50.default)(
+    "mobius",
+    "mobius-table__head-cell",
+    props.className
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("th", { ...props, ref, className: classes });
+});
+HeaderCell.displayName = "Table.HeaderCell";
+
+// src/components/Table/Cell.tsx
+var import_react75 = require("react");
+var import_dedupe51 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime63 = require("react/jsx-runtime");
+var Cell = (0, import_react75.forwardRef)(
+  (props, ref) => {
+    const classes = (0, import_dedupe51.default)(
+      "mobius",
+      "mobius-table__body-cell",
+      props.className
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("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
+var import_dedupe53 = __toESM(require("classnames/dedupe"));
+var import_react77 = require("react");
+
+// src/components/TextAreaInput/TextAreaInput.tsx
+var import_dedupe52 = __toESM(require("classnames/dedupe"));
+var import_react76 = require("react");
+var import_jsx_runtime64 = require("react/jsx-runtime");
+var TextAreaInput = (0, import_react76.forwardRef)((props, ref) => {
+  const { isSelected, isDisabled, isReadOnly, isRequired, ...otherProps } = props;
+  const classes = (0, import_dedupe52.default)(
+    "mobius",
+    "mobius-text-area__input",
+    {
+      "--is-disabled": isDisabled,
+      "--is-selected": isSelected,
+      "--is-required": isRequired
+    },
+    otherProps.className
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+    "textarea",
+    {
+      ref,
+      ...otherProps,
+      required: isRequired,
+      readOnly: isReadOnly,
+      className: classes
+    }
+  );
+});
+TextAreaInput.displayName = "TextAreaInput";
+
+// src/components/TextArea/TextArea.tsx
+var import_jsx_runtime65 = require("react/jsx-runtime");
+var TextArea = (0, import_react77.forwardRef)((props, ref) => {
+  const {
+    isDisabled,
+    className,
+    errorMessage,
+    label,
+    validationState,
+    isInvalid,
+    ...otherProps
+  } = props;
+  const { inputProps, labelProps, errorMessageProps } = useTextField(props);
+  const classes = (0, import_dedupe53.default)("mobius", "mobius-text-area", className);
+  const validationClasses = useValidationClasses({
+    validationState,
+    isInvalid
+  });
+  const inputClasses = (0, import_dedupe53.default)(
+    "mobius-text-area__input",
+    validationClasses
+  );
+  const labelClasses = (0, import_dedupe53.default)(
+    {
+      "--is-disabled": isDisabled
+    },
+    validationClasses
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(Stack, { className: classes, gap: "xs", children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Label, { ...labelProps, className: labelClasses, children: props.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+      TextAreaInput,
+      {
+        ...otherProps,
+        ...inputProps,
+        ref,
+        className: inputClasses,
+        isDisabled,
+        "aria-invalid": errorMessage != null
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(ErrorMessage, { ...errorMessageProps, errorMessage })
+  ] });
+});
+TextArea.displayName = "TextArea";
+
+// src/components/Title/Title.tsx
+var import_react78 = require("react");
+var import_dedupe54 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime66 = require("react/jsx-runtime");
+var Title = (0, import_react78.forwardRef)(
+  (props, ref) => {
+    const {
+      elementType: Element = "div",
+      title,
+      description,
+      ...otherProps
+    } = props;
+    const classes = (0, import_dedupe54.default)("mobius", "mobius-title", otherProps.className);
+    const headerClasses = (0, import_dedupe54.default)("mobius", "mobius-title__header");
+    const contentClasses = (0, import_dedupe54.default)("mobius", "mobius-title__description");
+    const containerClasses = (0, import_dedupe54.default)("mobius", "mobius-title__container");
+    return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Element, { ref, ...otherProps, className: classes, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(Flex, { flexDirection: "column", className: containerClasses, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: headerClasses, children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: contentClasses, children: description })
+    ] }) });
+  }
+);
+Title.displayName = "Title";
+
+// src/components/Trust/Trust.tsx
+var import_dedupe55 = __toESM(require("classnames/dedupe"));
+var import_react79 = require("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
+var import_jsx_runtime67 = require("react/jsx-runtime");
+var Trust = (0, import_react79.forwardRef)((props, ref) => {
+  const {
+    elementType: Element = "div",
+    variant,
+    theme,
+    locale,
+    height,
+    width,
+    stars,
+    className
+  } = props;
+  const [isMounted, setIsMounted] = (0, import_react79.useState)(false);
+  const trustRef = (0, import_react79.useRef)(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 = (0, import_dedupe55.default)(
+    "mobius",
+    "mobius-trust",
+    REQUIRED_TRUSTPILOT_CLASS_NAME,
+    {
+      [`--is-${theme}`]: theme,
+      [variantClassName]: variant
+    },
+    className
+  );
+  (0, import_react79.useEffect)(() => {
+    const hasTrustpilotLoaded = trustRef.current && window?.Trustpilot && window?.Trustpilot.loadFromElement;
+    if (isMounted && hasTrustpilotLoaded) {
+      window.Trustpilot.loadFromElement(trustRef.current, true);
+    }
+  }, [isMounted]);
+  (0, import_react79.useEffect)(() => {
+    setIsMounted(true);
+  }, []);
+  if (!isMounted) return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { style: styles });
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+    Element,
+    {
+      ref: mergeRefs([trustRef, ref]),
+      className: classes,
+      style: styles,
+      ...dataProps,
+      children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+        "a",
+        {
+          href: link,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "mobius-trust__link",
+          children: "Trustpilot"
+        }
+      )
+    }
+  );
+});