@simplybusiness/mobius 8.0.1 → 9.0.0

package/dist/cjs/index.js

@@ -0,0 +1,4773 @@
+"use strict";
+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 __typeError = (msg) => {
+  throw TypeError(msg);
+};
+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);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+
+// index.tsx
+var index_exports = {};
+__export(index_exports, {
+  Accordion: () => Accordion,
+  AccordionList: () => AccordionList,
+  AddressLookup: () => AddressLookup,
+  Alert: () => Alert,
+  Box: () => Box,
+  BreadcrumbItem: () => BreadcrumbItem,
+  Breadcrumbs: () => Breadcrumbs,
+  Button: () => Button,
+  Checkbox: () => Checkbox,
+  CheckboxGroup: () => CheckboxGroup,
+  Combobox: () => Combobox,
+  Container: () => Container,
+  DEFAULT_BREAKPOINTS: () => DEFAULT_BREAKPOINTS,
+  DateField: () => DateField,
+  Divider: () => Divider,
+  Drawer: () => Drawer2,
+  DropdownMenu: () => DropdownMenu2,
+  ErrorMessage: () => ErrorMessage,
+  ExpandableText: () => ExpandableText,
+  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,
+  MIN_MAX_ERROR: () => MIN_MAX_ERROR,
+  MaskedField: () => MaskedField,
+  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,
+  TextOrHTML: () => TextOrHTML,
+  Title: () => Title,
+  Toaster: () => Toaster,
+  Trust: () => Trust,
+  VisuallyHidden: () => VisuallyHidden,
+  convertToDateFormat: () => convertToDateFormat,
+  isValidDate: () => isValidDate,
+  toast: () => toast,
+  useBreakpoint: () => useBreakpoint,
+  useButton: () => useButton,
+  useDialog: () => useDialog,
+  useDialogPolyfill: () => useDialogPolyfill,
+  useDrawer: () => useDrawer,
+  useLabel: () => useLabel,
+  useModal: () => useModal,
+  useTextField: () => useTextField,
+  useValidationClasses: () => useValidationClasses
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/Accordion/Accordion.tsx
+var import_dedupe4 = __toESM(require("classnames/dedupe"));
+var import_react = require("react");
+var import_mobius_hooks = require("@simplybusiness/mobius-hooks");
+
+// src/components/Accordion/AccordionLink.tsx
+var import_dedupe3 = __toESM(require("classnames/dedupe"));
+
+// src/components/Flex/Flex.tsx
+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 = ({ ref, ...props }) => {
+  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({
+  ref,
+  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",
+    {
+      ref,
+      focusable: "false",
+      "data-icon": iconName,
+      className: classes,
+      role: "img",
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: `0 0 ${width} ${height}`,
+      style: { color },
+      ...otherProps,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("title", { children: titleText }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { fill: "currentColor", d: svgPathData })
+      ]
+    }
+  );
+}
+
+// src/components/Accordion/AccordionLink.tsx
+var import_icons = require("@simplybusiness/icons");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var AccordionLink = ({
+  text,
+  elementType: LinkElement = "span",
+  toggle,
+  onClick,
+  headerChildren,
+  ariaExpanded,
+  accordionId,
+  contentId
+}) => {
+  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 = (e) => {
+    if (onClick) {
+      onClick(e);
+    }
+    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",
+            {
+              id: accordionId,
+              className: linkClasses,
+              onClick: handleOnClick,
+              onKeyDown: handleKeyDown,
+              role: "button",
+              tabIndex: 0,
+              "aria-expanded": !!ariaExpanded,
+              "aria-controls": contentId,
+              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",
+    {
+      id: accordionId,
+      className: linkClasses,
+      onClick: handleOnClick,
+      onKeyDown: handleKeyDown,
+      role: "button",
+      tabIndex: 0,
+      "aria-expanded": !!ariaExpanded,
+      "aria-controls": contentId,
+      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 })
+      ]
+    }
+  );
+};
+
+// src/components/Accordion/Accordion.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Accordion = ({ ref, ...props }) => {
+  const {
+    showText = "See more",
+    hideText = "See less",
+    headerPosition = "top",
+    startOpen = false,
+    linkElementType,
+    onClick,
+    onOpen,
+    onClose,
+    onChange = () => {
+    },
+    headerChildren,
+    ...rest
+  } = props;
+  const [accordionState, setAccordionState] = (0, import_react.useState)({
+    open: startOpen,
+    withAnimation: false
+  });
+  const prefersReducedMotion = (0, import_mobius_hooks.usePrefersReducedMotion)();
+  const containerClasses = (0, import_dedupe4.default)(
+    "mobius",
+    "mobius-accordion",
+    props.className,
+    {
+      "--should-animate": accordionState.withAnimation && !prefersReducedMotion,
+      "--is-open": accordionState.open
+    }
+  );
+  const contentContainerClasses = (0, import_dedupe4.default)(
+    "mobius-accordion__content-container",
+    {
+      "--is-open": accordionState.open
+    }
+  );
+  const contentClasses = (0, import_dedupe4.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_react.useEffect)(() => {
+    setAccordionState({
+      open: startOpen,
+      withAnimation: true
+    });
+  }, [startOpen]);
+  const baseId = (0, import_react.useId)();
+  const accordionId = `accordion-header-${baseId}`;
+  const contentId = `accordion-panel-${baseId}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { ref, ...rest, className: containerClasses, children: [
+    headerPosition === "top" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      AccordionLink,
+      {
+        text: linkText,
+        elementType: linkElementType,
+        toggle: handleChange,
+        onClick,
+        ariaExpanded: accordionState.open,
+        headerChildren,
+        accordionId,
+        contentId
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        id: contentId,
+        className: contentContainerClasses,
+        "aria-hidden": !accordionState.open,
+        "aria-labelledby": accordionId,
+        role: "region",
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: contentClasses, children: props.children })
+      }
+    ),
+    headerPosition === "bottom" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      AccordionLink,
+      {
+        text: linkText,
+        toggle: handleChange,
+        onClick,
+        ariaExpanded: accordionState.open,
+        headerChildren,
+        accordionId,
+        contentId
+      }
+    )
+  ] });
+};
+Accordion.displayName = "Accordion";
+
+// src/components/Accordion/AccordionList.tsx
+var import_react2 = require("react");
+var import_dedupe6 = __toESM(require("classnames/dedupe"));
+
+// src/components/Divider/Divider.tsx
+var import_dedupe5 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Divider = ({
+  "aria-orientation": ariaOrientation = "horizontal",
+  className,
+  ...rest
+}) => {
+  const classes = (0, import_dedupe5.default)("mobius", "mobius-divider", className);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "div",
+    {
+      className: classes,
+      role: "separator",
+      "aria-orientation": ariaOrientation,
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mobius-divider__inner" })
+    }
+  );
+};
+Divider.displayName = "Divider";
+
+// src/components/Accordion/AccordionList.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var AccordionList = (props) => {
+  const {
+    className,
+    content,
+    onOpen,
+    onClose,
+    allowMultiple = false,
+    ...rest
+  } = props;
+  const [openIds, setOpenIds] = (0, import_react2.useState)(/* @__PURE__ */ new Set());
+  const classes = (0, import_dedupe6.default)("mobius", "mobius-accordion-list", className);
+  const handleAccordionChange = (id, isOpen) => {
+    setOpenIds((prev) => {
+      const newSet = new Set(prev);
+      if (isOpen) {
+        if (!allowMultiple) {
+          newSet.clear();
+        }
+        newSet.add(id);
+      } else {
+        newSet.delete(id);
+      }
+      return newSet;
+    });
+    if (isOpen) {
+      onOpen?.(id);
+    } else {
+      onClose?.(id);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: classes, ...rest, children: content.map((item, index) => {
+    const { id, header, details } = item;
+    const isOpen = openIds.has(id);
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react2.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        Accordion,
+        {
+          startOpen: isOpen,
+          showText: header,
+          hideText: header,
+          onChange: (isOpen2) => handleAccordionChange(id, isOpen2),
+          children: details
+        }
+      ),
+      index < content.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Divider, {})
+    ] }, id);
+  }) });
+};
+AccordionList.displayName = "AccordionList";
+
+// src/components/AddressLookup/AddressLookup.tsx
+var import_icons3 = require("@simplybusiness/icons");
+var import_react14 = require("react");
+
+// src/components/Combobox/Combobox.tsx
+var import_dedupe14 = __toESM(require("classnames/dedupe"));
+var import_react13 = require("react");
+var import_mobius_hooks5 = require("@simplybusiness/mobius-hooks");
+
+// src/hooks/useBreakpoint/useBreakpoint.tsx
+var import_mobius_hooks2 = require("@simplybusiness/mobius-hooks");
+var import_react3 = 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 PASSIVE = { passive: true };
+var getBreakpoint = (breakpoints, windowWidth) => {
+  const closest = breakpoints.findIndex(
+    (breakpoint) => breakpoint.value >= windowWidth + 1
+  );
+  const smallest = breakpoints[0];
+  const largest = breakpoints[breakpoints.length - 1];
+  const match = breakpoints[closest - 1];
+  if (closest === 0) return smallest;
+  if (closest === -1) return largest;
+  return match;
+};
+var useBreakpoint = (customBreakpoints) => {
+  const isClientSide = (0, import_mobius_hooks2.useIsClient)();
+  const breakpoints = customBreakpoints || DEFAULT_BREAKPOINTS;
+  const defaultBreakpoint = breakpoints[0];
+  const [windowWidth, setWindowWidth] = (0, import_react3.useState)(
+    typeof globalThis?.window !== "undefined" ? window.innerWidth : defaultBreakpoint.value
+  );
+  (0, import_mobius_hooks2.useWindowEvent)("resize", () => setWindowWidth(window.innerWidth), PASSIVE);
+  const debouncedWidth = (0, import_mobius_hooks2.useDebouncedValue)(windowWidth, 200);
+  const currentBreakpoint = (0, import_react3.useMemo)(
+    () => !isClientSide || breakpoints.length === 0 ? defaultBreakpoint : getBreakpoint(breakpoints, debouncedWidth),
+    [isClientSide, breakpoints, defaultBreakpoint, debouncedWidth]
+  );
+  const up = (0, import_react3.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_react3.useCallback)(
+    (size) => {
+      const sizeIndex = breakpoints.findIndex((item) => item.size === size);
+      if (sizeIndex === -1) {
+        return true;
+      }
+      const currentIndex = breakpoints.findIndex(
+        (item) => item.size === currentBreakpoint.size
+      );
+      return currentIndex <= sizeIndex;
+    },
+    [currentBreakpoint, breakpoints]
+  );
+  return {
+    breakpoint: currentBreakpoint,
+    up,
+    down
+  };
+};
+
+// src/hooks/useButton/useButton.tsx
+var import_react4 = require("react");
+function useButton({
+  elementType = "button",
+  type = "button",
+  isDisabled = false,
+  href,
+  target,
+  rel,
+  role,
+  name,
+  value,
+  onClick,
+  onPress
+}) {
+  const realOnClick = (0, import_react4.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/useDialog/useDialog.ts
+var import_react6 = require("react");
+var import_mobius_hooks3 = require("@simplybusiness/mobius-hooks");
+
+// src/hooks/useDialogPolyfill/useDialogPolyfill.ts
+var import_react5 = require("react");
+var useDialogPolyfill = () => {
+  const [hasDialogSupport, setHasDialogSupport] = (0, import_react5.useState)(false);
+  const hasAlreadyLoaded = (0, import_react5.useRef)(false);
+  (0, import_react5.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_react6.useState)(false);
+  const shouldTransition = hasDialogSupport && transition.isEnabled;
+  const { polyfillDialog } = useDialogPolyfill();
+  (0, import_react6.useEffect)(() => {
+    setHasDialogSupport(supportsDialog());
+  }, []);
+  const TRANSITION_DURATION_IN_MS = ref.current && Number(
+    getComputedStyle(ref.current).getPropertyValue(transition.CSSVariable).replace("ms", "")
+  ) || FALLBACK_TRANSITION_DURATION;
+  (0, import_mobius_hooks3.useBodyScrollLock)({ enabled: isOpen });
+  const open = (0, import_react6.useCallback)(() => {
+    ref.current?.showModal();
+    onOpen?.();
+  }, [onOpen, ref]);
+  const close = (0, import_react6.useCallback)(() => {
+    ref.current?.close();
+    onClose?.();
+  }, [onClose, ref]);
+  const handleClose = (0, import_react6.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_react6.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_react7 = require("react");
+function useLabel({
+  id: providedId,
+  label,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  labelElementType = "label"
+}) {
+  let labelProps = {};
+  let fieldProps = {};
+  const hasWarnedAboutMissingLabels = (0, import_react7.useRef)(false);
+  const fallbackId = (0, import_react7.useId)();
+  const id = providedId || fallbackId;
+  const labelId = (0, import_react7.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/useTextField/useTextField.tsx
+var import_react8 = require("react");
+function useTextField(props) {
+  const {
+    isDisabled = false,
+    isReadOnly = false,
+    isRequired = false,
+    inputElementType = "input"
+  } = props;
+  const { labelProps, fieldProps } = useLabel(props);
+  const descriptionId = (0, import_react8.useId)();
+  const descriptionProps = { id: descriptionId };
+  const errorMessageId = (0, import_react8.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 { isInvalid } = props;
+  if (isInvalid) {
+    return "--is-invalid";
+  }
+  if (isInvalid === false) {
+    return "--is-valid";
+  }
+  return "";
+};
+
+// src/components/TextField/TextField.tsx
+var import_dedupe11 = __toESM(require("classnames/dedupe"));
+
+// src/components/ErrorMessage/ErrorMessage.tsx
+var import_icons2 = require("@simplybusiness/icons");
+var import_dedupe7 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var ErrorMessage = ({
+  id,
+  errorMessage,
+  className
+}) => {
+  const classes = (0, import_dedupe7.default)("mobius", "mobius-error-message", className);
+  if (!errorMessage) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { id, className: classes, "data-testid": "ErrorMessage", role: "alert", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      Icon,
+      {
+        icon: import_icons2.error,
+        className: "mobius-error-message__icon",
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      TextOrHTML,
+      {
+        elementType: "span",
+        className: "mobius-error-message__text",
+        text: errorMessage
+      }
+    )
+  ] });
+};
+ErrorMessage.displayName = "ErrorMessage";
+
+// src/components/Label/Label.tsx
+var import_dedupe8 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Label = ({ ref, ...props }) => {
+  const { elementType: Element = "label", children, ...otherProps } = props;
+  const classes = (0, import_dedupe8.default)("mobius", "mobius-label", props.className);
+  otherProps.className = classes;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Element, { ref, ...otherProps, className: classes, children });
+};
+Label.displayName = "Label";
+
+// src/components/Stack/Stack.tsx
+var import_dedupe9 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Stack = ({ ref, ...props }) => {
+  const { elementType: Element = "div", gap, ...otherProps } = props;
+  const classes = (0, import_dedupe9.default)(
+    "mobius",
+    "mobius-stack",
+    {
+      [`--gap-${gap}`]: gap
+    },
+    otherProps.className
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Element, { ref, ...otherProps, className: classes });
+};
+Stack.displayName = "Stack";
+
+// src/components/TextField/adornmentWithClassName.ts
+var import_dedupe10 = __toESM(require("classnames/dedupe"));
+var import_react9 = require("react");
+var adornmentWithClassName = (component, validationClasses, className) => {
+  if (!component) return null;
+  return (0, import_react9.cloneElement)(component, {
+    className: (0, import_dedupe10.default)(
+      component.props.className,
+      validationClasses,
+      className
+    )
+  });
+};
+
+// src/components/TextField/TextField.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var TextField = ({ ref, ...props }) => {
+  const {
+    isDisabled,
+    type = "text",
+    isInvalid,
+    className,
+    label,
+    errorMessage,
+    children,
+    isRequired,
+    prefixInside,
+    prefixOutside,
+    suffixInside,
+    suffixOutside,
+    isReadOnly,
+    ...otherProps
+  } = props;
+  const { inputProps, labelProps, errorMessageProps } = useTextField({
+    ...props,
+    "aria-errormessage": errorMessage
+  });
+  const hidden = type === "hidden";
+  const validationClasses = useValidationClasses({ isInvalid });
+  const textfieldClasses = {
+    "--is-disabled": isDisabled,
+    "--is-required": typeof isRequired === "boolean" && isRequired,
+    "--is-optional": typeof isRequired === "boolean" && !isRequired,
+    "--is-hidden": hidden,
+    [className || ""]: true
+  };
+  const sharedClasses = (0, import_dedupe11.default)(validationClasses, textfieldClasses);
+  const labelClasses = (0, import_dedupe11.default)(
+    {
+      "--is-disabled": isDisabled
+    },
+    validationClasses
+  );
+  const containerClasses = (0, import_dedupe11.default)(
+    "mobius",
+    "mobius-text-field",
+    sharedClasses
+  );
+  const inputClasses = (0, import_dedupe11.default)(
+    "mobius",
+    "mobius-text-field__input",
+    sharedClasses
+  );
+  const inputWrapperClasses = (0, import_dedupe11.default)(
+    "mobius-text-field__input-wrapper",
+    sharedClasses
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Stack, { gap: "xs", className: containerClasses, children: [
+    label && !hidden && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Label, { ...labelProps, className: labelClasses, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "mobius-text-field__inner-container", children: [
+      adornmentWithClassName(
+        prefixOutside,
+        labelClasses,
+        "mobius-text-field__prefix-outside"
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: inputWrapperClasses, children: [
+        adornmentWithClassName(
+          prefixInside,
+          labelClasses,
+          "mobius-text-field__prefix-inside"
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsx)("div", { className: "mobius-text-field__children", children }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ErrorMessage, { ...errorMessageProps, errorMessage })
+  ] });
+};
+TextField.displayName = "TextField";
+
+// src/components/VisuallyHidden/VisuallyHidden.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function VisuallyHidden(props) {
+  const {
+    className,
+    children,
+    elementType: Component = "div",
+    ...otherProps
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.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_dedupe13 = __toESM(require("classnames/dedupe"));
+
+// src/components/Combobox/Option.tsx
+var import_react10 = require("react");
+var import_dedupe12 = __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_runtime12 = require("react/jsx-runtime");
+var Option = ({
+  option,
+  isHighlighted,
+  onOptionSelect,
+  optionComponent: OptionComponent,
+  id
+}) => {
+  const optionRef = (0, import_react10.useRef)(null);
+  (0, import_react10.useEffect)(() => {
+    if (isHighlighted && optionRef.current && optionRef.current.scrollIntoView) {
+      optionRef.current.scrollIntoView({ block: "nearest" });
+    }
+  }, [isHighlighted]);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    "li",
+    {
+      ref: optionRef,
+      role: "option",
+      id,
+      "aria-selected": isHighlighted,
+      onMouseDown: () => onOptionSelect(option),
+      className: (0, import_dedupe12.default)("mobius-combobox__option", "has-pii", {
+        "mobius-combobox__option--is-highlighted": isHighlighted
+      }),
+      children: OptionComponent ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(OptionComponent, { option, isHighlighted }) : getOptionLabel(option)
+    },
+    getOptionValue(option)
+  );
+};
+
+// src/components/Combobox/Listbox.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var getOptionKey = (option, index, groupIndex) => {
+  let key;
+  if (typeof option === "object" && option.id) key = option.id;
+  else if (typeof option === "object") key = `${option.value}::${option.label}`;
+  else if (typeof option === "string") key = option;
+  else key = String(index);
+  return groupIndex !== void 0 ? `${groupIndex}:${key}` : key;
+};
+var Listbox = ({
+  id,
+  isOpen = false,
+  options,
+  highlightedIndex,
+  highlightedGroupIndex,
+  onOptionSelect,
+  optionComponent
+}) => {
+  const classes = (0, import_dedupe13.default)("mobius-combobox__list", {
+    "mobius-combobox__list--hidden": !isOpen
+  });
+  function getOptionId(option, groupIndex, index) {
+    if (typeof option === "object" && "id" in option && typeof option.id === "string") {
+      return option.id;
+    }
+    return isOptionGroup(options) ? `${id}-option-${groupIndex}-${index}` : `${id}-option-${index}`;
+  }
+  if (!isOpen) {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { role: "listbox", id, className: classes });
+  }
+  if (options && options.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { role: "listbox", id, className: classes, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "mobius-combobox__no-options", children: "No options" }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { role: "listbox", id, className: classes, children: isOptionGroup(options) ? options.map((option, groupIndex) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "ul",
+    {
+      role: "group",
+      "aria-labelledby": `${id}-group-${groupIndex}`,
+      className: "mobius-combobox__group",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.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_runtime13.jsx)(
+          Option,
+          {
+            option: groupOption,
+            isHighlighted: highlightedIndex === index && highlightedGroupIndex === groupIndex,
+            onOptionSelect,
+            optionComponent,
+            id: getOptionId(groupOption, groupIndex, index)
+          },
+          getOptionKey(groupOption, index, groupIndex)
+        ))
+      ]
+    },
+    option.heading
+  )) : typeof options !== "undefined" ? options.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    Option,
+    {
+      option,
+      isHighlighted: highlightedIndex === index,
+      onOptionSelect,
+      optionComponent,
+      id: getOptionId(option, 0, index)
+    },
+    getOptionKey(option, index)
+  )) : null });
+};
+
+// src/components/Combobox/useComboboxHighlight.tsx
+var import_react11 = require("react");
+function useComboboxHighlight(options) {
+  const [highlightedIndex, setHighlightedIndex] = (0, import_react11.useState)(
+    options && options.length ? 0 : -1
+  );
+  const [highlightedGroupIndex, setHighlightedGroupIndex] = (0, import_react11.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_react12 = require("react");
+var import_mobius_hooks4 = require("@simplybusiness/mobius-hooks");
+function useComboboxOptions({
+  options,
+  asyncOptions,
+  delay = 300,
+  minSearchLength = 3,
+  inputValue = "",
+  skipNextDebounceRef,
+  onSearched
+}) {
+  const [filteredOptions, setFilteredOptions] = (0, import_react12.useState)(void 0);
+  const debouncedInputValue = (0, import_mobius_hooks4.useDebouncedValue)(
+    inputValue,
+    // Don't debounce synchronous options
+    options ? 0 : delay
+  );
+  const [isLoading, setIsLoading] = (0, import_react12.useState)(false);
+  const [error3, setError] = (0, import_react12.useState)(null);
+  (0, import_react12.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 if (options) {
+          setFilteredOptions(filterOptions(options, debouncedInputValue));
+        } else {
+          setError(new Error("No options provided"));
+        }
+      } catch (e) {
+        if (e instanceof DOMException && e.name === "AbortError") {
+          return;
+        }
+        setError(e);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    if (!skipNextDebounceRef?.current) {
+      void fetchOptions();
+    } else {
+      skipNextDebounceRef.current = false;
+    }
+    return () => {
+      controller.abort();
+    };
+  }, [
+    debouncedInputValue,
+    options,
+    asyncOptions,
+    delay,
+    minSearchLength,
+    skipNextDebounceRef,
+    onSearched
+  ]);
+  function updateFilteredOptions(newOptions) {
+    setIsLoading(true);
+    return newOptions.then(setFilteredOptions).catch(setError).finally(() => setIsLoading(false));
+  }
+  return {
+    filteredOptions,
+    updateFilteredOptions,
+    isLoading,
+    error: error3,
+    isError: error3 != null
+  };
+}
+
+// src/components/Combobox/Combobox.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var ComboboxInner = ({
+  ref,
+  ...props
+}) => {
+  const {
+    id,
+    defaultValue,
+    value,
+    options,
+    asyncOptions,
+    delay,
+    minSearchLength,
+    onSelected,
+    className,
+    placeholder,
+    icon,
+    onBlur,
+    onFocus,
+    onChange,
+    // onSearched, // unused prop, consider removing
+    optionComponent,
+    errorMessage,
+    ...otherProps
+  } = props;
+  const skipNextDebounceRef = (0, import_react13.useRef)(false);
+  const fallbackRef = (0, import_react13.useRef)(null);
+  const [inputValue, setInputValue] = (0, import_react13.useState)(defaultValue || "");
+  const [isOpen, setIsOpen] = (0, import_react13.useState)(false);
+  const [isChanging, setIsChanging] = (0, import_react13.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 inputRef = ref || fallbackRef;
+  const listboxId = (0, import_react13.useId)();
+  const statusId = (0, import_react13.useId)();
+  const blurTimeoutRef = (0, import_react13.useRef)(null);
+  const userInteractedRef = (0, import_react13.useRef)(false);
+  const justSelectedRef = (0, import_react13.useRef)(false);
+  const { down } = useBreakpoint();
+  const isMobile = down("md");
+  const handleFocus = (e) => {
+    onFocus?.(e);
+    if (!filteredOptions || filteredOptions.length === 0) return;
+    if (blurTimeoutRef.current) {
+      clearTimeout(blurTimeoutRef.current);
+      blurTimeoutRef.current = null;
+    }
+    const isNaturalFocus = userInteractedRef.current || e.relatedTarget !== null;
+    if (userInteractedRef.current) {
+      userInteractedRef.current = false;
+    }
+    if (justSelectedRef.current && !isNaturalFocus) {
+      return;
+    }
+    if (isNaturalFocus) {
+      setIsOpen(true);
+      justSelectedRef.current = false;
+    }
+  };
+  (0, import_react13.useEffect)(() => {
+    if (!inputRef || typeof inputRef === "function") return;
+    const inputElement = inputRef.current;
+    if (!inputElement) return;
+    const handleMouseDown = () => {
+      userInteractedRef.current = true;
+    };
+    inputElement.addEventListener("mousedown", handleMouseDown);
+    return () => {
+      inputElement.removeEventListener("mousedown", handleMouseDown);
+    };
+  }, [inputRef]);
+  (0, import_mobius_hooks5.useOnUnmount)(() => {
+    if (blurTimeoutRef.current) {
+      clearTimeout(blurTimeoutRef.current);
+    }
+  });
+  const handleInputChange = (e) => {
+    const newValue = e.target.value;
+    setInputValue(newValue);
+    justSelectedRef.current = false;
+    setIsChanging(true);
+    if (!asyncOptions) {
+      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(() => {
+        if (inputRef && typeof inputRef !== "function" && inputRef.current) {
+          inputRef.current.focus();
+        }
+      }, 0);
+      updateFilteredOptions(option.callback());
+      return;
+    }
+    skipNextDebounceRef.current = true;
+    justSelectedRef.current = true;
+    setIsChanging(false);
+    setIsOpen(false);
+    setInputValue(val);
+    onSelected?.(option);
+  };
+  const getFirstOption = () => {
+    if (!filteredOptions) return void 0;
+    if (isOptionGroup(filteredOptions)) {
+      return filteredOptions[0]?.options[0];
+    }
+    return filteredOptions[0];
+  };
+  const getHighlightedOption = () => {
+    if (!filteredOptions) return void 0;
+    if (highlightedIndex === -1) return void 0;
+    if (isOptionGroup(filteredOptions)) {
+      const group = filteredOptions[highlightedGroupIndex];
+      return group?.options[highlightedIndex];
+    }
+    return filteredOptions[highlightedIndex];
+  };
+  const getHighlightedOptionId = () => {
+    const option = getHighlightedOption();
+    if (!option) return void 0;
+    if (isOptionGroup(filteredOptions)) {
+      return `${listboxId}-option-${highlightedGroupIndex}-${highlightedIndex}`;
+    }
+    return `${listboxId}-option-${highlightedIndex}`;
+  };
+  const handleBlur = (e) => {
+    if (!justSelectedRef.current) {
+      const typedText = inputValue.trim().toLowerCase();
+      const highlightedOption = getHighlightedOption();
+      const label = getOptionLabel(highlightedOption);
+      if (typedText === label?.toLowerCase()) {
+        setTimeout(() => {
+          handleOptionSelect(highlightedOption);
+        }, 0);
+      }
+    }
+    blurTimeoutRef.current = setTimeout(() => {
+      onBlur?.(e);
+      setIsOpen(false);
+      setIsChanging(false);
+    }, 150);
+  };
+  const handleKeyDown = (e) => {
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        justSelectedRef.current = false;
+        setIsOpen(true);
+        highlightNextOption();
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        justSelectedRef.current = false;
+        setIsOpen(true);
+        highlightPreviousOption();
+        break;
+      case "Home":
+        e.preventDefault();
+        justSelectedRef.current = false;
+        setIsOpen(true);
+        highlightFirstOption();
+        break;
+      case "End":
+        e.preventDefault();
+        justSelectedRef.current = false;
+        setIsOpen(true);
+        highlightLastOption();
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (isOpen) {
+          const selectedOption = getHighlightedOption() || getFirstOption();
+          if (selectedOption) {
+            handleOptionSelect(selectedOption);
+          }
+        }
+        break;
+      case "Escape":
+        e.preventDefault();
+        setInputValue("");
+        setIsOpen(false);
+        clearHighlight();
+        break;
+      default:
+    }
+  };
+  (0, import_react13.useEffect)(() => {
+    if (value) {
+      setInputValue(value);
+    }
+  }, [value]);
+  (0, import_react13.useEffect)(() => {
+    if (asyncOptions && isChanging) {
+      setIsOpen(!!filteredOptions && filteredOptions.length > 0);
+    }
+  }, [filteredOptions, asyncOptions, isChanging]);
+  const classes = (0, import_dedupe14.default)(
+    "mobius mobius-combobox",
+    {
+      "mobius-combobox--is-expanded": isOpen,
+      "mobius-combobox--is-loading": isLoading,
+      "mobius-combobox--is-mobile": isMobile
+    },
+    className
+  );
+  const getStatusMessage = () => {
+    if (isLoading) return "Loading options";
+    if (!filteredOptions || filteredOptions.length === 0) {
+      return isChanging ? "No options found" : "";
+    }
+    const count = isOptionGroup(filteredOptions) ? filteredOptions.reduce((sum, group) => sum + group.options.length, 0) : filteredOptions.length;
+    return isOpen && isChanging ? `${count} option${count === 1 ? "" : "s"} available` : "";
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { id, "data-testid": "mobius-combobox__wrapper", className: classes, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      VisuallyHidden,
+      {
+        role: "status",
+        "aria-live": "polite",
+        id: statusId,
+        elementType: "div",
+        className: "mobius-combobox__status",
+        children: getStatusMessage()
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime14.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-owns": listboxId,
+        "aria-controls": listboxId,
+        "aria-expanded": isOpen,
+        "aria-activedescendant": highlightedIndex === -1 ? void 0 : getHighlightedOptionId(),
+        prefixInside: icon,
+        ref: inputRef,
+        errorMessage: errorMessage || error3?.message || void 0
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      Listbox,
+      {
+        id: listboxId,
+        isOpen,
+        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_runtime15 = 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 = ({
+  ref,
+  addressLookupService,
+  onAddressSelected,
+  onOptionsDisplayed,
+  onError,
+  errorMessage,
+  ...otherProps
+}) => {
+  const [error3, _setError] = (0, import_react14.useState)(null);
+  const setError = (0, import_react14.useCallback)(
+    (newError) => {
+      if (newError != null) onError?.(newError);
+      _setError(newError);
+    },
+    [onError]
+  );
+  const asyncOptions = (0, import_react14.useCallback)(
+    async (searchTerm) => {
+      try {
+        const response = await addressLookupService.search(searchTerm);
+        setError(null);
+        const options = optionsFromResponse(response, addressLookupService);
+        onOptionsDisplayed?.();
+        return options;
+      } catch (e) {
+        setError(e);
+        return [];
+      }
+    },
+    [addressLookupService, setError, onOptionsDisplayed]
+  );
+  const handleSelected = (selected) => {
+    setError(null);
+    if (typeof selected === "string" || !selected.id) {
+      setError(new Error("Selected option missing id"));
+      return Promise.resolve();
+    }
+    return addressLookupService.get(selected.id).then(onAddressSelected).catch(setError);
+  };
+  const realErrorMessage = error3 && "An error occurred" || errorMessage;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    Combobox,
+    {
+      ...otherProps,
+      ref,
+      onSelected: handleSelected,
+      asyncOptions,
+      errorMessage: realErrorMessage,
+      icon: /* @__PURE__ */ (0, import_jsx_runtime15.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 _baseUrl, _apiKey, _countries, _filters;
+var LoqateAddressLookupService = class {
+  constructor({
+    baseUrl,
+    apiKey,
+    countries,
+    filters
+  }) {
+    /**
+     * Base URL for the Loqate API
+     */
+    __privateAdd(this, _baseUrl);
+    /**
+     * API key for the Loqate API
+     */
+    __privateAdd(this, _apiKey);
+    /**
+     * List of allowed country codes for the Loqate API
+     * 2 or 3 character ISO country codes
+     */
+    __privateAdd(this, _countries);
+    /**
+     * Optional filters for the Loqate API
+     * E.g., { AdministrativeArea: "CA", PostalCode: "90210" }
+     */
+    __privateAdd(this, _filters);
+    __privateSet(this, _apiKey, apiKey);
+    __privateSet(this, _baseUrl, baseUrl || LOQATE_BASE_URL);
+    __privateSet(this, _countries, countries || DEFAULT_COUNTRIES);
+    __privateSet(this, _filters, filters);
+  }
+  fetchFromApi(url) {
+    return fetch(`${__privateGet(this, _baseUrl)}${url}`).then((response) => response.json()).then((json) => {
+      if (json.Items?.some((item) => item.Error)) {
+        throw new LoqateAddressLookupError(json);
+      }
+      return json;
+    });
+  }
+  /**
+   * Builds the Filters query parameter for Loqate API requests.
+   * - Filter keys (e.g., "AdministrativeArea", "PostalCode") are predefined by Loqate API (no need to encode)
+   * - Filter values (e.g., "New York", "90210") contain user input that may have special characters (need encoding)
+   *
+   * @returns Empty string if no filters, otherwise "&Filters=key1:value1&key2:value2" (Loqate's expected format for Filters)
+   */
+  buildFiltersQuery() {
+    if (!__privateGet(this, _filters) || Object.keys(__privateGet(this, _filters)).length === 0) {
+      return "";
+    }
+    const encodedFilters = Object.entries(__privateGet(this, _filters)).map(([key, value]) => `${key}:${encodeURIComponent(value)}`).join("&");
+    return `&Filters=${encodedFilters}`;
+  }
+  search(searchTerm) {
+    let url = `${LOQATE_FIND_URL}?Key=${__privateGet(this, _apiKey)}&Text=${searchTerm}&Countries=${__privateGet(this, _countries)?.join(",")}`;
+    url += this.buildFiltersQuery();
+    return this.fetchFromApi(url);
+  }
+  findById(id) {
+    let url = `${LOQATE_FIND_URL}?Key=${__privateGet(this, _apiKey)}&Container=${id}&Countries=${__privateGet(this, _countries)?.join(",")}`;
+    url += this.buildFiltersQuery();
+    return this.fetchFromApi(url);
+  }
+  async get(id) {
+    const url = `${LOQATE_RETRIEVE_URL}?Key=${__privateGet(this, _apiKey)}&Id=${id}`;
+    const response = await this.fetchFromApi(url);
+    return response.Items[0];
+  }
+};
+_baseUrl = new WeakMap();
+_apiKey = new WeakMap();
+_countries = new WeakMap();
+_filters = new WeakMap();
+
+// src/components/Alert/Alert.tsx
+var import_icons4 = require("@simplybusiness/icons");
+var import_dedupe15 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function isAlertVariant(value) {
+  return value === "info" || value === "success" || value === "warning" || value === "error";
+}
+var Alert = ({ ref, ...props }) => {
+  const {
+    elementType: Element = "div",
+    variant: variantProp,
+    show = true,
+    header,
+    children,
+    ...otherProps
+  } = props;
+  if (!show) return null;
+  const variant = variantProp && isAlertVariant(variantProp) ? variantProp : "info";
+  const colorValue = variant === "success" ? `var(--color-valid)` : `var(--color-${variant})`;
+  const classes = (0, import_dedupe15.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_dedupe15.default)("mobius", "mobius-alert__header");
+  const iconClasses = (0, import_dedupe15.default)("mobius", "mobius-alert__icon");
+  const contentClasses = (0, import_dedupe15.default)("mobius", "mobius-alert__content");
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Element, { ref, role: "alert", ...otherProps, className: classes, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: iconClasses, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { icon: icon[variant], color: colorValue }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { children: [
+      header && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: headerClasses, children: header }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: contentClasses, children })
+    ] })
+  ] });
+};
+Alert.displayName = "Alert";
+
+// src/components/Box/Box.tsx
+var import_dedupe16 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var Box = ({ ref, ...props }) => {
+  const {
+    elementType: Element = "div",
+    padding,
+    paddingX,
+    paddingInline,
+    paddingInlineStart,
+    paddingInlineEnd,
+    paddingY,
+    paddingBlock,
+    paddingBlockStart,
+    paddingBlockEnd,
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft,
+    minWidth,
+    minHeight,
+    maxWidth,
+    maxHeight,
+    width,
+    height,
+    style,
+    ...otherProps
+  } = props;
+  const classes = (0, import_dedupe16.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_runtime17.jsx)(Element, { ref, style: styleProps, ...otherProps, className: classes });
+};
+Box.displayName = "Box";
+
+// src/components/Breadcrumbs/Breadcrumbs.tsx
+var import_react15 = require("react");
+var import_dedupe17 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var Breadcrumbs = ({ ref, ...props }) => {
+  const { "aria-label": ariaLabel = "Breadcrumbs" } = props;
+  const { navProps } = { navProps: { "aria-label": ariaLabel } };
+  const { children, ...otherProps } = props;
+  const childArray = import_react15.Children.toArray(children);
+  const classes = (0, import_dedupe17.default)(
+    "mobius",
+    "mobius-breadcrumb",
+    otherProps.className
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("nav", { ref, ...otherProps, ...navProps, className: classes, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("ul", { children: childArray.map(
+    (child, i) => (0, import_react15.cloneElement)(
+      child,
+      {
+        key: i,
+        isCurrent: i === childArray.length - 1
+      }
+    )
+  ) }) });
+};
+Breadcrumbs.displayName = "Breadcrumbs";
+
+// src/components/Breadcrumbs/BreadcrumbItem.tsx
+var import_react16 = require("react");
+var import_dedupe18 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var BreadcrumbItem = ({ ref, ...props }) => {
+  const {
+    isDisabled = false,
+    isCurrent = false,
+    "aria-current": ariaCurrent = "page",
+    children,
+    separator = /* @__PURE__ */ (0, import_jsx_runtime19.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_dedupe18.default)(
+    "mobius",
+    "mobius-breadcrumb__item",
+    props.className
+  );
+  const child = typeof children === "string" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { ...itemProps, children }) : import_react16.Children.only(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("li", { className: classes, children: [
+    (0, import_react16.cloneElement)(child, {
+      ...child.props,
+      ...itemProps,
+      ref
+    }),
+    !props.isCurrent && separator
+  ] });
+};
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+// src/components/Button/Button.tsx
+var import_dedupe19 = __toESM(require("classnames/dedupe"));
+
+// src/components/Button/Loading.tsx
+var import_icons5 = require("@simplybusiness/icons");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var Loading = (props) => {
+  const { children } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "mobius-button__icon-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { icon: import_icons5.loading, spin: true, size: "md" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(VisuallyHidden, { className: "mobius-button__loading-text", children: "Loading" }),
+    children
+  ] });
+};
+
+// src/components/Button/Success.tsx
+var import_icons6 = require("@simplybusiness/icons");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var Success = () => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "mobius-button__icon-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, { icon: import_icons6.tick, size: "md" }) }),
+  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(VisuallyHidden, { className: "mobius-button__success-text", children: "Success" })
+] });
+
+// src/components/Button/Button.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var Button = ({ ref, ...props }) => {
+  const {
+    children,
+    elementType: Component = "button",
+    isDisabled,
+    isLoading,
+    isSuccess,
+    variant = "primary",
+    size = "md",
+    onPress,
+    onClick,
+    ...otherProps
+  } = props;
+  const { buttonProps } = useButton(props);
+  otherProps.className = (0, import_dedupe19.default)(
+    "mobius",
+    "mobius-button",
+    `--variant-${variant}`,
+    `--size-${size}`,
+    {
+      "--is-disabled": isDisabled,
+      "--is-loading": isLoading,
+      "--is-success": isSuccess && !isLoading
+    },
+    otherProps.className
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Component, { ref, ...buttonProps, ...otherProps, children: [
+    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Loading, { children }) : children,
+    isSuccess && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Success, {})
+  ] });
+};
+Button.displayName = "Button";
+
+// src/components/Checkbox/Checkbox.tsx
+var import_react17 = require("react");
+var import_dedupe20 = __toESM(require("classnames/dedupe"));
+var import_icons7 = require("@simplybusiness/icons");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var Checkbox = ({ ref, ...props }) => {
+  const {
+    id,
+    label,
+    isDisabled,
+    isRequired,
+    isInvalid,
+    onChange,
+    className,
+    errorMessage,
+    selected,
+    defaultSelected = false,
+    isReadOnly,
+    isLastItem,
+    name,
+    value,
+    ["aria-describedby"]: ariaDescribedBy,
+    ...rest
+  } = props;
+  const [checked, setChecked] = (0, import_react17.useState)(defaultSelected);
+  const fallbackRef = (0, import_react17.useRef)(null);
+  const refObj = ref || fallbackRef;
+  const inputId = (0, import_react17.useId)();
+  const isControlled = typeof selected === "boolean";
+  (0, import_react17.useEffect)(() => {
+    if (isControlled) {
+      setChecked(selected);
+    }
+  }, [selected, isControlled]);
+  const validationClasses = useValidationClasses({ isInvalid });
+  const sharedClasses = (0, import_dedupe20.default)(
+    {
+      "--is-disabled": isDisabled,
+      "--is-selected": checked,
+      "--is-required": typeof isRequired === "boolean" && isRequired,
+      "--is-optional": typeof isRequired === "boolean" && !isRequired
+    },
+    validationClasses
+  );
+  const wrapperClasses = (0, import_dedupe20.default)(
+    "mobius",
+    "mobius-checkbox",
+    sharedClasses,
+    className
+  );
+  const labelClasses = (0, import_dedupe20.default)("mobius-checkbox__label", sharedClasses);
+  const inputClasses = (0, import_dedupe20.default)("mobius-checkbox__input", sharedClasses);
+  const iconClasses = (0, import_dedupe20.default)("mobius-checkbox__icon", sharedClasses);
+  const errorMessageId = (0, import_react17.useId)();
+  const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
+  const describedBy = spaceDelimitedList([
+    shouldErrorMessageShow,
+    ariaDescribedBy
+  ]);
+  const labelId = (0, import_react17.useId)();
+  const handleChange = (event) => {
+    setChecked(!checked);
+    if (onChange) {
+      onChange(event, isLastItem);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Stack, { gap: "xs", className: wrapperClasses, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { className: labelClasses, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.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_runtime23.jsx)(
+        Icon,
+        {
+          icon: checked ? import_icons7.squareTick : import_icons7.square,
+          size: "md",
+          className: iconClasses
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { id: labelId, className: "mobius-checkbox__visible-label", children: label })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ErrorMessage, { id: errorMessageId, errorMessage })
+  ] });
+};
+Checkbox.displayName = "Checkbox";
+
+// src/components/Checkbox/CheckboxGroup.tsx
+var import_dedupe21 = __toESM(require("classnames/dedupe"));
+var import_react18 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var CheckboxGroup = ({ ref, ...props }) => {
+  const {
+    label,
+    isDisabled = false,
+    isRequired,
+    isInvalid,
+    orientation = "vertical",
+    onChange,
+    className,
+    errorMessage,
+    children,
+    defaultValue = [],
+    isReadOnly,
+    itemsPerRow,
+    lastItemDisables = false,
+    ...rest
+  } = props;
+  const [selected, setSelected] = (0, import_react18.useState)(defaultValue);
+  const isInitializedRef = (0, import_react18.useRef)(false);
+  const prevDefaultValueRef = (0, import_react18.useRef)(defaultValue);
+  (0, import_react18.useEffect)(() => {
+    const hasChanged = defaultValue.length !== prevDefaultValueRef.current.length || defaultValue.some(
+      (val, index) => val !== prevDefaultValueRef.current[index]
+    );
+    if (hasChanged || !isInitializedRef.current) {
+      setSelected(defaultValue);
+      prevDefaultValueRef.current = defaultValue;
+      isInitializedRef.current = true;
+    }
+  }, [defaultValue]);
+  const checkboxGroupClasses = (0, import_dedupe21.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({ isInvalid });
+  const labelClasses = (0, import_dedupe21.default)(
+    {
+      "--is-disabled": isDisabled
+    },
+    validationClasses
+  );
+  const errorMessageId = (0, import_react18.useId)();
+  const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
+  const describedBy = spaceDelimitedList([
+    shouldErrorMessageShow,
+    props["aria-describedby"]
+  ]);
+  const labelId = (0, import_react18.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_react18.Children.toArray(children);
+  const lastCheckbox = childrenArray.filter(
+    (child) => (0, import_react18.isValidElement)(child) && child.type === Checkbox
+  ).pop();
+  const lastCheckboxIsChecked = lastCheckbox && selected.includes(lastCheckbox.props.value);
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+    "div",
+    {
+      ...rest,
+      "aria-labelledby": props["aria-labelledby"] || labelId,
+      ref,
+      className: checkboxGroupClasses,
+      role: "group",
+      style: {
+        "--checkbox-items-per-row": itemsPerRow || import_react18.Children.count(children)
+      },
+      children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Label, { elementType: "span", id: labelId, className: labelClasses, children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "mobius-checkbox-group__wrapper", children: childrenArray.map((child) => {
+          if ((0, import_react18.isValidElement)(child)) {
+            const isLastItem = child === lastCheckbox;
+            const isChildDisabled = isDisabled || lastItemDisables && lastCheckboxIsChecked && !isLastItem;
+            const childProps = child.props;
+            return (0, import_react18.cloneElement)(
+              child,
+              {
+                isDisabled: isChildDisabled,
+                isRequired,
+                isReadOnly,
+                isInvalid,
+                isLastItem,
+                selected: selected.includes(childProps.value),
+                onChange: childProps.onChange || handleChange,
+                "aria-describedby": describedBy
+              }
+            );
+          }
+          return child;
+        }) }),
+        errorMessage && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ErrorMessage, { id: errorMessageId, errorMessage })
+      ]
+    }
+  );
+};
+CheckboxGroup.displayName = "CheckboxGroup";
+
+// src/components/Container/Container.tsx
+var import_dedupe22 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var Container = ({ ref, ...props }) => {
+  const { elementType: Element = "div", size = "md", ...otherProps } = props;
+  const classes = (0, import_dedupe22.default)(
+    "mobius",
+    "mobius-container",
+    sizeClasses(size),
+    otherProps.className
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Element, { ref, ...otherProps, className: classes });
+};
+Container.displayName = "Container";
+
+// src/components/DateField/DateField.tsx
+var import_dedupe23 = __toESM(require("classnames/dedupe"));
+var import_react19 = require("react");
+
+// src/components/DateField/validation.ts
+var convertToDateFormat = (date, format) => {
+  const dateParts = date.split(/[-/]/);
+  const formatParts = format ? format.split(/[-/]/) : ["yyyy", "mm", "dd"];
+  const dateObj = {};
+  const formattedDate = [];
+  for (let i = 0; i < formatParts.length; i++) {
+    dateObj[formatParts[i]] = dateParts[i] ? parseInt(dateParts[i], 10) : 0;
+  }
+  formattedDate.push(dateObj["yyyy"]?.toString() || "0000");
+  formattedDate.push(
+    (dateObj["mm"] < 10 ? "0" : "") + (dateObj["mm"]?.toString() || "00")
+  );
+  formattedDate.push(
+    (dateObj["dd"] < 10 ? "0" : "") + (dateObj["dd"]?.toString() || "00")
+  );
+  return formattedDate.join("-");
+};
+var isValidDate = (date, format = "yyyy-mm-dd") => {
+  if (!date) return true;
+  const standardDate = convertToDateFormat(date, format);
+  const [yearStr, monthStr, dayStr] = standardDate.split("-");
+  const year = parseInt(yearStr, 10);
+  const month = parseInt(monthStr, 10);
+  const day = parseInt(dayStr, 10);
+  if (month < 1 || month > 12) {
+    return false;
+  }
+  const daysInMonth = new Date(year, month, 0).getDate();
+  return day > 0 && day <= daysInMonth;
+};
+
+// src/components/DateField/DateField.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var MIN_MAX_ERROR = '"min" value should not be greater than "max" value.';
+var DateField = ({ ref, ...props }) => {
+  const {
+    min,
+    max,
+    format,
+    className,
+    errorMessage,
+    defaultValue,
+    value,
+    ...otherProps
+  } = props;
+  const [error3, setError] = (0, import_react19.useState)(errorMessage);
+  const [isInvalid, setIsInvalid] = (0, import_react19.useState)(void 0);
+  const localRef = (0, import_react19.useRef)(null);
+  const classes = (0, import_dedupe23.default)("mobius-date-field", className);
+  const formattedMin = min ? convertToDateFormat(min, format) : void 0;
+  const formattedMax = max ? convertToDateFormat(max, format) : void 0;
+  const formattedDefaultValue = defaultValue ? convertToDateFormat(defaultValue, format) : void 0;
+  const formattedValue = value ? convertToDateFormat(value, format) : void 0;
+  const setInvalidState = (error4) => {
+    setError(error4);
+    setIsInvalid(true);
+  };
+  const setValidState = () => {
+    setError(props.errorMessage);
+    setIsInvalid(false);
+  };
+  (0, import_react19.useEffect)(() => {
+    if (!isValidDate(min, format)) {
+      setInvalidState(`Invalid min date: ${min}`);
+      return;
+    }
+    if (!isValidDate(max, format)) {
+      setInvalidState(`Invalid max date: ${max}`);
+      return;
+    }
+    if (min && max) {
+      const minDate = new Date(min);
+      const maxDate = new Date(max);
+      if (minDate > maxDate) {
+        setInvalidState(MIN_MAX_ERROR);
+      } else {
+        setValidState();
+      }
+    } else {
+      setValidState();
+    }
+  }, [min, max, format]);
+  const validate = () => {
+    const isValidInput = localRef.current?.checkValidity();
+    if (!isValidInput) {
+      setInvalidState("Invalid date input");
+    } else {
+      setValidState();
+    }
+  };
+  const handleBlur = (event) => {
+    validate();
+    otherProps.onBlur?.(event);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    TextField,
+    {
+      ref: mergeRefs([localRef, ref]),
+      className: classes,
+      type: "date",
+      min: formattedMin,
+      max: formattedMax,
+      errorMessage: errorMessage ?? error3,
+      isInvalid,
+      defaultValue: formattedDefaultValue,
+      value: formattedValue,
+      onBlur: handleBlur,
+      ...otherProps
+    }
+  );
+};
+DateField.displayName = "DateField";
+
+// src/components/Drawer/Content.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var Content = ({ ref, children, ...otherProps }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { ref, ...otherProps, className: "mobius-drawer__content", children });
+Content.displayName = "Content";
+
+// src/components/Drawer/Drawer.tsx
+var import_dedupe24 = __toESM(require("classnames/dedupe"));
+var import_react21 = require("react");
+
+// src/components/Drawer/DrawerContext.tsx
+var import_react20 = require("react");
+var DrawerContext = (0, import_react20.createContext)({
+  onClose: () => {
+  },
+  closeLabel: void 0,
+  headerId: void 0
+});
+
+// src/components/Drawer/Drawer.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var TRANSITION_CSS_VARIABLE = "--drawer-transition-duration";
+var Drawer = ({ ref, ...props }) => {
+  const {
+    isOpen,
+    className,
+    closeLabel,
+    direction,
+    announce = "Drawer opened on screen",
+    onOpen,
+    onClose,
+    children
+  } = props;
+  const dialogRef = (0, import_react21.useRef)(null);
+  const [shouldTransition, setShouldTransition] = (0, import_react21.useState)(false);
+  const { close } = useDialog({
+    ref: dialogRef,
+    isOpen,
+    onOpen,
+    onClose,
+    transition: {
+      isEnabled: true,
+      CSSVariable: TRANSITION_CSS_VARIABLE
+    }
+  });
+  const hiddenId = `dialog-screen-reader-announce-${(0, import_react21.useId)()}`;
+  const headerId = `dialog-header-${(0, import_react21.useId)()}`;
+  const dialogClasses = (0, import_dedupe24.default)(
+    "mobius",
+    "mobius-drawer",
+    `--${direction}`,
+    className,
+    {
+      "--should-transition": shouldTransition
+    }
+  );
+  (0, import_react21.useEffect)(() => {
+    setShouldTransition(supportsDialog());
+  }, []);
+  const contextValue = (0, import_react21.useMemo)(
+    () => ({
+      onClose: close,
+      closeLabel,
+      headerId
+    }),
+    [close, closeLabel, headerId]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    "dialog",
+    {
+      id: (0, import_react21.useId)(),
+      ref: mergeRefs([dialogRef, ref]),
+      onCancel: close,
+      className: dialogClasses,
+      "aria-describedby": hiddenId,
+      "aria-labelledby": headerId,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { id: hiddenId, children: announce }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DrawerContext.Provider, { value: contextValue, children })
+      ]
+    }
+  );
+};
+Drawer.displayName = "Drawer";
+
+// src/components/Drawer/useDrawer.ts
+var import_react22 = require("react");
+var useDrawer = () => {
+  const { onClose, closeLabel, headerId } = (0, import_react22.useContext)(DrawerContext);
+  return { onClose, closeLabel, headerId };
+};
+
+// src/components/Drawer/Header.tsx
+var import_icons8 = require("@simplybusiness/icons");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var Header = ({ ref, children, ...otherProps }) => {
+  const { onClose, closeLabel, headerId } = useDrawer();
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("header", { ref, ...otherProps, className: "mobius-drawer__header", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("h2", { id: headerId, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+      Button,
+      {
+        "aria-label": "Close",
+        variant: "basic",
+        onPress: onClose,
+        className: "mobius-drawer__close",
+        size: "sm",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.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_react23 = require("react");
+var import_react_accessible_dropdown_menu_hook = __toESM(require("react-accessible-dropdown-menu-hook"));
+var import_dedupe25 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var DropdownMenu = ({ ref, ...props }) => {
+  const {
+    elementType: Element = "nav",
+    trigger,
+    label = "Menu",
+    children,
+    ...otherProps
+  } = props;
+  const [activeId, setActiveId] = (0, import_react23.useState)(null);
+  const numberOfItems = import_react23.Children.count(children);
+  const {
+    buttonProps,
+    itemProps,
+    isOpen: open,
+    setIsOpen
+  } = (0, import_react_accessible_dropdown_menu_hook.default)(numberOfItems);
+  const classes = (0, import_dedupe25.default)(
+    "mobius",
+    "mobius-dropdown-menu",
+    otherProps.className
+  );
+  const triggerClasses = (0, import_dedupe25.default)("mobius", "mobius-dropdown-menu__trigger");
+  const listClasses = (0, import_dedupe25.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_runtime30.jsxs)(Element, { ref, ...otherProps, className: classes, children: [
+    trigger ? (0, import_react23.cloneElement)(trigger, {
+      className: triggerClasses,
+      open,
+      label,
+      ...buttonProps
+    }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Button, { className: triggerClasses, ...buttonProps, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("ul", { className: listClasses, role: "menu", children: import_react23.Children.map(children, (child, index) => {
+      if ((0, import_react23.isValidElement)(child)) {
+        return (0, import_react23.cloneElement)(child, {
+          onClick: () => handleChildClick(child.props, index),
+          active: index === activeId,
+          ...itemProps[index]
+        });
+      }
+      return child;
+    }) })
+  ] });
+};
+DropdownMenu.displayName = "DropdownMenu";
+
+// src/components/DropdownMenu/Item.tsx
+var import_react24 = require("react");
+var import_dedupe26 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var Item = ({ ref, ...props }) => {
+  const {
+    elementType: Element = "li",
+    active,
+    onClick,
+    children,
+    ...otherProps
+  } = props;
+  const classes = (0, import_dedupe26.default)(
+    "mobius",
+    "mobius-dropdown-menu__item",
+    { "--is-active": active },
+    otherProps.className
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Element, { ref, onClick, ...otherProps, children: import_react24.Children.map(children, (child) => {
+    if ((0, import_react24.isValidElement)(child)) {
+      const childClasses = (0, import_dedupe26.default)(
+        child.props.className,
+        classes
+      );
+      return (0, import_react24.cloneElement)(
+        child,
+        {
+          className: childClasses
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime31.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_dedupe27 = __toESM(require("classnames/dedupe"));
+var import_react25 = require("react");
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var useFieldset = (props) => {
+  const { legend } = props;
+  let legendProps = {};
+  let containerProps = {
+    role: "group"
+  };
+  const legendId = (0, import_react25.useId)();
+  if (legend) {
+    legendProps = {
+      ...legendProps,
+      id: legendId
+    };
+    containerProps = {
+      ...containerProps,
+      "aria-labelledby": legendId
+    };
+  }
+  return {
+    legendProps,
+    containerProps
+  };
+};
+var Fieldset = ({ ref: _ref, ...props }) => {
+  const {
+    children,
+    legend,
+    legendComponent = /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("legend", {}),
+    ...otherProps
+  } = props;
+  const { legendProps, containerProps } = useFieldset(props);
+  const classes = (0, import_dedupe27.default)("mobius", "mobius-fieldset", props.className);
+  legendProps.className = "mobius-fieldset__legend";
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Flex, { ...containerProps, ...otherProps, className: classes, children: [
+    legend && (0, import_react25.cloneElement)(legendComponent, { ...legendProps }, [legend]),
+    children
+  ] });
+};
+Fieldset.displayName = "Fieldset";
+
+// src/components/Grid/Grid.tsx
+var import_dedupe28 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var Grid = ({ ref: _ref, ...props }) => {
+  const {
+    columns = 12,
+    gap,
+    columnGap,
+    rowGap,
+    alignContent,
+    alignItems,
+    justifyContent,
+    justifyItems,
+    className,
+    style,
+    ...rest
+  } = props;
+  const classes = (0, import_dedupe28.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 /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: styles, className: classes, ...rest });
+};
+Grid.displayName = "Grid";
+
+// src/components/Grid/Item.tsx
+var import_react26 = require("react");
+var import_dedupe29 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime34 = 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 = ({ ref: _ref, ...props }) => {
+  const {
+    breakpoint: { size: breakpointSize }
+  } = useBreakpoint();
+  const {
+    span,
+    xs = Array.isArray(span) ? DEFAULT_SPAN : span,
+    sm,
+    md,
+    lg,
+    xl,
+    xxl,
+    alignSelf,
+    justifySelf,
+    className,
+    ...rest
+  } = props;
+  const breakpointMap = getBreakpointMap({
+    xs,
+    sm,
+    md,
+    lg,
+    xl,
+    xxl
+  });
+  const [responsiveSpan, setResponsiveSpan] = (0, import_react26.useState)();
+  const classes = (0, import_dedupe29.default)("mobius-grid__item", className);
+  (0, import_react26.useEffect)(() => {
+    setResponsiveSpan(breakpointMap[breakpointSize]);
+  }, [breakpointSize, breakpointMap]);
+  const styles = {
+    gridColumn: responsiveSpan ? `span ${responsiveSpan}` : void 0,
+    alignSelf,
+    justifySelf
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime34.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_dedupe30 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var Image = ({
+  ref,
+  alt,
+  elementType: Component = "img",
+  ...otherProps
+}) => {
+  const classes = (0, import_dedupe30.default)("mobius", "mobius-image", otherProps.className);
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Component, { alt, ref, ...otherProps, className: classes });
+};
+Image.displayName = "Image";
+
+// src/components/Link/Link.tsx
+var import_dedupe31 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var Link = ({ ref, ...props }) => {
+  const {
+    isDisabled = false,
+    elementType: Component = "a",
+    style,
+    className,
+    variant = "primary",
+    ...otherProps
+  } = props;
+  const disabledStyles = {
+    pointerEvents: "none"
+  };
+  const styles = { ...style, ...isDisabled && disabledStyles };
+  const classes = (0, import_dedupe31.default)(
+    "mobius",
+    "mobius-link",
+    className,
+    `mobius-link--${variant}`,
+    {
+      "--is-disabled": isDisabled
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    Component,
+    {
+      ref,
+      style: styles,
+      className: classes,
+      "aria-disabled": isDisabled ? true : void 0,
+      ...otherProps,
+      children: props.children
+    }
+  );
+};
+Link.displayName = "Link";
+
+// src/components/LinkButton/LinkButton.tsx
+var import_dedupe32 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime37 = 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_dedupe32.default)("mobius", "mobius-link-button", className);
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Button, { elementType, href, className: classes, ...rest, children });
+}
+
+// src/components/List/List.tsx
+var import_react27 = require("react");
+var import_dedupe33 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var List = ({ ref, ...props }) => {
+  const Component = props.isOrdered ? "ol" : "ul";
+  const { children, icon, ...otherProps } = props;
+  const { isOrdered, liststyletype, isReversed, ...restProps } = otherProps;
+  const mappedProps = {
+    ...restProps,
+    reversed: isReversed
+  };
+  const classes = (0, import_dedupe33.default)(
+    "mobius",
+    "mobius-list",
+    {
+      "--has-icon": icon,
+      [`--is-${liststyletype}`]: liststyletype
+    },
+    otherProps.className
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Component, { ref, ...mappedProps, className: classes, children: import_react27.Children.map(children, (child) => {
+    if ((0, import_react27.isValidElement)(child)) {
+      return (0, import_react27.cloneElement)(child, {
+        parentIcon: icon
+      });
+    }
+    return child;
+  }) });
+};
+List.displayName = "List";
+
+// src/components/List/ListItem.tsx
+var import_dedupe34 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var ListItem = ({ ref, ...props }) => {
+  const { parentIcon, icon, children, ...otherProps } = props;
+  const iconContent = icon || parentIcon;
+  const classes = (0, import_dedupe34.default)(
+    "mobius",
+    "mobius-list__item",
+    {
+      "--has-icon": iconContent
+    },
+    props.className
+  );
+  const contentClasses = (0, import_dedupe34.default)("mobius", "mobius-list__item-content");
+  const iconClasses = (0, import_dedupe34.default)("mobius", "mobius-list__icon");
+  if (iconContent) {
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("li", { ref, ...otherProps, className: classes, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: contentClasses, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: iconClasses, children: iconContent }),
+      children
+    ] }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("li", { ref, ...otherProps, className: classes, children });
+};
+ListItem.displayName = "ListItem";
+
+// src/components/LoadingIndicator/LoadingIndicator.tsx
+var import_dedupe35 = __toESM(require("classnames/dedupe"));
+var import_icons9 = require("@simplybusiness/icons");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var LoadingIndicator = ({ ref, ...props }) => {
+  const { icon = import_icons9.loading, ...otherProps } = props;
+  const classes = (0, import_dedupe35.default)(
+    "mobius",
+    "mobius-loading-indicator",
+    otherProps.className
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Icon, { icon, spin: true, ref, ...otherProps, className: classes });
+};
+LoadingIndicator.displayName = "LoadingIndicator";
+
+// src/components/Logo/Logo.tsx
+var import_dedupe36 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var Logo = ({ ref, ...props }) => {
+  const { className, width, height, ...otherProps } = props;
+  const classes = (0, import_dedupe36.default)("mobius", "mobius-logo", className);
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+    "svg",
+    {
+      width,
+      height,
+      ref,
+      className: classes,
+      viewBox: "0 0 144 37",
+      ...otherProps,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+          "linearGradient",
+          {
+            id: "logo-gradient",
+            x1: "83.508%",
+            x2: "11.891%",
+            y1: "76.042%",
+            y2: "26.973%",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("stop", { stopColor: "#4632D8", offset: "0%" }),
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("stop", { stopColor: "#9084E8", offset: "100%" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("g", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.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_runtime41.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_runtime41.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_jsx_runtime42 = require("react/jsx-runtime");
+var Content2 = ({ ref, children, ...otherProps }) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { ref, ...otherProps, className: "mobius-modal__content", children });
+Content2.displayName = "Content";
+
+// src/components/Modal/Header.tsx
+var import_icons10 = require("@simplybusiness/icons");
+
+// src/components/Modal/useModal.ts
+var import_react29 = require("react");
+
+// src/components/Modal/ModalContext.tsx
+var import_react28 = require("react");
+var ModalContext = (0, import_react28.createContext)({
+  onClose: () => {
+  },
+  closeLabel: void 0
+});
+
+// src/components/Modal/useModal.ts
+var useModal = () => {
+  const { onClose, closeLabel } = (0, import_react29.useContext)(ModalContext);
+  return { onClose, closeLabel };
+};
+
+// src/components/Modal/Header.tsx
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var Header2 = ({ ref, children, ...otherProps }) => {
+  const { onClose, closeLabel } = useModal();
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("header", { ref, ...otherProps, className: "mobius-modal__header", children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+      Button,
+      {
+        "aria-label": "Close",
+        variant: "basic",
+        onPress: onClose,
+        className: "mobius-modal__close",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Icon, { icon: import_icons10.cross }),
+          " ",
+          closeLabel
+        ]
+      }
+    )
+  ] });
+};
+Header2.displayName = "Header";
+
+// src/components/Modal/Modal.tsx
+var import_dedupe37 = __toESM(require("classnames/dedupe"));
+var import_react30 = require("react");
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var TRANSITION_CSS_VARIABLE2 = "--modal-transition-duration";
+var Modal = ({ ref, ...props }) => {
+  const {
+    isOpen,
+    onClose,
+    onOpen,
+    children,
+    className,
+    closeLabel,
+    isFullScreen,
+    animation,
+    ...rest
+  } = props;
+  const [shouldTransition, setShouldTransition] = (0, import_react30.useState)(false);
+  (0, import_react30.useEffect)(() => {
+    setShouldTransition(supportsDialog());
+  }, []);
+  const dialogRef = (0, import_react30.useRef)(null);
+  const { close } = useDialog({
+    ref: dialogRef,
+    isOpen,
+    onOpen,
+    onClose,
+    transition: {
+      isEnabled: !!animation,
+      CSSVariable: TRANSITION_CSS_VARIABLE2
+    }
+  });
+  const modalClasses = (0, import_dedupe37.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_react30.useMemo)(
+    () => ({
+      onClose: close,
+      closeLabel
+    }),
+    [close, closeLabel]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    "dialog",
+    {
+      ref: mergeRefs([dialogRef, ref]),
+      onCancel: close,
+      className: modalClasses,
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime44.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_dedupe38 = __toESM(require("classnames/dedupe"));
+var import_react31 = require("react");
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var NumberField = ({ ref, ...props }) => {
+  const {
+    minValue,
+    maxValue,
+    step,
+    defaultValue,
+    hideSpinButtons,
+    className,
+    ...otherProps
+  } = props;
+  const {
+    onFocus: customOnFocus,
+    onBlur: customOnBlur,
+    ...rest
+  } = otherProps;
+  const focusedInputRef = (0, import_react31.useRef)(null);
+  const wheelHandler = (0, import_react31.useCallback)((ev) => ev.preventDefault(), []);
+  (0, import_react31.useEffect)(() => {
+    return () => {
+      focusedInputRef.current?.removeEventListener("wheel", wheelHandler);
+      focusedInputRef.current = null;
+    };
+  }, [wheelHandler]);
+  const containerClasses = (0, import_dedupe38.default)("mobius-number-field", className, {
+    "--hide-spin-buttons": hideSpinButtons
+  });
+  const handleBeforeInput = (event) => {
+    const { data } = event.nativeEvent;
+    if (step && Number.isInteger(step) && data === ".") {
+      event.preventDefault();
+    }
+    if (minValue && minValue >= 0 && data === "-") {
+      event.preventDefault();
+    }
+  };
+  const handleBlur = (event) => {
+    const { value } = event.target;
+    const numValue = parseFloat(value);
+    if (step && step > 1 && !isNaN(numValue)) {
+      const baseValue = minValue ?? 0;
+      const steps = Math.round((numValue - baseValue) / step);
+      const snappedValue = baseValue + steps * step;
+      if (snappedValue !== numValue) {
+        event.target.value = snappedValue.toString();
+        const changeEvent = new Event("change", { bubbles: true });
+        event.target.dispatchEvent(changeEvent);
+        const syntheticChangeEvent = {
+          ...event,
+          target: event.target,
+          currentTarget: event.currentTarget
+        };
+        otherProps.onChange?.(syntheticChangeEvent);
+      }
+    }
+    customOnBlur?.(event);
+  };
+  const forwardedProps = {
+    ...rest,
+    onFocus: (e) => {
+      const el = e.currentTarget;
+      focusedInputRef.current?.removeEventListener("wheel", wheelHandler);
+      focusedInputRef.current = el;
+      el.addEventListener("wheel", wheelHandler, { passive: false });
+      customOnFocus?.(e);
+    },
+    onBlur: (e) => handleBlur(e)
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    TextField,
+    {
+      ...forwardedProps,
+      className: containerClasses,
+      onBeforeInput: handleBeforeInput,
+      type: "number",
+      min: minValue ?? void 0,
+      max: maxValue ?? void 0,
+      step,
+      ref,
+      defaultValue: defaultValue != null ? defaultValue?.toString() : defaultValue
+    }
+  );
+};
+NumberField.displayName = "NumberField";
+
+// src/components/Option/Option.tsx
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var Option2 = ({ ref, ...props }) => {
+  const { isDisabled, ...rest } = props;
+  const mappedProps = {
+    ...rest,
+    disabled: isDisabled
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("option", { ...mappedProps, ref });
+};
+Option2.displayName = "Option";
+
+// src/components/PasswordField/PasswordField.tsx
+var import_dedupe39 = __toESM(require("classnames/dedupe"));
+var import_react32 = require("react");
+
+// src/components/PasswordField/ShowHideButton.tsx
+var import_icons11 = require("@simplybusiness/icons");
+var import_jsx_runtime47 = require("react/jsx-runtime");
+var ShowHideButton = ({
+  show = false,
+  onClick
+}) => /* @__PURE__ */ (0, import_jsx_runtime47.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: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Icon, { icon: show ? import_icons11.eyeSlash : import_icons11.eye, "aria-hidden": "true" })
+  }
+);
+
+// src/components/PasswordField/PasswordField.tsx
+var import_jsx_runtime48 = require("react/jsx-runtime");
+var PasswordField = ({
+  ref,
+  className,
+  ...props
+}) => {
+  const [show, setShow] = (0, import_react32.useState)(false);
+  const type = show ? "text" : "password";
+  const classes = (0, import_dedupe39.default)("mobius-password-field", className);
+  const localRef = (0, import_react32.useRef)(null);
+  const handleShowHideButtonClick = () => {
+    const selectionStart = localRef.current?.selectionStart;
+    const selectionEnd = localRef.current?.selectionEnd;
+    setShow((oldShow) => !oldShow);
+    requestAnimationFrame(() => {
+      localRef.current?.focus();
+      if (selectionStart != null && selectionEnd != null) {
+        localRef.current?.setSelectionRange(selectionStart, selectionEnd);
+      }
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    TextField,
+    {
+      ref: mergeRefs([localRef, ref]),
+      className: classes,
+      ...props,
+      type,
+      suffixInside: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ShowHideButton, { onClick: handleShowHideButtonClick, show })
+    }
+  );
+};
+PasswordField.displayName = "PasswordField";
+
+// src/components/Popover/Popover.tsx
+var import_react33 = require("@floating-ui/react");
+var import_icons12 = require("@simplybusiness/icons");
+var import_dedupe40 = __toESM(require("classnames/dedupe"));
+var import_react34 = require("react");
+var import_mobius_hooks6 = require("@simplybusiness/mobius-hooks");
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var OFFSET_FROM_CONTENT_DEFAULT = 10;
+var Popover = (props) => {
+  const { trigger, children, onOpen, onClose, className } = props;
+  const arrowRef = (0, import_react34.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react34.useState)(false);
+  const { refs, floatingStyles, context } = (0, import_react33.useFloating)({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    whileElementsMounted: import_react33.autoUpdate,
+    middleware: [
+      (0, import_react33.arrow)({
+        element: arrowRef
+      }),
+      (0, import_react33.offset)(OFFSET_FROM_CONTENT_DEFAULT),
+      (0, import_react33.shift)(),
+      (0, import_react33.flip)()
+    ]
+  });
+  const dismiss = (0, import_react33.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_react33.useInteractions)([dismiss]);
+  const containerClasses = (0, import_dedupe40.default)(
+    "mobius",
+    "mobius-popover__container",
+    className
+  );
+  const toggleVisibility = () => {
+    if (isOpen) {
+      setIsOpen(false);
+      onClose?.();
+      return;
+    }
+    setIsOpen(true);
+    onOpen?.();
+  };
+  const triggerComponent = (0, import_react34.cloneElement)(trigger, {
+    ref: refs.setReference,
+    className: (0, import_dedupe40.default)(
+      trigger.props.className,
+      "mobius-popover__toggle"
+    ),
+    onClick: toggleVisibility,
+    ...getReferenceProps()
+  });
+  (0, import_mobius_hooks6.useWindowEvent)("keydown", (e) => {
+    if (e.key === "Escape") {
+      onClose?.();
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
+    triggerComponent,
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+      "div",
+      {
+        className: containerClasses,
+        ref: refs.setFloating,
+        style: floatingStyles,
+        ...getFloatingProps(),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "mobius-popover", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("header", { className: "mobius-popover__header", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+              Button,
+              {
+                type: "button",
+                className: "mobius-popover__close-button",
+                onClick: toggleVisibility,
+                "aria-label": "Close",
+                variant: "ghost",
+                children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                  Icon,
+                  {
+                    icon: import_icons12.cross,
+                    size: "md",
+                    className: "mobius-popover__close-icon"
+                  }
+                )
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "mobius-popover__body", children })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+            import_react33.FloatingArrow,
+            {
+              ref: arrowRef,
+              context,
+              width: 20,
+              className: "mobius-popover__arrow-icon"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+
+// src/components/Progress/Progress.tsx
+var import_dedupe41 = __toESM(require("classnames/dedupe"));
+var import_react35 = require("react");
+var import_jsx_runtime50 = 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) => {
+  if (value === void 0 || Number.isNaN(value)) {
+    return defaultValue;
+  }
+  return value;
+};
+var getLabelComponent = (label, progressLabelId, showLabel) => {
+  if (showLabel) {
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      Label,
+      {
+        id: progressLabelId,
+        className: "mobius-progress__label",
+        elementType: "span",
+        children: label
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime50.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 = ({ ref, ...props }) => {
+  const progressId = (0, import_react35.useId)();
+  const progressLabelId = (0, import_react35.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_dedupe41.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_runtime50.jsxs)(
+    "div",
+    {
+      id: id || progressId,
+      ...progressBarProps,
+      ref,
+      className: classes,
+      role: "progressbar",
+      "aria-labelledby": progressLabelId,
+      children: [
+        labelComponent,
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "mobius-progress__track", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "mobius-progress__bar", style: { width: barWidth } }) }),
+        showValueLabel && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Label, { "data-testid": "value-label", elementType: "span", children: progressBarProps["aria-valuetext"] })
+      ]
+    }
+  );
+};
+Progress.displayName = "Progress";
+
+// src/components/Radio/Radio.tsx
+var import_dedupe42 = __toESM(require("classnames/dedupe"));
+var import_react36 = require("react");
+var import_jsx_runtime51 = require("react/jsx-runtime");
+var Radio = ({ ref, ...props }) => {
+  const {
+    children,
+    value,
+    label,
+    className,
+    isDisabled,
+    errorMessage,
+    onChange,
+    defaultChecked,
+    groupDisabled,
+    name,
+    selected,
+    setSelected,
+    isRequired,
+    onOverflow,
+    orientation,
+    ...otherProps
+  } = props;
+  const realDisabled = groupDisabled || isDisabled;
+  const isMultiline = label && children;
+  const isControlled = selected !== void 0;
+  const isChecked = isControlled ? selected === value : defaultChecked;
+  const contentRef = (0, import_react36.useRef)(null);
+  const prevOverflowRef = (0, import_react36.useRef)({
+    vertical: false,
+    horizontal: false
+  });
+  const hasIconFirst = (0, import_react36.useMemo)(() => {
+    if (!children || import_react36.Children.count(children) === 0) return false;
+    const firstChild = import_react36.Children.toArray(children)[0];
+    if (!(0, import_react36.isValidElement)(firstChild)) return false;
+    const props2 = firstChild.props;
+    return "icon" in props2 && props2.icon !== void 0;
+  }, [children]);
+  (0, import_react36.useLayoutEffect)(() => {
+    if (!contentRef.current || !onOverflow) return;
+    if (orientation === "vertical") {
+      return;
+    }
+    const element = contentRef.current;
+    const scrollOverflowVertical = element.scrollHeight > element.clientHeight;
+    const scrollOverflowHorizontal = element.scrollWidth > element.clientWidth;
+    const styles = window.getComputedStyle(element);
+    const lineHeight = parseFloat(styles.lineHeight);
+    const fontSize = parseFloat(styles.fontSize);
+    const singleLineHeight = isNaN(lineHeight) ? fontSize * 1.2 : lineHeight;
+    const WRAP_DETECTION_TOLERANCE = 1.1;
+    const hasWrapped = element.clientHeight > singleLineHeight * WRAP_DETECTION_TOLERANCE;
+    const vertical = scrollOverflowVertical || hasWrapped;
+    const horizontal = scrollOverflowHorizontal;
+    const newOverflowState = { vertical, horizontal };
+    const prevOverflow = prevOverflowRef.current;
+    if (newOverflowState.vertical !== prevOverflow.vertical || newOverflowState.horizontal !== prevOverflow.horizontal) {
+      prevOverflowRef.current = newOverflowState;
+      onOverflow(newOverflowState);
+    }
+  }, [label, children, onOverflow, orientation]);
+  const radioClasses = {
+    "--is-disabled": realDisabled,
+    "--is-selected": selected === value,
+    "--is-multiline": !!isMultiline,
+    "--is-required": isRequired
+  };
+  const containerClasses = (0, import_dedupe42.default)(
+    "mobius-radio__label",
+    radioClasses,
+    className,
+    { "--has-icon-first": hasIconFirst }
+  );
+  const inputClasses = (0, import_dedupe42.default)("mobius-radio__input", radioClasses);
+  const { "aria-describedby": _ariaDescribedBy, ...rest } = otherProps;
+  const handleChange = (event) => {
+    if (setSelected) {
+      setSelected(event.target.value);
+    }
+    if (onChange) {
+      const adaptedEvent = {
+        ...event.nativeEvent,
+        target: event.target
+      };
+      onChange(adaptedEvent);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Label, { className: containerClasses, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        "input",
+        {
+          "aria-describedby": otherProps["aria-describedby"],
+          disabled: realDisabled,
+          ref,
+          className: inputClasses,
+          value,
+          tabIndex: 0,
+          type: "radio",
+          onChange: handleChange,
+          ...isControlled ? { checked: isChecked } : { defaultChecked: isChecked },
+          name,
+          required: isRequired,
+          ...rest
+        }
+      ),
+      isMultiline ? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { ref: contentRef, className: "mobius-radio__content--multiline", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "mobius-radio__content-first-line", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "mobius-radio__extra-content", children })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { ref: contentRef, className: "mobius-radio__content", children: label || children })
+    ] }),
+    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ErrorMessage, { errorMessage })
+  ] });
+};
+Radio.displayName = "Radio";
+
+// src/components/Radio/RadioGroup.tsx
+var import_dedupe43 = __toESM(require("classnames/dedupe"));
+var import_react37 = require("react");
+var import_jsx_runtime52 = 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 = ({ ref, ...props }) => {
+  const {
+    label,
+    isDisabled = false,
+    isRequired,
+    isInvalid,
+    orientation = "vertical",
+    className,
+    errorMessage,
+    children,
+    defaultValue,
+    value,
+    isReadOnly,
+    name,
+    onChange,
+    autoStack = false,
+    ...rest
+  } = props;
+  const defaultSelected = getDefaultVal(children, value || defaultValue);
+  const [selected, setSelected] = (0, import_react37.useState)(defaultSelected);
+  const overflowsRef = (0, import_react37.useRef)({});
+  const [hasOverflow, setHasOverflow] = (0, import_react37.useState)(false);
+  (0, import_react37.useEffect)(() => {
+    if (value !== void 0) {
+      setSelected(value);
+    }
+  }, [value]);
+  const handleOverflow = (0, import_react37.useCallback)(
+    (radioValue, overflow) => {
+      overflowsRef.current = {
+        ...overflowsRef.current,
+        [radioValue]: overflow
+      };
+      const anyOverflow = Object.values(overflowsRef.current).some(
+        (o) => o.vertical || o.horizontal
+      );
+      if (anyOverflow !== hasOverflow) {
+        setHasOverflow(anyOverflow);
+      }
+    },
+    [hasOverflow]
+  );
+  const effectiveOrientation = autoStack && orientation === "horizontal" && hasOverflow ? "vertical" : orientation;
+  const validationClasses = useValidationClasses({ isInvalid });
+  const radioClasses = {
+    "--is-disabled": isDisabled,
+    "--is-required": typeof isRequired === "boolean" && isRequired,
+    "--is-optional": typeof isRequired === "boolean" && !isRequired,
+    [`--is-${effectiveOrientation}`]: true,
+    [className || ""]: true
+  };
+  const radioGroupClasses = (0, import_dedupe43.default)(
+    "mobius",
+    "mobius-radio-group",
+    radioClasses,
+    validationClasses
+  );
+  const radioWrapperClasses = (0, import_dedupe43.default)("mobius-radio__wrapper", {
+    [`--is-${effectiveOrientation}`]: true
+  });
+  const labelClasses = (0, import_dedupe43.default)(radioClasses, validationClasses);
+  const errorMessageId = (0, import_react37.useId)();
+  const defaultNameAttrId = (0, import_react37.useId)();
+  const nameAttribute = name || defaultNameAttrId;
+  const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
+  const describedBy = spaceDelimitedList([
+    shouldErrorMessageShow,
+    props["aria-describedby"]
+  ]);
+  const labelId = (0, import_react37.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime52.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": effectiveOrientation,
+      "aria-readonly": isReadOnly,
+      "aria-required": isRequired,
+      ref,
+      className: radioGroupClasses,
+      role: "radiogroup",
+      children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Stack, { gap: "xs", children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Label, { htmlFor: name, id: labelId, className: labelClasses, children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: radioWrapperClasses, children: import_react37.Children.map(children, (child) => {
+          if ((0, import_react37.isValidElement)(child)) {
+            const childValue = child.props.value;
+            return (0, import_react37.cloneElement)(
+              child,
+              {
+                orientation: effectiveOrientation,
+                groupDisabled: isDisabled,
+                name: nameAttribute,
+                selected: selected || defaultSelected,
+                // in case state does not update
+                setSelected,
+                isRequired,
+                "aria-describedby": describedBy,
+                onChange,
+                onOverflow: childValue ? (overflow) => handleOverflow(childValue, overflow) : void 0
+              }
+            );
+          }
+          return child;
+        }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ErrorMessage, { id: errorMessageId, errorMessage })
+      ] })
+    }
+  );
+};
+RadioGroup.displayName = "RadioGroup";
+
+// src/components/Segment/SegmentGroup.tsx
+var import_dedupe44 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime53 = require("react/jsx-runtime");
+var SegmentGroup = (props) => {
+  const { children, horizontal, gap, className, ...rest } = props;
+  const gapClass = gap ? `gap-${gap}` : "";
+  const classes = (0, import_dedupe44.default)(
+    "mobius",
+    "mobius-segment-group",
+    className,
+    { "--is-horizontal": horizontal },
+    gapClass
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: classes, ...rest, children });
+};
+SegmentGroup.displayName = "SegmentGroup";
+
+// src/components/Segment/Segment.tsx
+var import_dedupe45 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime54 = require("react/jsx-runtime");
+var Segment = (props) => {
+  const { heading, children, colour, inverted, className, ...rest } = props;
+  const classes = (0, import_dedupe45.default)(
+    "mobius",
+    "mobius-segment",
+    colour,
+    { inverted },
+    className
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: classes, ...rest, children: [
+    heading && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "mobius-segment__heading", children: heading }),
+    children
+  ] });
+};
+Segment.displayName = "Segment";
+
+// src/components/Select/Select.tsx
+var import_icons13 = require("@simplybusiness/icons");
+var import_dedupe46 = __toESM(require("classnames/dedupe"));
+var import_react38 = require("react");
+var import_jsx_runtime55 = require("react/jsx-runtime");
+var Select = ({ ref, ...props }) => {
+  const {
+    label,
+    onChange,
+    isInvalid,
+    errorMessage,
+    isDisabled = false,
+    isRequired,
+    ...otherProps
+  } = props;
+  const { labelProps, fieldProps } = useLabel({
+    label,
+    ...otherProps
+  });
+  const validationClasses = useValidationClasses({ isInvalid });
+  const stateClasses = {
+    "--is-disabled": isDisabled,
+    "--is-required": typeof isRequired === "boolean" && isRequired,
+    "--is-optional": typeof isRequired === "boolean" && !isRequired
+  };
+  const sharedClasses = (0, import_dedupe46.default)(validationClasses, stateClasses);
+  const wrapperClasses = (0, import_dedupe46.default)(
+    "mobius-select__wrapper",
+    sharedClasses,
+    otherProps.className
+  );
+  const selectClasses = (0, import_dedupe46.default)(
+    "mobius-select",
+    sharedClasses,
+    otherProps.className
+  );
+  const labelClasses = (0, import_dedupe46.default)(
+    "mobius-label",
+    sharedClasses,
+    otherProps.className
+  );
+  const iconClasses = (0, import_dedupe46.default)("mobius-select__icon", sharedClasses);
+  const errorMessageId = (0, import_react38.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_runtime55.jsxs)(Stack, { className: "mobius mobius-select__outer", gap: "xs", children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Label, { ...labelProps, className: labelClasses, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: wrapperClasses, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+        "select",
+        {
+          ...otherProps,
+          ...fieldProps,
+          ref,
+          multiple: false,
+          className: selectClasses,
+          disabled: isDisabled,
+          "aria-invalid": !!errorMessage,
+          "aria-describedby": describedBy,
+          "aria-required": isRequired,
+          required: isRequired,
+          onChange: handleChange
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: iconClasses, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Icon, { icon: import_icons13.chevronDown }) })
+    ] }),
+    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ErrorMessage, { id: errorMessageId, errorMessage })
+  ] });
+};
+Select.displayName = "Select";
+
+// src/components/Slider/Slider.tsx
+var import_dedupe47 = __toESM(require("classnames/dedupe"));
+var import_react40 = require("react");
+
+// src/components/Slider/helpers.ts
+var import_react39 = 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_runtime56 = 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_react40.useRef)(null);
+  const [currentValue, setCurrentValue] = (0, import_react40.useState)(
+    value || defaultValue || 0
+  );
+  const [isDragging, setIsDraggging] = (0, import_react40.useState)(false);
+  const { labelProps, fieldProps } = useLabel({
+    id,
+    label,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy
+  });
+  const formattedValue = numberFormatter(currentValue, formatOptions);
+  const classes = (0, import_dedupe47.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_runtime56.jsxs)("div", { className: classes, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "mobius-slider__label-wrapper", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Label, { ...labelProps, children: label }),
+      label && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("output", { style: { flex: "1 0 auto", textAlign: "end" }, children: formattedValue })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { ref: trackRef, className: "mobius-slider__track-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime56.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_runtime56.jsxs)("div", { className: "mobius-slider__labels", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "mobius-slider__min-label", "data-testid": "min-label", children: minLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "mobius-slider__max-label", "data-testid": "max-label", children: maxLabel })
+    ] })
+  ] });
+};
+
+// src/components/SVG/SVG.tsx
+var import_react41 = require("react");
+var import_dedupe48 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime57 = require("react/jsx-runtime");
+var SVG = ({ ref, ...props }) => {
+  const { children, className, ...otherProps } = props;
+  const classes = (0, import_dedupe48.default)("mobius", "mobius-svg", className);
+  const svgNode = import_react41.Children.only(children);
+  const { children: svgChildren, viewBox, xmlns } = svgNode.props;
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+    "svg",
+    {
+      viewBox,
+      xmlns,
+      ref,
+      ...otherProps,
+      className: classes,
+      children: svgChildren
+    }
+  );
+};
+SVG.displayName = "SVG";
+
+// src/components/Switch/Switch.tsx
+var import_react42 = require("react");
+var import_dedupe49 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime58 = require("react/jsx-runtime");
+var Switch = ({ ref, ...props }) => {
+  const {
+    checked = false,
+    className,
+    onChange,
+    isDisabled = false,
+    ...otherProps
+  } = props;
+  const [enabled, setEnabled] = (0, import_react42.useState)(checked);
+  (0, import_react42.useEffect)(() => {
+    setEnabled(checked);
+  }, [checked]);
+  const classes = (0, import_dedupe49.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_runtime58.jsxs)("label", { ref, className: classes, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { children: enabled ? "On" : "Off" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+      "input",
+      {
+        type: "checkbox",
+        role: "switch",
+        checked: enabled,
+        onChange: handleChange,
+        disabled: isDisabled,
+        ...otherProps
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "mobius-switch__slider" })
+  ] });
+};
+Switch.displayName = "Switch";
+
+// src/components/Table/Table.tsx
+var import_dedupe50 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime59 = require("react/jsx-runtime");
+var Table = ({ ref, ...props }) => {
+  const classes = (0, import_dedupe50.default)("mobius", "mobius-table", props.className);
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("table", { ref, ...props, className: classes });
+};
+Table.displayName = "Table";
+
+// src/components/Table/Head.tsx
+var import_dedupe51 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime60 = require("react/jsx-runtime");
+var Head = ({ ref, ...props }) => {
+  const classes = (0, import_dedupe51.default)("mobius", "mobius-table__head", props.className);
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("thead", { ref, ...props, className: classes });
+};
+Head.displayName = "Table.Head";
+
+// src/components/Table/Body.tsx
+var import_dedupe52 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime61 = require("react/jsx-runtime");
+var Body = ({ ref, ...props }) => {
+  const classes = (0, import_dedupe52.default)("mobius", "mobius-table__body", props.className);
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("tbody", { ref, ...props, className: classes });
+};
+Body.displayName = "Table.Body";
+
+// src/components/Table/Foot.tsx
+var import_dedupe53 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime62 = require("react/jsx-runtime");
+var Foot = ({ ref, ...props }) => {
+  const classes = (0, import_dedupe53.default)("mobius", "mobius-table__foot", props.className);
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("tfoot", { ref, ...props, className: classes });
+};
+Foot.displayName = "Table.Foot";
+
+// src/components/Table/Row.tsx
+var import_dedupe54 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime63 = require("react/jsx-runtime");
+var Row = ({ ref, ...props }) => {
+  const classes = (0, import_dedupe54.default)("mobius", "mobius-table__row", props.className);
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("tr", { ref, ...props, className: classes });
+};
+Row.displayName = "Table.Row";
+
+// src/components/Table/HeaderCell.tsx
+var import_dedupe55 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime64 = require("react/jsx-runtime");
+var HeaderCell = ({ ref, ...props }) => {
+  const classes = (0, import_dedupe55.default)(
+    "mobius",
+    "mobius-table__head-cell",
+    props.className
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("th", { ...props, ref, className: classes });
+};
+HeaderCell.displayName = "Table.HeaderCell";
+
+// src/components/Table/Cell.tsx
+var import_dedupe56 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime65 = require("react/jsx-runtime");
+var Cell = ({ ref, ...props }) => {
+  const classes = (0, import_dedupe56.default)(
+    "mobius",
+    "mobius-table__body-cell",
+    props.className
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime65.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/Text/Text.tsx
+var import_dedupe57 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime66 = require("react/jsx-runtime");
+var getElementType = (variant, elementType) => {
+  if (variant) {
+    return ["h1", "h2", "h3", "h4"].includes(variant) ? variant : "p";
+  }
+  return elementType || "p";
+};
+var Text = ({ ref, elementType: Component = "p", ...props }) => {
+  const { variant, className, spacing, ...otherProps } = props;
+  const elementType = getElementType(variant, Component);
+  const variantType = variant || elementType;
+  const classes = (0, import_dedupe57.default)(
+    "mobius",
+    "mobius-text",
+    { [`--is-${variantType}`]: variantType },
+    { [`--has-line-height-${spacing}`]: spacing },
+    className
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Component, { ref, ...otherProps, className: classes });
+};
+Text.displayName = "Text";
+
+// src/components/TextArea/TextArea.tsx
+var import_dedupe59 = __toESM(require("classnames/dedupe"));
+
+// src/components/TextAreaInput/TextAreaInput.tsx
+var import_dedupe58 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime67 = require("react/jsx-runtime");
+var TextAreaInput = ({ ref, ...props }) => {
+  const { isSelected, isDisabled, isReadOnly, isRequired, ...otherProps } = props;
+  const classes = (0, import_dedupe58.default)(
+    "mobius",
+    "mobius-text-area__input",
+    {
+      "--is-disabled": isDisabled,
+      "--is-selected": isSelected,
+      "--is-required": isRequired
+    },
+    otherProps.className
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+    "textarea",
+    {
+      ref,
+      ...otherProps,
+      required: isRequired,
+      readOnly: isReadOnly,
+      className: classes
+    }
+  );
+};
+TextAreaInput.displayName = "TextAreaInput";
+
+// src/components/TextArea/TextArea.tsx
+var import_jsx_runtime68 = require("react/jsx-runtime");
+var TextArea = ({ ref, ...props }) => {
+  const {
+    isDisabled,
+    className,
+    errorMessage,
+    label,
+    isInvalid,
+    ...otherProps
+  } = props;
+  const { inputProps, labelProps, errorMessageProps } = useTextField(props);
+  const classes = (0, import_dedupe59.default)("mobius", "mobius-text-area", className);
+  const validationClasses = useValidationClasses({ isInvalid });
+  const inputClasses = (0, import_dedupe59.default)("mobius-text-area__input", validationClasses);
+  const labelClasses = (0, import_dedupe59.default)(
+    {
+      "--is-disabled": isDisabled
+    },
+    validationClasses
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(Stack, { className: classes, gap: "xs", children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Label, { ...labelProps, className: labelClasses, children: props.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+      TextAreaInput,
+      {
+        ...otherProps,
+        ...inputProps,
+        ref,
+        className: inputClasses,
+        isDisabled,
+        "aria-invalid": errorMessage != null
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ErrorMessage, { ...errorMessageProps, errorMessage })
+  ] });
+};
+TextArea.displayName = "TextArea";
+
+// src/components/TextOrHTML/TextOrHTML.tsx
+var import_react43 = require("react");
+var import_jsx_runtime69 = require("react/jsx-runtime");
+var TextOrHTML = ({
+  ref,
+  text,
+  htmlClassName,
+  htmlElementType = "span",
+  textWrapper = false,
+  ...textProps
+}) => {
+  const DangerousComponent = htmlElementType;
+  const dangerousHTML = (0, import_react43.useMemo)(() => ({ __html: text }), [text]);
+  const dangerousElement = /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+    DangerousComponent,
+    {
+      className: htmlClassName,
+      dangerouslySetInnerHTML: dangerousHTML
+    }
+  );
+  if (textWrapper) {
+    return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Text, { ref, ...textProps, children: dangerousElement });
+  }
+  return dangerousElement;
+};
+TextOrHTML.displayName = "TextOrHTML";
+
+// src/components/Title/Title.tsx
+var import_dedupe60 = __toESM(require("classnames/dedupe"));
+var import_jsx_runtime70 = require("react/jsx-runtime");
+var Title = ({ ref, ...props }) => {
+  const {
+    elementType: Element = "div",
+    title,
+    description,
+    ...otherProps
+  } = props;
+  const classes = (0, import_dedupe60.default)("mobius", "mobius-title", otherProps.className);
+  const headerClasses = (0, import_dedupe60.default)("mobius", "mobius-title__header");
+  const contentClasses = (0, import_dedupe60.default)("mobius", "mobius-title__description");
+  const containerClasses = (0, import_dedupe60.default)("mobius", "mobius-title__container");
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Element, { ref, ...otherProps, className: classes, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(Flex, { flexDirection: "column", className: containerClasses, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("p", { className: headerClasses, children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("p", { className: contentClasses, children: description })
+  ] }) });
+};
+Title.displayName = "Title";
+
+// src/components/Toast/Toast.tsx
+var import_icons14 = require("@simplybusiness/icons");
+var import_dedupe61 = __toESM(require("classnames/dedupe"));
+var import_sonner = require("sonner");
+
+// src/components/Toast/state.ts
+var toastState = {
+  showCloseButton: true
+};
+
+// src/components/Toast/Toast.tsx
+var import_jsx_runtime71 = require("react/jsx-runtime");
+var variantIcons = {
+  info: import_icons14.circleInfo,
+  success: import_icons14.circleCheck,
+  warning: import_icons14.triangleExclamation,
+  error: import_icons14.circleExclamation
+};
+var variantColors = {
+  info: "var(--color-info)",
+  success: "var(--color-valid)",
+  warning: "var(--color-warning)",
+  error: "var(--color-error)"
+};
+var ToastIcon = ({ variant }) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "mobius-toast__icon", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Icon, { icon: variantIcons[variant], color: variantColors[variant] }) });
+var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "mobius-toast__close-icon", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Icon, { icon: import_icons14.cross }) });
+var ToastContent = ({
+  toastId,
+  variant,
+  title,
+  description,
+  action,
+  cancel,
+  showCloseButton = toastState.showCloseButton
+}) => /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: (0, import_dedupe61.default)("mobius", "mobius-toast", `--${variant}`), children: [
+  /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ToastIcon, { variant }),
+  /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "mobius-toast__body", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "mobius-toast__content", children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "mobius-toast__title", children: title }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "mobius-toast__description", children: description })
+    ] }),
+    (action || cancel) && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "mobius-toast__actions", children: [
+      cancel && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "mobius-toast__cancel",
+          onClick: () => {
+            cancel.onClick?.();
+            import_sonner.toast.dismiss(toastId);
+          },
+          children: cancel.label
+        }
+      ),
+      action && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "mobius-toast__action",
+          onClick: () => {
+            action.onClick();
+            import_sonner.toast.dismiss(toastId);
+          },
+          children: action.label
+        }
+      )
+    ] })
+  ] }),
+  showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+    "button",
+    {
+      type: "button",
+      className: "mobius-toast__close",
+      onClick: () => import_sonner.toast.dismiss(toastId),
+      "aria-label": "Close",
+      children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(CloseIcon, {})
+    }
+  )
+] });
+var createCustomToast = (message, variant, options) => import_sonner.toast.custom(
+  (id) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+    ToastContent,
+    {
+      toastId: id,
+      variant,
+      title: options?.title,
+      description: options?.description ?? message,
+      action: options?.action,
+      cancel: options?.cancel,
+      showCloseButton: options?.showCloseButton
+    }
+  ),
+  {
+    duration: options?.duration,
+    onDismiss: options?.onDismiss,
+    onAutoClose: options?.onAutoClose
+  }
+);
+var toast = {
+  /** Show an info toast */
+  info: (message, options) => createCustomToast(message, "info", options),
+  /** Show a success toast */
+  success: (message, options) => createCustomToast(message, "success", options),
+  /** Show a warning toast */
+  warning: (message, options) => createCustomToast(message, "warning", options),
+  /** Show an error toast */
+  error: (message, options) => createCustomToast(message, "error", options),
+  /** Dismiss a specific toast by ID or all toasts */
+  dismiss: (toastId) => import_sonner.toast.dismiss(toastId)
+};
+
+// src/components/Toast/Toaster.tsx
+var import_react44 = require("react");
+var import_sonner2 = require("sonner");
+var import_jsx_runtime72 = require("react/jsx-runtime");
+var Toaster = ({
+  position = "top-right",
+  closeButton = true,
+  expand = false,
+  duration = 4e3,
+  visibleToasts = 3,
+  gap = 8
+}) => {
+  (0, import_react44.useEffect)(() => {
+    toastState.showCloseButton = closeButton;
+  }, [closeButton]);
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+    import_sonner2.Toaster,
+    {
+      position,
+      closeButton: false,
+      expand,
+      duration,
+      visibleToasts,
+      gap
+    }
+  );
+};
+Toaster.displayName = "Toaster";
+
+// src/components/Trust/Trust.tsx
+var import_dedupe62 = __toESM(require("classnames/dedupe"));
+var import_react45 = require("react");
+
+// src/components/Trust/constants.ts
+var REQUIRED_TRUSTPILOT_CLASS_NAME = "trustpilot-widget";
+var SIMPLYBUSINESS_UNIT_ID = "5ca35a3da72b330001954cef";
+var SIMPLYBUSINESS_UNIT_IDS = {
+  "en-US": "5ca35a3da72b330001954cef",
+  // US business unit ID
+  "en-GB": "56b1db010000ff0005887125"
+  // UK business unit ID
+};
+var TRUSTPILOT_LINKS = {
+  "en-US": "https://www.trustpilot.com/review/simplybusiness.com",
+  "en-GB": "https://www.trustpilot.com/review/simplybusiness.co.uk"
+};
+var TRUSTPILOT_TEMPLATE_IDS = {
+  "micro-combo": "5419b6ffb0d04a076446a9af",
+  mini: "53aa8807dec7e10d38f59f32",
+  carousel: "53aa8912dec7e10d38f59f36",
+  horizontal: "5406e65db0d04a09e042d5fc",
+  "micro-star": "5419b732fbfb950b10de65e5"
+};
+var TRUSTPILOT_WIDGET = {
+  // Keys based on actual widget names
+  // https://support.trustpilot.com/hc/en-us/articles/360019826379-TrustBox-widget-overview
+  "micro-combo": {
+    templateId: TRUSTPILOT_TEMPLATE_IDS["micro-combo"],
+    className: "--is-variant-micro-combo",
+    styles: {
+      height: "25px"
+    }
+  },
+  mini: {
+    templateId: TRUSTPILOT_TEMPLATE_IDS["mini"],
+    className: "--is-variant-mini",
+    styles: {
+      width: "300px",
+      height: "150px"
+    }
+  },
+  carousel: {
+    templateId: TRUSTPILOT_TEMPLATE_IDS["carousel"],
+    className: "--is-variant-carousel",
+    styles: {
+      height: "150px"
+    }
+  },
+  horizontal: {
+    templateId: TRUSTPILOT_TEMPLATE_IDS["horizontal"],
+    className: "--is-variant-horizontal",
+    styles: {
+      height: "28px"
+    }
+  },
+  "micro-star": {
+    templateId: TRUSTPILOT_TEMPLATE_IDS["micro-star"],
+    className: "--is-variant-micro-star",
+    styles: {
+      height: "24px"
+    }
+  }
+};
+
+// src/components/Trust/Trust.tsx
+var import_jsx_runtime73 = require("react/jsx-runtime");
+var Trust = ({ ref, ...props }) => {
+  const {
+    elementType: Element = "div",
+    variant,
+    theme,
+    locale,
+    height,
+    width,
+    stars,
+    className
+  } = props;
+  const [isMounted, setIsMounted] = (0, import_react45.useState)(false);
+  const trustRef = (0, import_react45.useRef)(null);
+  const {
+    templateId,
+    className: variantClassName,
+    styles
+  } = TRUSTPILOT_WIDGET[variant];
+  const link = TRUSTPILOT_LINKS[locale];
+  const businessUnitId = SIMPLYBUSINESS_UNIT_IDS[locale] || SIMPLYBUSINESS_UNIT_ID;
+  const dataProps = {
+    "data-businessunit-id": businessUnitId,
+    "data-locale": locale,
+    "data-template-id": templateId,
+    "data-theme": theme,
+    "data-style-width": width || "100%",
+    "data-style-height": height,
+    "data-stars": stars
+  };
+  const classes = (0, import_dedupe62.default)(
+    "mobius",
+    "mobius-trust",
+    REQUIRED_TRUSTPILOT_CLASS_NAME,
+    {
+      [`--is-${theme}`]: theme,
+      [variantClassName]: variant
+    },
+    className
+  );
+  (0, import_react45.useEffect)(() => {
+    const hasTrustpilotLoaded = trustRef.current && window?.Trustpilot && window?.Trustpilot.loadFromElement;
+    if (isMounted && hasTrustpilotLoaded) {
+      window.Trustpilot.loadFromElement(trustRef.current, true);
+    }
+  }, [isMounted]);
+  (0, import_react45.useEffect)(() => {
+    setIsMounted(true);
+  }, []);
+  if (!isMounted) return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { style: styles });
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+    Element,
+    {
+      ref: mergeRefs([trustRef, ref]),
+      className: classes,
+      style: styles,
+      ...dataProps,
+      children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+        "a",
+        {
+          href: link,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "mobius-trust__link",
+          children: "Trustpilot"
+        }
+      )
+    }
+  );
+};
+
+// src/components/ExpandableText/ExpandableText.tsx
+var import_dedupe63 = __toESM(require("classnames/dedupe"));
+var import_react46 = require("react");
+var import_jsx_runtime74 = require("react/jsx-runtime");
+var ExpandableText = ({ ref, ...props }) => {
+  const {
+    text,
+    maxLines = 3,
+    breakpoint,
+    showText = "Read more",
+    hideText = "Read less",
+    className,
+    textProps = {},
+    accordionProps = {},
+    onToggle,
+    ...otherProps
+  } = props;
+  const [isExpanded, setIsExpanded] = (0, import_react46.useState)(false);
+  const [isCollapsed, setIsCollapsed] = (0, import_react46.useState)(false);
+  const textRef = (0, import_react46.useRef)(null);
+  const { down } = useBreakpoint();
+  const baseId = (0, import_react46.useId)();
+  const expandButtonId = `expandable-text-expand-${baseId}`;
+  const shouldCollapse = breakpoint ? down(breakpoint) : true;
+  (0, import_react46.useEffect)(() => {
+    if (!shouldCollapse || !textRef.current) {
+      setIsCollapsed(false);
+      return;
+    }
+    const element = textRef.current;
+    const isOverflowing = element.scrollHeight > element.clientHeight;
+    setIsCollapsed(isOverflowing);
+  }, [text, shouldCollapse, maxLines]);
+  if (breakpoint && !shouldCollapse) {
+    return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { ref, className, ...otherProps, children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(TextOrHTML, { text, textWrapper: true, ...textProps }) });
+  }
+  const handleAccordionChange = (expanded) => {
+    setIsExpanded(expanded);
+    onToggle?.(expanded);
+  };
+  const classes = (0, import_dedupe63.default)("mobius-expandable-text", className);
+  const textContainerClasses = (0, import_dedupe63.default)("mobius-expandable-text__content", {
+    "mobius-expandable-text__content--collapsed": !isExpanded
+  });
+  const textContainerStyle = {
+    "--line-clamp": maxLines
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
+    "div",
+    {
+      ref,
+      className: classes,
+      "data-testid": "expandable-text",
+      ...otherProps,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+          "div",
+          {
+            ref: textRef,
+            className: textContainerClasses,
+            style: textContainerStyle,
+            "data-testid": "expandable-text-content",
+            "aria-describedby": isCollapsed ? expandButtonId : void 0,
+            children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(TextOrHTML, { elementType: "span", textWrapper: true, text, ...textProps })
+          }
+        ),
+        isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+          Accordion,
+          {
+            showText,
+            hideText,
+            headerPosition: "bottom",
+            onChange: handleAccordionChange,
+            onClick: (e) => {
+              e?.stopPropagation();
+            },
+            id: expandButtonId,
+            ...accordionProps
+          }
+        )
+      ]
+    }
+  );
+};
+ExpandableText.displayName = "ExpandableText";
+
+// src/components/MaskedField/MaskedField.tsx
+var import_react47 = require("react");
+var import_react_imask = require("react-imask");
+var import_jsx_runtime75 = require("react/jsx-runtime");
+var useAcceptHandler = (onChange, useMaskedValue, name) => {
+  return (0, import_react47.useCallback)(
+    (maskedValue, maskInstance) => {
+      if (!onChange) {
+        return;
+      }
+      const formattedValue = maskedValue;
+      const rawValue = maskInstance.unmaskedValue;
+      const valueToEmit = useMaskedValue ? formattedValue : rawValue;
+      onChange({
+        target: { name, value: valueToEmit }
+      });
+    },
+    [onChange, useMaskedValue, name]
+  );
+};
+var useCombinedRef = (imaskRef, forwardedRef) => {
+  return (0, import_react47.useCallback)(
+    (element) => {
+      imaskRef.current = element;
+      if (typeof forwardedRef === "function") {
+        forwardedRef(element);
+      } else if (forwardedRef) {
+        forwardedRef.current = element;
+      }
+    },
+    [imaskRef, forwardedRef]
+  );
+};
+var useBlurHandler = (onBlur, maskRef, useMaskedValue, name) => {
+  return (0, import_react47.useCallback)(
+    (event) => {
+      if (!onBlur || !maskRef.current) {
+        return;
+      }
+      const formattedValue = maskRef.current.value;
+      const rawValue = maskRef.current.unmaskedValue;
+      const valueToEmit = useMaskedValue ? formattedValue : rawValue;
+      onBlur({
+        ...event,
+        target: { ...event.target, name, value: valueToEmit }
+      });
+    },
+    [onBlur, maskRef, useMaskedValue, name]
+  );
+};
+var ControlledMaskedField = ({
+  mask,
+  useMaskedValue = false,
+  value,
+  onChange,
+  onBlur,
+  name,
+  forwardedRef,
+  ...textFieldProps
+}) => {
+  const onAccept = useAcceptHandler(onChange, useMaskedValue, name);
+  const { ref: imaskRef, maskRef, setValue } = (0, import_react_imask.useIMask)(mask, { onAccept });
+  const combinedRef = useCombinedRef(imaskRef, forwardedRef);
+  const handleBlur = useBlurHandler(onBlur, maskRef, useMaskedValue, name);
+  (0, import_react47.useEffect)(() => {
+    if (!maskRef.current) {
+      return;
+    }
+    const stringValue = value.toString();
+    const currentMasked = maskRef.current.value;
+    const currentUnmasked = maskRef.current.unmaskedValue;
+    if (currentMasked !== stringValue && currentUnmasked !== stringValue) {
+      setValue(stringValue);
+    }
+  }, [value, maskRef, setValue, imaskRef]);
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+    TextField,
+    {
+      ...textFieldProps,
+      ref: combinedRef,
+      name,
+      onBlur: handleBlur
+    }
+  );
+};
+var UncontrolledMaskedField = ({
+  mask,
+  useMaskedValue = false,
+  defaultValue,
+  onChange,
+  onBlur,
+  name,
+  forwardedRef,
+  ...textFieldProps
+}) => {
+  const onAccept = useAcceptHandler(onChange, useMaskedValue, name);
+  const { ref: imaskRef, maskRef } = (0, import_react_imask.useIMask)(mask, { onAccept });
+  const combinedRef = useCombinedRef(imaskRef, forwardedRef);
+  const handleBlur = useBlurHandler(onBlur, maskRef, useMaskedValue, name);
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+    TextField,
+    {
+      ...textFieldProps,
+      ref: combinedRef,
+      name,
+      onBlur: handleBlur,
+      defaultValue: defaultValue?.toString()
+    }
+  );
+};
+var MaskedField = ({ ref: forwardedRef, ...props }) => {
+  const { value, defaultValue, ...rest } = props;
+  if ("value" in props) {
+    return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+      ControlledMaskedField,
+      {
+        ...rest,
+        value: value ?? "",
+        forwardedRef
+      }
+    );
+  } else {
+    return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+      UncontrolledMaskedField,
+      {
+        ...rest,
+        defaultValue,
+        forwardedRef
+      }
+    );
+  }
+};
+MaskedField.displayName = "MaskedField";
+//# sourceMappingURL=index.js.map