@simplybusiness/mobius 10.3.2 → 10.3.3

package/dist/esm/chunk-W2RQH4WS.js

@@ -1,1606 +0,0 @@
-import {
-  Accordion
-} from "./chunk-7JT4DKQA.js";
-import {
-  isLoqateErrorResponse
-} from "./chunk-66ARYOY7.js";
-import {
-  Listbox
-} from "./chunk-PQSPISME.js";
-import {
-  useComboboxHighlight
-} from "./chunk-XZUQV54A.js";
-import {
-  convertToDateFormat,
-  isValidDate
-} from "./chunk-CI5GCPUG.js";
-import {
-  useComboboxOptions
-} from "./chunk-GU5OMKTM.js";
-import {
-  getOptionLabel,
-  getOptionValue,
-  isOptionGroup
-} from "./chunk-2JLZNSLY.js";
-import {
-  Stack
-} from "./chunk-XH3OJQMW.js";
-import {
-  Label
-} from "./chunk-ZN7OWLZY.js";
-import {
-  adornmentWithClassName
-} from "./chunk-IM3I5CZL.js";
-import {
-  TextAreaInput
-} from "./chunk-BM4M36KU.js";
-import {
-  Icon
-} from "./chunk-TKIP5Q5H.js";
-import {
-  TextOrHTML
-} from "./chunk-DYTHXKMX.js";
-import {
-  VisuallyHidden
-} from "./chunk-PRZRE6A5.js";
-import {
-  useBreakpoint
-} from "./chunk-7FQ7SXK4.js";
-import {
-  useTextField
-} from "./chunk-UYVF3QSW.js";
-import {
-  useLabel
-} from "./chunk-YLEFK7S2.js";
-import {
-  useValidationClasses
-} from "./chunk-DYOFXXZD.js";
-import {
-  mergeRefs
-} from "./chunk-QGGILW3D.js";
-import {
-  spaceDelimitedList
-} from "./chunk-DTWRSP5P.js";
-
-// src/components/ErrorMessage/ErrorMessage.tsx
-import { error } from "@simplybusiness/icons";
-import classNames13 from "classnames/dedupe";
-
-// src/components/AddressLookup/AddressLookup.tsx
-import { search } from "@simplybusiness/icons";
-import { useCallback, useState as useState2 } from "react";
-
-// src/components/Combobox/Combobox.tsx
-import { useOnUnmount } from "@simplybusiness/mobius-hooks";
-import classNames2 from "classnames/dedupe";
-import { useEffect, useId, useRef, useState } from "react";
-
-// src/components/TextField/TextField.tsx
-import classNames from "classnames/dedupe";
-import "@simplybusiness/mobius/src/components/TextField/TextField.css";
-import { jsx, jsxs } from "react/jsx-runtime";
-var TextField = ({ ref, ...props }) => {
-  const {
-    isDisabled,
-    type = "text",
-    isInvalid,
-    className,
-    label,
-    errorMessage,
-    children,
-    isRequired,
-    prefixInside,
-    prefixOutside,
-    suffixInside,
-    suffixOutside,
-    autoComplete,
-    isReadOnly,
-    ...otherProps
-  } = props;
-  const resolvedAutoComplete = autoComplete ?? (type === "email" ? "email" : type === "tel" ? "tel" : void 0);
-  const { inputProps, labelProps, errorMessageProps } = useTextField({
-    ...props,
-    autoComplete: resolvedAutoComplete,
-    "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 = classNames(validationClasses, textfieldClasses);
-  const labelClasses = classNames(
-    {
-      "--is-disabled": isDisabled
-    },
-    validationClasses
-  );
-  const containerClasses = classNames(
-    "mobius",
-    "mobius-text-field",
-    sharedClasses
-  );
-  const inputClasses = classNames(
-    "mobius",
-    "mobius-text-field__input",
-    sharedClasses
-  );
-  const inputWrapperClasses = classNames(
-    "mobius-text-field__input-wrapper",
-    sharedClasses
-  );
-  return /* @__PURE__ */ jsxs(Stack, { gap: "xs", className: containerClasses, children: [
-    label && !hidden && /* @__PURE__ */ jsx(Label, { ...labelProps, className: labelClasses, children: label }),
-    /* @__PURE__ */ jsxs("div", { className: "mobius-text-field__inner-container", children: [
-      adornmentWithClassName(
-        prefixOutside,
-        labelClasses,
-        "mobius-text-field__prefix-outside"
-      ),
-      /* @__PURE__ */ jsxs("div", { className: inputWrapperClasses, children: [
-        adornmentWithClassName(
-          prefixInside,
-          labelClasses,
-          "mobius-text-field__prefix-inside"
-        ),
-        /* @__PURE__ */ 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__ */ jsx("div", { className: "mobius-text-field__children", children }),
-    /* @__PURE__ */ jsx(ErrorMessage, { ...errorMessageProps, errorMessage })
-  ] });
-};
-TextField.displayName = "TextField";
-
-// src/components/Combobox/Combobox.tsx
-import "@simplybusiness/mobius/src/components/Combobox/Combobox.css";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var ComboboxInner = ({
-  ref,
-  ...props
-}) => {
-  const {
-    id,
-    defaultValue,
-    value,
-    options,
-    asyncOptions,
-    delay,
-    minSearchLength,
-    onSelected,
-    className,
-    placeholder,
-    icon,
-    onBlur,
-    onFocus,
-    onChange,
-    // onSearched, // unused prop, consider removing
-    optionComponent,
-    optionTestIdPrefix,
-    errorMessage,
-    ...otherProps
-  } = props;
-  const skipNextDebounceRef = useRef(false);
-  const fallbackRef = useRef(null);
-  const [inputValue, setInputValue] = useState(defaultValue || "");
-  const [isOpen, setIsOpen] = useState(false);
-  const [isChanging, setIsChanging] = useState(false);
-  const { filteredOptions, updateFilteredOptions, isLoading, error: error2 } = useComboboxOptions({
-    options,
-    asyncOptions,
-    inputValue,
-    delay,
-    minSearchLength,
-    skipNextDebounceRef
-  });
-  const [validationError, setValidationError] = useState(
-    error2?.message || errorMessage
-  );
-  const {
-    highlightedIndex,
-    highlightedGroupIndex,
-    highlightNextOption,
-    highlightPreviousOption,
-    highlightFirstOption,
-    highlightLastOption,
-    clearHighlight
-  } = useComboboxHighlight(filteredOptions);
-  const inputRef = ref || fallbackRef;
-  const listboxId = useId();
-  const statusId = useId();
-  const blurTimeoutRef = useRef(null);
-  const userInteractedRef = useRef(false);
-  const justSelectedRef = useRef(false);
-  const { down } = useBreakpoint();
-  const isMobile = down("md");
-  useEffect(() => {
-    setValidationError(error2?.message || errorMessage);
-  }, [error2, errorMessage]);
-  const getEmptyValue = () => {
-    const firstOption = filteredOptions ? isOptionGroup(filteredOptions) ? filteredOptions[0]?.options[0] : filteredOptions[0] : options ? isOptionGroup(options) ? options[0]?.options[0] : options[0] : void 0;
-    if (typeof firstOption === "string") {
-      return "";
-    }
-    return { label: "", value: "" };
-  };
-  const handleFocus = (e) => {
-    onFocus?.(e);
-    if (!filteredOptions || filteredOptions.length === 0) return;
-    if (blurTimeoutRef.current) {
-      clearTimeout(blurTimeoutRef.current);
-      blurTimeoutRef.current = null;
-    }
-    const isNaturalFocus = userInteractedRef.current || e.relatedTarget !== null;
-    if (userInteractedRef.current) {
-      userInteractedRef.current = false;
-    }
-    if (justSelectedRef.current && !isNaturalFocus) {
-      return;
-    }
-    if (isNaturalFocus) {
-      setIsOpen(true);
-      justSelectedRef.current = false;
-    }
-  };
-  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]);
-  useOnUnmount(() => {
-    if (blurTimeoutRef.current) {
-      clearTimeout(blurTimeoutRef.current);
-    }
-  });
-  const handleInputChange = (e) => {
-    const newValue = e.target.value;
-    setInputValue(newValue);
-    setValidationError(void 0);
-    justSelectedRef.current = false;
-    setIsChanging(true);
-    if (!asyncOptions) {
-      setIsOpen(true);
-    }
-    clearHighlight();
-    onChange?.(e);
-  };
-  const handleOptionSelect = (option) => {
-    const val = getOptionValue(option);
-    if (!val && val !== "") return;
-    if (typeof option === "object" && "callback" in option && option.callback && typeof option.callback === "function") {
-      justSelectedRef.current = true;
-      setTimeout(() => {
-        if (inputRef && typeof inputRef !== "function" && inputRef.current) {
-          inputRef.current.focus();
-        }
-      }, 0);
-      const callbackPromise = option.callback();
-      updateFilteredOptions(callbackPromise);
-      callbackPromise.then(() => {
-        setIsOpen(true);
-        setIsChanging(true);
-      }).catch(() => {
-      });
-      return;
-    }
-    skipNextDebounceRef.current = true;
-    justSelectedRef.current = true;
-    setIsChanging(false);
-    setValidationError(void 0);
-    setIsOpen(false);
-    setInputValue(val);
-    onSelected?.(option);
-  };
-  const getFirstOption = () => {
-    if (!filteredOptions) return void 0;
-    if (isOptionGroup(filteredOptions)) {
-      return filteredOptions[0]?.options[0];
-    }
-    return filteredOptions[0];
-  };
-  const getHighlightedOption = () => {
-    if (!filteredOptions) return void 0;
-    if (highlightedIndex === -1) return void 0;
-    if (isOptionGroup(filteredOptions)) {
-      const group = filteredOptions[highlightedGroupIndex];
-      return group?.options[highlightedIndex];
-    }
-    return filteredOptions[highlightedIndex];
-  };
-  const getHighlightedOptionId = () => {
-    const option = getHighlightedOption();
-    if (!option) return void 0;
-    if (isOptionGroup(filteredOptions)) {
-      return `${listboxId}-option-${highlightedGroupIndex}-${highlightedIndex}`;
-    }
-    return `${listboxId}-option-${highlightedIndex}`;
-  };
-  const handleBlur = (e) => {
-    if (!justSelectedRef.current) {
-      const typedText = inputValue.trim();
-      const typedTextLower = typedText.toLowerCase();
-      const highlightedOption = getHighlightedOption();
-      const label = getOptionLabel(highlightedOption);
-      if (typedTextLower === label?.toLowerCase()) {
-        setTimeout(() => {
-          handleOptionSelect(highlightedOption);
-        }, 0);
-      } else if (typedText === "") {
-        setTimeout(() => {
-          handleOptionSelect(getEmptyValue());
-        }, 0);
-      } else {
-        setValidationError(
-          errorMessage || "Please select an option from the list"
-        );
-        setTimeout(() => {
-          setInputValue("");
-        }, 0);
-      }
-    }
-    blurTimeoutRef.current = setTimeout(() => {
-      onBlur?.(e);
-      setIsOpen(false);
-      setIsChanging(false);
-    }, 150);
-  };
-  const handleKeyDown = (e) => {
-    switch (e.key) {
-      case "ArrowDown":
-        e.preventDefault();
-        justSelectedRef.current = false;
-        setIsOpen(true);
-        highlightNextOption();
-        break;
-      case "ArrowUp":
-        e.preventDefault();
-        justSelectedRef.current = false;
-        setIsOpen(true);
-        highlightPreviousOption();
-        break;
-      case "Home":
-        e.preventDefault();
-        justSelectedRef.current = false;
-        setIsOpen(true);
-        highlightFirstOption();
-        break;
-      case "End":
-        e.preventDefault();
-        justSelectedRef.current = false;
-        setIsOpen(true);
-        highlightLastOption();
-        break;
-      case "Enter":
-        e.preventDefault();
-        if (isOpen) {
-          const selectedOption = getHighlightedOption() || getFirstOption();
-          if (selectedOption) {
-            handleOptionSelect(selectedOption);
-          }
-        }
-        break;
-      case "Escape":
-        e.preventDefault();
-        setInputValue("");
-        setIsOpen(false);
-        clearHighlight();
-        break;
-      default:
-    }
-  };
-  useEffect(() => {
-    if (value) {
-      setInputValue(value);
-    }
-  }, [value]);
-  useEffect(() => {
-    if (asyncOptions && isChanging) {
-      setIsOpen(!!filteredOptions && filteredOptions.length > 0);
-    }
-  }, [filteredOptions, asyncOptions, isChanging]);
-  const classes = classNames2(
-    "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__ */ jsxs2("div", { id, "data-testid": "mobius-combobox__wrapper", className: classes, children: [
-    /* @__PURE__ */ jsx2(
-      VisuallyHidden,
-      {
-        role: "status",
-        "aria-live": "polite",
-        id: statusId,
-        elementType: "div",
-        className: "mobius-combobox__status",
-        children: getStatusMessage()
-      }
-    ),
-    /* @__PURE__ */ jsx2(
-      TextField,
-      {
-        ...otherProps,
-        className: "mobius-combobox__input",
-        role: "combobox",
-        value: inputValue,
-        placeholder,
-        onFocus: handleFocus,
-        onBlur: handleBlur,
-        onKeyDown: handleKeyDown,
-        onChange: handleInputChange,
-        autoComplete: "off",
-        "aria-describedby": isLoading ? statusId : void 0,
-        "aria-autocomplete": "list",
-        "aria-haspopup": "listbox",
-        "aria-controls": isOpen ? listboxId : void 0,
-        "aria-expanded": isOpen,
-        "aria-activedescendant": highlightedIndex === -1 ? void 0 : getHighlightedOptionId(),
-        prefixInside: icon,
-        ref: inputRef,
-        errorMessage: errorMessage || validationError || error2?.message
-      }
-    ),
-    /* @__PURE__ */ jsx2(
-      Listbox,
-      {
-        id: listboxId,
-        isOpen,
-        isLoading,
-        options: filteredOptions,
-        highlightedIndex,
-        highlightedGroupIndex,
-        onOptionSelect: handleOptionSelect,
-        optionComponent,
-        optionTestIdPrefix
-      }
-    )
-  ] });
-};
-var Combobox = ComboboxInner;
-
-// src/components/AddressLookup/AddressLookup.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-function optionsFromResponse({ Items }, addressLookupService) {
-  if (!Items || !Array.isArray(Items)) {
-    throw Error("No address found");
-  }
-  if (isLoqateErrorResponse(Items)) {
-    throw Error(Items[0].Description);
-  }
-  return Items.map((item) => ({
-    id: item.Id,
-    label: `${item.Text}, ${item.Description}`,
-    value: item.Text,
-    // Add a callback to trigger secondary search
-    // if the address type is not "Address"
-    callback: item.Type === "Address" ? void 0 : async () => {
-      const result = await addressLookupService.findById(item.Id);
-      return optionsFromResponse(result, addressLookupService);
-    }
-  }));
-}
-var AddressLookup = ({
-  ref,
-  addressLookupService,
-  onAddressSelected,
-  onOptionsDisplayed,
-  onError,
-  errorMessage,
-  ...otherProps
-}) => {
-  const [error2, _setError] = useState2(null);
-  const setError = useCallback(
-    (newError) => {
-      if (newError != null) onError?.(newError);
-      _setError(newError);
-    },
-    [onError]
-  );
-  const asyncOptions = 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);
-    const isEmpty = typeof selected === "string" ? selected === "" : !selected.id && !selected.value;
-    if (isEmpty) {
-      return Promise.resolve();
-    }
-    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 = error2 && "An error occurred" || errorMessage;
-  return /* @__PURE__ */ jsx3(
-    Combobox,
-    {
-      ...otherProps,
-      ref,
-      onSelected: handleSelected,
-      asyncOptions,
-      errorMessage: realErrorMessage,
-      icon: /* @__PURE__ */ jsx3(Icon, { icon: search })
-    }
-  );
-};
-AddressLookup.displayName = "AddressLookup";
-
-// src/components/Checkbox/Checkbox.tsx
-import { useRef as useRef2, useId as useId2, useState as useState3, useEffect as useEffect2 } from "react";
-import classNames3 from "classnames/dedupe";
-import { squareTick, square } from "@simplybusiness/icons";
-import "@simplybusiness/mobius/src/components/Checkbox/Checkbox.css";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var Checkbox = ({ ref, ...props }) => {
-  const {
-    id,
-    label,
-    isDisabled,
-    isRequired,
-    isInvalid,
-    onChange,
-    className,
-    errorMessage,
-    selected,
-    defaultSelected = false,
-    isReadOnly,
-    isLastItem,
-    name,
-    value,
-    ["aria-describedby"]: ariaDescribedBy,
-    ...rest
-  } = props;
-  const [checked, setChecked] = useState3(defaultSelected);
-  const fallbackRef = useRef2(null);
-  const refObj = ref || fallbackRef;
-  const inputId = useId2();
-  const isControlled = typeof selected === "boolean";
-  useEffect2(() => {
-    if (isControlled) {
-      setChecked(selected);
-    }
-  }, [selected, isControlled]);
-  const validationClasses = useValidationClasses({ isInvalid });
-  const sharedClasses = classNames3(
-    {
-      "--is-disabled": isDisabled,
-      "--is-selected": checked,
-      "--is-required": typeof isRequired === "boolean" && isRequired,
-      "--is-optional": typeof isRequired === "boolean" && !isRequired
-    },
-    validationClasses
-  );
-  const wrapperClasses = classNames3(
-    "mobius",
-    "mobius-checkbox",
-    sharedClasses,
-    className
-  );
-  const labelClasses = classNames3("mobius-checkbox__label", sharedClasses);
-  const inputClasses = classNames3("mobius-checkbox__input", sharedClasses);
-  const iconClasses = classNames3("mobius-checkbox__icon", sharedClasses);
-  const errorMessageId = useId2();
-  const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
-  const describedBy = spaceDelimitedList([
-    shouldErrorMessageShow,
-    ariaDescribedBy
-  ]);
-  const labelId = useId2();
-  const handleChange = (event) => {
-    setChecked(!checked);
-    if (onChange) {
-      onChange(event, isLastItem);
-    }
-  };
-  return /* @__PURE__ */ jsxs3(Stack, { gap: "xs", className: wrapperClasses, children: [
-    /* @__PURE__ */ jsxs3("label", { className: labelClasses, children: [
-      /* @__PURE__ */ jsx4(
-        "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__ */ jsx4(
-        Icon,
-        {
-          icon: checked ? squareTick : square,
-          size: "md",
-          className: iconClasses
-        }
-      ),
-      /* @__PURE__ */ jsx4("span", { id: labelId, className: "mobius-checkbox__visible-label", children: label })
-    ] }),
-    /* @__PURE__ */ jsx4(ErrorMessage, { id: errorMessageId, errorMessage })
-  ] });
-};
-Checkbox.displayName = "Checkbox";
-
-// src/components/Checkbox/CheckboxGroup.tsx
-import classNames4 from "classnames/dedupe";
-import {
-  Children,
-  cloneElement,
-  isValidElement,
-  useEffect as useEffect3,
-  useId as useId3,
-  useRef as useRef3,
-  useState as useState4
-} from "react";
-import "@simplybusiness/mobius/src/components/Checkbox/CheckboxGroup.css";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-var CheckboxGroup = ({ ref, ...props }) => {
-  const {
-    label,
-    isDisabled = false,
-    isRequired,
-    isInvalid,
-    orientation = "vertical",
-    onChange,
-    className,
-    errorMessage,
-    children,
-    defaultValue = [],
-    isReadOnly,
-    itemsPerRow,
-    lastItemDisables = false,
-    ...rest
-  } = props;
-  const [selected, setSelected] = useState4(defaultValue);
-  const isInitializedRef = useRef3(false);
-  const prevDefaultValueRef = useRef3(defaultValue);
-  useEffect3(() => {
-    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 = classNames4(
-    "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 = classNames4(
-    {
-      "--is-disabled": isDisabled
-    },
-    validationClasses
-  );
-  const errorMessageId = useId3();
-  const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
-  const describedBy = spaceDelimitedList([
-    shouldErrorMessageShow,
-    props["aria-describedby"]
-  ]);
-  const labelId = useId3();
-  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 = Children.toArray(children);
-  const lastCheckbox = childrenArray.filter(
-    (child) => isValidElement(child) && child.type === Checkbox
-  ).pop();
-  const lastCheckboxIsChecked = lastCheckbox && selected.includes(lastCheckbox.props.value);
-  return /* @__PURE__ */ jsxs4(
-    "div",
-    {
-      ...rest,
-      "aria-labelledby": props["aria-labelledby"] || labelId,
-      ref,
-      className: checkboxGroupClasses,
-      role: "group",
-      style: {
-        "--checkbox-items-per-row": itemsPerRow || Children.count(children)
-      },
-      children: [
-        label && /* @__PURE__ */ jsx5(Label, { elementType: "span", id: labelId, className: labelClasses, children: label }),
-        /* @__PURE__ */ jsx5("div", { className: "mobius-checkbox-group__wrapper", children: childrenArray.map((child) => {
-          if (isValidElement(child)) {
-            const isLastItem = child === lastCheckbox;
-            const isChildDisabled = isDisabled || lastItemDisables && lastCheckboxIsChecked && !isLastItem;
-            const childProps = child.props;
-            return cloneElement(
-              child,
-              {
-                isDisabled: isChildDisabled,
-                isRequired,
-                isReadOnly,
-                isInvalid,
-                isLastItem,
-                selected: selected.includes(childProps.value),
-                onChange: childProps.onChange || handleChange,
-                "aria-describedby": describedBy
-              }
-            );
-          }
-          return child;
-        }) }),
-        errorMessage && /* @__PURE__ */ jsx5(ErrorMessage, { id: errorMessageId, errorMessage })
-      ]
-    }
-  );
-};
-CheckboxGroup.displayName = "CheckboxGroup";
-
-// src/components/DateField/DateField.tsx
-import classNames5 from "classnames/dedupe";
-import { useEffect as useEffect4, useRef as useRef4, useState as useState5 } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var MIN_MAX_ERROR = '"min" value should not be greater than "max" value.';
-var DateField = ({ ref, ...props }) => {
-  const {
-    min,
-    max,
-    format,
-    className,
-    errorMessage,
-    defaultValue,
-    value,
-    ...otherProps
-  } = props;
-  const [error2, setError] = useState5(errorMessage);
-  const [isInvalid, setIsInvalid] = useState5(void 0);
-  const localRef = useRef4(null);
-  const classes = classNames5("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 = (error3) => {
-    setError(error3);
-    setIsInvalid(true);
-  };
-  const setValidState = () => {
-    setError(props.errorMessage);
-    setIsInvalid(false);
-  };
-  useEffect4(() => {
-    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__ */ jsx6(
-    TextField,
-    {
-      ref: mergeRefs([localRef, ref]),
-      className: classes,
-      type: "date",
-      min: formattedMin,
-      max: formattedMax,
-      errorMessage: errorMessage ?? error2,
-      isInvalid,
-      defaultValue: formattedDefaultValue,
-      value: formattedValue,
-      onBlur: handleBlur,
-      ...otherProps
-    }
-  );
-};
-DateField.displayName = "DateField";
-
-// src/components/NumberField/NumberField.tsx
-import classNames6 from "classnames/dedupe";
-import { useCallback as useCallback2, useEffect as useEffect5, useRef as useRef5 } from "react";
-import "@simplybusiness/mobius/src/components/NumberField/NumberField.css";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var NumberField = ({ ref, ...props }) => {
-  const {
-    minValue,
-    maxValue,
-    step,
-    defaultValue,
-    hideSpinButtons,
-    className,
-    ...otherProps
-  } = props;
-  const {
-    onFocus: customOnFocus,
-    onBlur: customOnBlur,
-    ...rest
-  } = otherProps;
-  const focusedInputRef = useRef5(null);
-  const wheelHandler = useCallback2((ev) => ev.preventDefault(), []);
-  useEffect5(() => {
-    return () => {
-      focusedInputRef.current?.removeEventListener("wheel", wheelHandler);
-      focusedInputRef.current = null;
-    };
-  }, [wheelHandler]);
-  const containerClasses = classNames6("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__ */ jsx7(
-    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/PasswordField/PasswordField.tsx
-import classNames7 from "classnames/dedupe";
-import { useRef as useRef6, useState as useState6 } from "react";
-
-// src/components/PasswordField/ShowHideButton.tsx
-import { eye, eyeSlash } from "@simplybusiness/icons";
-import { jsx as jsx8 } from "react/jsx-runtime";
-var ShowHideButton = ({
-  show = false,
-  onClick
-}) => /* @__PURE__ */ jsx8(
-  "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__ */ jsx8(Icon, { icon: show ? eyeSlash : eye, "aria-hidden": "true" })
-  }
-);
-
-// src/components/PasswordField/PasswordField.tsx
-import "@simplybusiness/mobius/src/components/PasswordField/PasswordField.css";
-import { jsx as jsx9 } from "react/jsx-runtime";
-var PasswordField = ({
-  ref,
-  className,
-  autoComplete = "current-password",
-  ...props
-}) => {
-  const [show, setShow] = useState6(false);
-  const type = show ? "text" : "password";
-  const classes = classNames7("mobius-password-field", className);
-  const localRef = useRef6(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__ */ jsx9(
-    TextField,
-    {
-      ref: mergeRefs([localRef, ref]),
-      className: classes,
-      ...props,
-      autoComplete,
-      type,
-      suffixInside: /* @__PURE__ */ jsx9(ShowHideButton, { onClick: handleShowHideButtonClick, show })
-    }
-  );
-};
-PasswordField.displayName = "PasswordField";
-
-// src/components/Radio/Radio.tsx
-import classNames8 from "classnames/dedupe";
-import {
-  Children as Children2,
-  isValidElement as isValidElement2,
-  useLayoutEffect,
-  useMemo,
-  useRef as useRef7
-} from "react";
-import "@simplybusiness/mobius/src/components/Radio/Radio.css";
-import { Fragment, jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
-var Radio = ({ ref, ...props }) => {
-  const {
-    children,
-    value,
-    label,
-    className,
-    isDisabled,
-    errorMessage,
-    onChange,
-    defaultChecked,
-    groupDisabled,
-    name,
-    selected,
-    setSelected,
-    isRequired,
-    onOverflow,
-    orientation,
-    ...otherProps
-  } = props;
-  const realDisabled = groupDisabled || isDisabled;
-  const isMultiline = label && children;
-  const isControlled = selected !== void 0;
-  const isChecked = isControlled ? selected === value : defaultChecked;
-  const contentRef = useRef7(null);
-  const prevOverflowRef = useRef7({
-    vertical: false,
-    horizontal: false
-  });
-  const hasIconFirst = useMemo(() => {
-    if (!children || Children2.count(children) === 0) return false;
-    const firstChild = Children2.toArray(children)[0];
-    if (!isValidElement2(firstChild)) return false;
-    const props2 = firstChild.props;
-    return "icon" in props2 && props2.icon !== void 0;
-  }, [children]);
-  useLayoutEffect(() => {
-    if (!contentRef.current || !onOverflow) return;
-    if (orientation === "vertical") {
-      return;
-    }
-    const element = contentRef.current;
-    const scrollOverflowVertical = element.scrollHeight > element.clientHeight;
-    const scrollOverflowHorizontal = element.scrollWidth > element.clientWidth;
-    const styles = window.getComputedStyle(element);
-    const lineHeight = parseFloat(styles.lineHeight);
-    const fontSize = parseFloat(styles.fontSize);
-    const singleLineHeight = isNaN(lineHeight) ? fontSize * 1.2 : lineHeight;
-    const WRAP_DETECTION_TOLERANCE = 1.1;
-    const hasWrapped = element.clientHeight > singleLineHeight * WRAP_DETECTION_TOLERANCE;
-    const vertical = scrollOverflowVertical || hasWrapped;
-    const horizontal = scrollOverflowHorizontal;
-    const newOverflowState = { vertical, horizontal };
-    const prevOverflow = prevOverflowRef.current;
-    if (newOverflowState.vertical !== prevOverflow.vertical || newOverflowState.horizontal !== prevOverflow.horizontal) {
-      prevOverflowRef.current = newOverflowState;
-      onOverflow(newOverflowState);
-    }
-  }, [label, children, onOverflow, orientation]);
-  const radioClasses = {
-    "--is-disabled": realDisabled,
-    "--is-selected": selected === value,
-    "--is-multiline": !!isMultiline,
-    "--is-required": isRequired
-  };
-  const containerClasses = classNames8(
-    "mobius-radio__label",
-    radioClasses,
-    className,
-    { "--has-icon-first": hasIconFirst }
-  );
-  const inputClasses = classNames8("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__ */ jsxs5(Fragment, { children: [
-    /* @__PURE__ */ jsxs5(Label, { className: containerClasses, children: [
-      /* @__PURE__ */ jsx10(
-        "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__ */ jsxs5("div", { ref: contentRef, className: "mobius-radio__content--multiline", children: [
-        /* @__PURE__ */ jsx10("div", { className: "mobius-radio__content-first-line", children: label }),
-        /* @__PURE__ */ jsx10("div", { className: "mobius-radio__extra-content", children })
-      ] }) : /* @__PURE__ */ jsx10("div", { ref: contentRef, className: "mobius-radio__content", children: label || children })
-    ] }),
-    errorMessage && /* @__PURE__ */ jsx10(ErrorMessage, { errorMessage })
-  ] });
-};
-Radio.displayName = "Radio";
-
-// src/components/Radio/RadioGroup.tsx
-import classNames9 from "classnames/dedupe";
-import {
-  Children as Children3,
-  cloneElement as cloneElement2,
-  isValidElement as isValidElement3,
-  useCallback as useCallback3,
-  useEffect as useEffect6,
-  useId as useId4,
-  useRef as useRef8,
-  useState as useState7
-} from "react";
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
-var getDefaultVal = (children, defaultValue) => {
-  if (Array.isArray(children) && defaultValue) {
-    const option = children?.find((item) => item.props.value === defaultValue);
-    if (!option) return "";
-    return option.props.value;
-  }
-  return "";
-};
-var RadioGroup = ({ ref, ...props }) => {
-  const {
-    label,
-    isDisabled = false,
-    isRequired,
-    isInvalid,
-    orientation = "vertical",
-    className,
-    errorMessage,
-    children,
-    defaultValue,
-    value,
-    isReadOnly,
-    name,
-    onChange,
-    autoStack = false,
-    ...rest
-  } = props;
-  const defaultSelected = getDefaultVal(children, value || defaultValue);
-  const [selected, setSelected] = useState7(defaultSelected);
-  const overflowsRef = useRef8({});
-  const [hasOverflow, setHasOverflow] = useState7(false);
-  useEffect6(() => {
-    if (value !== void 0) {
-      setSelected(value);
-    }
-  }, [value]);
-  const handleOverflow = useCallback3(
-    (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 = classNames9(
-    "mobius",
-    "mobius-radio-group",
-    radioClasses,
-    validationClasses
-  );
-  const radioWrapperClasses = classNames9("mobius-radio__wrapper", {
-    [`--is-${effectiveOrientation}`]: true
-  });
-  const labelClasses = classNames9(radioClasses, validationClasses);
-  const errorMessageId = useId4();
-  const defaultNameAttrId = useId4();
-  const nameAttribute = name || defaultNameAttrId;
-  const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
-  const describedBy = spaceDelimitedList([
-    shouldErrorMessageShow,
-    props["aria-describedby"]
-  ]);
-  const labelId = useId4();
-  return /* @__PURE__ */ jsx11(
-    "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__ */ jsxs6(Stack, { gap: "xs", children: [
-        label && /* @__PURE__ */ jsx11(Label, { htmlFor: name, id: labelId, className: labelClasses, children: label }),
-        /* @__PURE__ */ jsx11("div", { className: radioWrapperClasses, children: Children3.map(children, (child) => {
-          if (isValidElement3(child)) {
-            const childValue = child.props.value;
-            return cloneElement2(
-              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__ */ jsx11(ErrorMessage, { id: errorMessageId, errorMessage })
-      ] })
-    }
-  );
-};
-RadioGroup.displayName = "RadioGroup";
-
-// src/components/Select/Select.tsx
-import { chevronDown } from "@simplybusiness/icons";
-import classNames10 from "classnames/dedupe";
-import { useId as useId5 } from "react";
-import "@simplybusiness/mobius/src/components/Select/Select.css";
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
-var Select = ({ ref, ...props }) => {
-  const {
-    label,
-    onChange,
-    isInvalid,
-    errorMessage,
-    isDisabled = false,
-    isRequired,
-    ...otherProps
-  } = props;
-  const { labelProps, fieldProps } = useLabel({
-    label,
-    ...otherProps
-  });
-  const validationClasses = useValidationClasses({ isInvalid });
-  const stateClasses = {
-    "--is-disabled": isDisabled,
-    "--is-required": typeof isRequired === "boolean" && isRequired,
-    "--is-optional": typeof isRequired === "boolean" && !isRequired
-  };
-  const sharedClasses = classNames10(validationClasses, stateClasses);
-  const wrapperClasses = classNames10(
-    "mobius-select__wrapper",
-    sharedClasses,
-    otherProps.className
-  );
-  const selectClasses = classNames10(
-    "mobius-select",
-    sharedClasses,
-    otherProps.className
-  );
-  const labelClasses = classNames10(
-    "mobius-label",
-    sharedClasses,
-    otherProps.className
-  );
-  const iconClasses = classNames10("mobius-select__icon", sharedClasses);
-  const errorMessageId = useId5();
-  const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
-  const describedBy = spaceDelimitedList([
-    shouldErrorMessageShow,
-    props["aria-describedby"]
-  ]);
-  const handleChange = (e) => {
-    if (onChange) {
-      onChange(e);
-    }
-  };
-  return /* @__PURE__ */ jsxs7(Stack, { className: "mobius mobius-select__outer", gap: "xs", children: [
-    label && /* @__PURE__ */ jsx12(Label, { ...labelProps, className: labelClasses, children: label }),
-    /* @__PURE__ */ jsxs7("div", { className: wrapperClasses, children: [
-      /* @__PURE__ */ jsx12(
-        "select",
-        {
-          ...otherProps,
-          ...fieldProps,
-          ref,
-          multiple: false,
-          className: selectClasses,
-          disabled: isDisabled,
-          "aria-invalid": !!errorMessage,
-          "aria-describedby": describedBy,
-          "aria-required": isRequired,
-          required: isRequired,
-          onChange: handleChange
-        }
-      ),
-      /* @__PURE__ */ jsx12("span", { className: iconClasses, children: /* @__PURE__ */ jsx12(Icon, { icon: chevronDown }) })
-    ] }),
-    errorMessage && /* @__PURE__ */ jsx12(ErrorMessage, { id: errorMessageId, errorMessage })
-  ] });
-};
-Select.displayName = "Select";
-
-// src/components/TextArea/TextArea.tsx
-import classNames11 from "classnames/dedupe";
-import "@simplybusiness/mobius/src/components/TextArea/TextArea.css";
-import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
-var TextArea = ({ ref, ...props }) => {
-  const {
-    isDisabled,
-    className,
-    errorMessage,
-    label,
-    isInvalid,
-    ...otherProps
-  } = props;
-  const { inputProps, labelProps, errorMessageProps } = useTextField(props);
-  const classes = classNames11("mobius", "mobius-text-area", className);
-  const validationClasses = useValidationClasses({ isInvalid });
-  const inputClasses = classNames11("mobius-text-area__input", validationClasses);
-  const labelClasses = classNames11(
-    {
-      "--is-disabled": isDisabled
-    },
-    validationClasses
-  );
-  return /* @__PURE__ */ jsxs8(Stack, { className: classes, gap: "xs", children: [
-    label && /* @__PURE__ */ jsx13(Label, { ...labelProps, className: labelClasses, children: props.label }),
-    /* @__PURE__ */ jsx13(
-      TextAreaInput,
-      {
-        ...otherProps,
-        ...inputProps,
-        ref,
-        className: inputClasses,
-        isDisabled,
-        "aria-invalid": errorMessage != null
-      }
-    ),
-    /* @__PURE__ */ jsx13(ErrorMessage, { ...errorMessageProps, errorMessage })
-  ] });
-};
-TextArea.displayName = "TextArea";
-
-// src/components/ExpandableText/ExpandableText.tsx
-import classNames12 from "classnames/dedupe";
-import { useEffect as useEffect7, useId as useId6, useRef as useRef9, useState as useState8 } from "react";
-import "@simplybusiness/mobius/src/components/ExpandableText/ExpandableText.css";
-import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
-var ExpandableText = ({ ref, ...props }) => {
-  const {
-    text,
-    maxLines = 3,
-    breakpoint,
-    showText = "Read more",
-    hideText = "Read less",
-    className,
-    textProps = {},
-    accordionProps = {},
-    onToggle,
-    ...otherProps
-  } = props;
-  const [isExpanded, setIsExpanded] = useState8(false);
-  const [isCollapsed, setIsCollapsed] = useState8(false);
-  const textRef = useRef9(null);
-  const { down } = useBreakpoint();
-  const baseId = useId6();
-  const expandButtonId = `expandable-text-expand-${baseId}`;
-  const shouldCollapse = breakpoint ? down(breakpoint) : true;
-  useEffect7(() => {
-    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__ */ jsx14("div", { ref, className, ...otherProps, children: /* @__PURE__ */ jsx14(TextOrHTML, { text, textWrapper: true, ...textProps }) });
-  }
-  const handleAccordionChange = (expanded) => {
-    setIsExpanded(expanded);
-    onToggle?.(expanded);
-  };
-  const classes = classNames12("mobius-expandable-text", className);
-  const textContainerClasses = classNames12("mobius-expandable-text__content", {
-    "mobius-expandable-text__content--collapsed": !isExpanded
-  });
-  const textContainerStyle = {
-    "--line-clamp": maxLines
-  };
-  return /* @__PURE__ */ jsxs9(
-    "div",
-    {
-      ref,
-      className: classes,
-      "data-testid": "expandable-text",
-      ...otherProps,
-      children: [
-        /* @__PURE__ */ jsx14(
-          "div",
-          {
-            ref: textRef,
-            className: textContainerClasses,
-            style: textContainerStyle,
-            "data-testid": "expandable-text-content",
-            "aria-describedby": isCollapsed ? expandButtonId : void 0,
-            children: /* @__PURE__ */ jsx14(TextOrHTML, { elementType: "span", textWrapper: true, text, ...textProps })
-          }
-        ),
-        isCollapsed && /* @__PURE__ */ jsx14(
-          Accordion,
-          {
-            showText,
-            hideText,
-            headerPosition: "bottom",
-            onChange: handleAccordionChange,
-            onClick: (e) => {
-              e?.stopPropagation();
-            },
-            id: expandButtonId,
-            ...accordionProps
-          }
-        )
-      ]
-    }
-  );
-};
-ExpandableText.displayName = "ExpandableText";
-
-// src/components/MaskedField/index.tsx
-import loadable from "@loadable/component";
-import { jsx as jsx15 } from "react/jsx-runtime";
-var LoadableMaskedField = loadable(() => import("./components/MaskedField/MaskedField.js"), {
-  resolveComponent: (mod) => mod.MaskedField
-});
-function MaskedField(props) {
-  const {
-    mask: _mask,
-    useMaskedValue: _useMaskedValue,
-    "data-testid": _dataTestId,
-    ref: forwardedRef,
-    ...textFieldProps
-  } = props;
-  return /* @__PURE__ */ jsx15(
-    LoadableMaskedField,
-    {
-      ...props,
-      fallback: /* @__PURE__ */ jsx15(
-        TextField,
-        {
-          ...textFieldProps,
-          ref: forwardedRef,
-          type: "text",
-          isDisabled: true,
-          isReadOnly: true
-        }
-      )
-    }
-  );
-}
-MaskedField.displayName = "MaskedField";
-
-// src/components/ErrorMessage/ErrorMessage.tsx
-import "@simplybusiness/mobius/src/components/ErrorMessage/ErrorMessage.css";
-import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
-var ErrorMessage = ({
-  id,
-  errorMessage,
-  className
-}) => {
-  const classes = classNames13("mobius", "mobius-error-message", className);
-  if (!errorMessage) return null;
-  return /* @__PURE__ */ jsxs10("div", { id, className: classes, "data-testid": "ErrorMessage", role: "alert", children: [
-    /* @__PURE__ */ jsx16(
-      Icon,
-      {
-        icon: error,
-        className: "mobius-error-message__icon",
-        "aria-hidden": "true"
-      }
-    ),
-    /* @__PURE__ */ jsx16(
-      TextOrHTML,
-      {
-        elementType: "span",
-        className: "mobius-error-message__text",
-        text: errorMessage
-      }
-    )
-  ] });
-};
-ErrorMessage.displayName = "ErrorMessage";
-
-export {
-  ErrorMessage,
-  TextField,
-  Combobox,
-  AddressLookup,
-  Checkbox,
-  CheckboxGroup,
-  MIN_MAX_ERROR,
-  DateField,
-  NumberField,
-  ShowHideButton,
-  PasswordField,
-  Radio,
-  RadioGroup,
-  Select,
-  TextArea,
-  ExpandableText,
-  MaskedField
-};
-//# sourceMappingURL=chunk-W2RQH4WS.js.map