"use strict";
"use client";
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 __esm = (fn, res) => function __init() {
  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
};
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);

// src/hooks/useBreakpoint/useBreakpoint.tsx
var import_mobius_hooks, import_react;
var init_useBreakpoint = __esm({
  "src/hooks/useBreakpoint/useBreakpoint.tsx"() {
    "use strict";
    "use client";
    import_mobius_hooks = require("@simplybusiness/mobius-hooks");
    import_react = require("react");
  }
});

// src/hooks/useBreakpoint/index.tsx
var init_useBreakpoint2 = __esm({
  "src/hooks/useBreakpoint/index.tsx"() {
    "use strict";
    init_useBreakpoint();
  }
});

// src/hooks/useButton/useButton.tsx
var import_react2;
var init_useButton = __esm({
  "src/hooks/useButton/useButton.tsx"() {
    "use strict";
    import_react2 = require("react");
  }
});

// src/hooks/useButton/index.tsx
var init_useButton2 = __esm({
  "src/hooks/useButton/index.tsx"() {
    "use strict";
    init_useButton();
  }
});

// src/utils/spaceDelimitedList.ts
function spaceDelimitedList(list) {
  return list.filter(Boolean).join(" ") || void 0;
}
var init_spaceDelimitedList = __esm({
  "src/utils/spaceDelimitedList.ts"() {
    "use strict";
  }
});

// src/hooks/useDialogPolyfill/useDialogPolyfill.ts
var import_react3;
var init_useDialogPolyfill = __esm({
  "src/hooks/useDialogPolyfill/useDialogPolyfill.ts"() {
    "use strict";
    import_react3 = require("react");
  }
});

// src/hooks/useDialogPolyfill/index.ts
var init_useDialogPolyfill2 = __esm({
  "src/hooks/useDialogPolyfill/index.ts"() {
    "use strict";
    init_useDialogPolyfill();
  }
});

// src/hooks/useDialog/useDialog.ts
var import_react4, import_mobius_hooks2;
var init_useDialog = __esm({
  "src/hooks/useDialog/useDialog.ts"() {
    "use strict";
    import_react4 = require("react");
    import_mobius_hooks2 = require("@simplybusiness/mobius-hooks");
  }
});

// src/hooks/useDialog/index.ts
var init_useDialog2 = __esm({
  "src/hooks/useDialog/index.ts"() {
    "use strict";
    init_useDialog();
  }
});

// src/hooks/useLabel/useLabel.tsx
function useLabel({
  id: providedId,
  label,
  "aria-label": ariaLabel,
  "aria-labelledby": ariaLabelledby,
  labelElementType = "label"
}) {
  let labelProps = {};
  let fieldProps = {};
  const hasWarnedAboutMissingLabels = (0, import_react5.useRef)(false);
  const fallbackId = (0, import_react5.useId)();
  const id = providedId || fallbackId;
  const labelId = (0, import_react5.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
  };
}
var import_react5;
var init_useLabel = __esm({
  "src/hooks/useLabel/useLabel.tsx"() {
    "use strict";
    import_react5 = require("react");
  }
});

// src/hooks/useLabel/index.tsx
var init_useLabel2 = __esm({
  "src/hooks/useLabel/index.tsx"() {
    "use strict";
    init_useLabel();
  }
});

// src/hooks/useTextField/useTextField.tsx
function useTextField(props) {
  const {
    isDisabled = false,
    isReadOnly = false,
    isRequired = false,
    inputElementType = "input"
  } = props;
  const { labelProps, fieldProps } = useLabel(props);
  const descriptionId = (0, import_react6.useId)();
  const descriptionProps = { id: descriptionId };
  const errorMessageId = (0, import_react6.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
    }
  };
}
var import_react6;
var init_useTextField = __esm({
  "src/hooks/useTextField/useTextField.tsx"() {
    "use strict";
    import_react6 = require("react");
    init_spaceDelimitedList();
    init_useLabel();
  }
});

// src/hooks/useTextField/types.tsx
var init_types = __esm({
  "src/hooks/useTextField/types.tsx"() {
    "use strict";
  }
});

// src/hooks/useTextField/index.tsx
var init_useTextField2 = __esm({
  "src/hooks/useTextField/index.tsx"() {
    "use strict";
    init_useTextField();
    init_types();
  }
});

// src/hooks/useValidationClasses/useValidationClasses.ts
var useValidationClasses;
var init_useValidationClasses = __esm({
  "src/hooks/useValidationClasses/useValidationClasses.ts"() {
    "use strict";
    useValidationClasses = (props) => {
      const { isInvalid } = props;
      if (isInvalid) {
        return "--is-invalid";
      }
      if (isInvalid === false) {
        return "--is-valid";
      }
      return "";
    };
  }
});

// src/hooks/useValidationClasses/index.ts
var init_useValidationClasses2 = __esm({
  "src/hooks/useValidationClasses/index.ts"() {
    "use strict";
    init_useValidationClasses();
  }
});

// src/hooks/index.tsx
var init_hooks = __esm({
  "src/hooks/index.tsx"() {
    "use strict";
    init_useBreakpoint2();
    init_useButton2();
    init_useDialog2();
    init_useDialogPolyfill2();
    init_useLabel2();
    init_useTextField2();
    init_useValidationClasses2();
  }
});

// src/components/Icon/Icon.tsx
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_dedupe.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_runtime.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_runtime.jsx)("title", { children: titleText }),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "currentColor", d: svgPathData })
      ]
    }
  );
}
var import_dedupe, import_Icon, import_jsx_runtime, ICON_PREFIX, capitaliseFirstLetter;
var init_Icon = __esm({
  "src/components/Icon/Icon.tsx"() {
    "use strict";
    import_dedupe = __toESM(require("classnames/dedupe"));
    import_Icon = require("@simplybusiness/mobius/src/components/Icon/Icon.css");
    import_jsx_runtime = require("react/jsx-runtime");
    ICON_PREFIX = "mobius-icon";
    capitaliseFirstLetter = (str) => str.charAt(0).toUpperCase() + str.slice(1);
  }
});

// src/components/Icon/types.ts
var init_types2 = __esm({
  "src/components/Icon/types.ts"() {
    "use strict";
  }
});

// src/components/Icon/index.tsx
var init_Icon2 = __esm({
  "src/components/Icon/index.tsx"() {
    "use strict";
    init_Icon();
    init_types2();
  }
});

// src/components/Text/Text.tsx
var import_dedupe2, import_Text, import_jsx_runtime2, getElementType, Text;
var init_Text = __esm({
  "src/components/Text/Text.tsx"() {
    "use strict";
    import_dedupe2 = __toESM(require("classnames/dedupe"));
    import_Text = require("@simplybusiness/mobius/src/components/Text/Text.css");
    import_jsx_runtime2 = require("react/jsx-runtime");
    getElementType = (variant, elementType) => {
      if (elementType) {
        return elementType;
      }
      if (variant && ["h1", "h2", "h3", "h4"].includes(variant)) {
        return variant;
      }
      return "p";
    };
    Text = ({ ref, elementType, ...props }) => {
      const { variant, className, spacing, ...otherProps } = props;
      const Element = getElementType(variant, elementType);
      const variantType = variant || Element;
      const classes = (0, import_dedupe2.default)(
        "mobius",
        "mobius-text",
        { [`--is-${variantType}`]: variantType },
        { [`--has-line-height-${spacing}`]: spacing },
        className
      );
      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Element, { ref, ...otherProps, className: classes });
    };
    Text.displayName = "Text";
  }
});

// src/components/TextOrHTML/TextOrHTML.tsx
var import_dedupe3, import_react7, import_jsx_runtime3, BLOCK_TAG, containsBlockHTML, containsHTML, buildTextClasses, TextOrHTML;
var init_TextOrHTML = __esm({
  "src/components/TextOrHTML/TextOrHTML.tsx"() {
    "use strict";
    import_dedupe3 = __toESM(require("classnames/dedupe"));
    import_react7 = require("react");
    init_Text();
    import_jsx_runtime3 = require("react/jsx-runtime");
    BLOCK_TAG = /<(div|p|ul|ol|li|h[1-6]|table|tr|td|th|blockquote|pre|hr|dl|dt|dd)[\s>/]/i;
    containsBlockHTML = (text) => BLOCK_TAG.test(text);
    containsHTML = (text) => /<[a-z/]/i.test(text) || /&(?:#\d+|#x[\da-f]+|[a-z]\w*);/i.test(text);
    buildTextClasses = (textProps, htmlClassName) => {
      const { variant, elementType, spacing, className } = textProps;
      const variantType = variant || getElementType(variant, elementType);
      return (0, import_dedupe3.default)(
        "mobius",
        "mobius-text",
        { [`--is-${variantType}`]: variantType },
        { [`--has-line-height-${spacing}`]: spacing },
        className,
        htmlClassName
      );
    };
    TextOrHTML = ({
      ref,
      text,
      htmlClassName,
      htmlElementType,
      textWrapper = false,
      autoDetect = false,
      ...textProps
    }) => {
      const hasBlockContent = autoDetect && containsBlockHTML(text);
      const dangerousHTML = (0, import_react7.useMemo)(() => ({ __html: text }), [text]);
      if (autoDetect && !hasBlockContent) {
        const { variant, spacing, elementType, className, ...domProps } = textProps;
        const Element = getElementType(variant, elementType);
        const classes = buildTextClasses(textProps, htmlClassName);
        return containsHTML(text) ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
          Element,
          {
            ref,
            ...domProps,
            className: classes,
            dangerouslySetInnerHTML: dangerousHTML
          }
        ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Element, { ref, ...domProps, className: classes, children: text });
      }
      const DangerousComponent = htmlElementType ?? (hasBlockContent ? "div" : "span");
      const dangerousElement = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
        DangerousComponent,
        {
          className: htmlClassName,
          dangerouslySetInnerHTML: dangerousHTML
        }
      );
      if (textWrapper) {
        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text, { ref, ...textProps, children: dangerousElement });
      }
      return dangerousElement;
    };
    TextOrHTML.displayName = "TextOrHTML";
  }
});

// src/components/TextOrHTML/index.tsx
var init_TextOrHTML2 = __esm({
  "src/components/TextOrHTML/index.tsx"() {
    "use strict";
    init_TextOrHTML();
  }
});

// src/components/ErrorMessage/ErrorMessage.tsx
var import_icons, import_dedupe4, import_ErrorMessage, import_jsx_runtime4, ErrorMessage;
var init_ErrorMessage = __esm({
  "src/components/ErrorMessage/ErrorMessage.tsx"() {
    "use strict";
    import_icons = require("@simplybusiness/icons");
    import_dedupe4 = __toESM(require("classnames/dedupe"));
    init_Icon2();
    init_TextOrHTML2();
    import_ErrorMessage = require("@simplybusiness/mobius/src/components/ErrorMessage/ErrorMessage.css");
    import_jsx_runtime4 = require("react/jsx-runtime");
    ErrorMessage = ({
      id,
      errorMessage,
      className
    }) => {
      const classes = (0, import_dedupe4.default)("mobius", "mobius-error-message", className);
      if (!errorMessage) return null;
      return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { id, className: classes, "data-testid": "ErrorMessage", role: "alert", children: [
        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
          Icon,
          {
            icon: import_icons.error,
            className: "mobius-error-message__icon",
            "aria-hidden": "true"
          }
        ),
        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
          TextOrHTML,
          {
            elementType: "span",
            className: "mobius-error-message__text",
            text: errorMessage
          }
        )
      ] });
    };
    ErrorMessage.displayName = "ErrorMessage";
  }
});

// src/components/ErrorMessage/index.tsx
var init_ErrorMessage2 = __esm({
  "src/components/ErrorMessage/index.tsx"() {
    "use strict";
    init_ErrorMessage();
  }
});

// src/components/Label/Label.tsx
var import_dedupe5, import_Label, import_jsx_runtime5, Label;
var init_Label = __esm({
  "src/components/Label/Label.tsx"() {
    "use strict";
    import_dedupe5 = __toESM(require("classnames/dedupe"));
    import_Label = require("@simplybusiness/mobius/src/components/Label/Label.css");
    import_jsx_runtime5 = require("react/jsx-runtime");
    Label = ({ ref, ...props }) => {
      const { elementType: Element = "label", children, ...otherProps } = props;
      const classes = (0, import_dedupe5.default)("mobius", "mobius-label", props.className);
      otherProps.className = classes;
      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Element, { ref, ...otherProps, className: classes, children });
    };
    Label.displayName = "Label";
  }
});

// src/components/Label/index.tsx
var init_Label2 = __esm({
  "src/components/Label/index.tsx"() {
    "use strict";
    init_Label();
  }
});

// src/components/Stack/Stack.tsx
var import_dedupe6, import_Stack, import_jsx_runtime6, Stack;
var init_Stack = __esm({
  "src/components/Stack/Stack.tsx"() {
    "use strict";
    import_dedupe6 = __toESM(require("classnames/dedupe"));
    import_Stack = require("@simplybusiness/mobius/src/components/Stack/Stack.css");
    import_jsx_runtime6 = require("react/jsx-runtime");
    Stack = ({ ref, ...props }) => {
      const { elementType: Element = "div", gap, ...otherProps } = props;
      const classes = (0, import_dedupe6.default)(
        "mobius",
        "mobius-stack",
        {
          [`--gap-${gap}`]: gap
        },
        otherProps.className
      );
      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Element, { ref, ...otherProps, className: classes });
    };
    Stack.displayName = "Stack";
  }
});

// src/components/Stack/index.tsx
var init_Stack2 = __esm({
  "src/components/Stack/index.tsx"() {
    "use strict";
    init_Stack();
  }
});

// src/components/TextField/adornmentWithClassName.ts
var import_dedupe7, import_react8, adornmentWithClassName;
var init_adornmentWithClassName = __esm({
  "src/components/TextField/adornmentWithClassName.ts"() {
    "use strict";
    import_dedupe7 = __toESM(require("classnames/dedupe"));
    import_react8 = require("react");
    adornmentWithClassName = (component, validationClasses, className) => {
      if (!component) return null;
      const typedComponent = component;
      return (0, import_react8.cloneElement)(typedComponent, {
        className: (0, import_dedupe7.default)(
          typedComponent.props.className,
          validationClasses,
          className
        )
      });
    };
  }
});

// src/components/TextField/TextField.tsx
var import_dedupe8, import_react9, import_TextField, import_jsx_runtime7, TextFieldInner, TextField;
var init_TextField = __esm({
  "src/components/TextField/TextField.tsx"() {
    "use strict";
    "use client";
    import_dedupe8 = __toESM(require("classnames/dedupe"));
    import_react9 = require("react");
    init_hooks();
    init_ErrorMessage2();
    init_Label2();
    init_Stack2();
    init_adornmentWithClassName();
    import_TextField = require("@simplybusiness/mobius/src/components/TextField/TextField.css");
    import_jsx_runtime7 = require("react/jsx-runtime");
    TextFieldInner = ({ 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 = (0, import_dedupe8.default)(validationClasses, textfieldClasses);
      const labelClasses = (0, import_dedupe8.default)(
        {
          "--is-disabled": isDisabled
        },
        validationClasses
      );
      const containerClasses = (0, import_dedupe8.default)(
        "mobius",
        "mobius-text-field",
        sharedClasses
      );
      const inputClasses = (0, import_dedupe8.default)(
        "mobius",
        "mobius-text-field__input",
        sharedClasses
      );
      const inputWrapperClasses = (0, import_dedupe8.default)(
        "mobius-text-field__input-wrapper",
        sharedClasses
      );
      return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Stack, { gap: "xs", className: containerClasses, children: [
        label && !hidden && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Label, { ...labelProps, className: labelClasses, children: label }),
        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "mobius-text-field__inner-container", children: [
          adornmentWithClassName(
            prefixOutside,
            labelClasses,
            "mobius-text-field__prefix-outside"
          ),
          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: inputWrapperClasses, children: [
            adornmentWithClassName(
              prefixInside,
              labelClasses,
              "mobius-text-field__prefix-inside"
            ),
            /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime7.jsx)("div", { className: "mobius-text-field__children", children }),
        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ErrorMessage, { ...errorMessageProps, errorMessage })
      ] });
    };
    TextField = (0, import_react9.memo)(TextFieldInner);
    TextField.displayName = "TextField";
  }
});

// src/components/TextField/index.tsx
var init_TextField2 = __esm({
  "src/components/TextField/index.tsx"() {
    "use strict";
    init_TextField();
  }
});

// src/components/MaskedField/MaskedField.tsx
var MaskedField_exports = {};
__export(MaskedField_exports, {
  MaskedField: () => MaskedField
});
var import_react10, import_react_imask, import_jsx_runtime8, useAcceptHandler, useCombinedRef, useBlurHandler, ControlledMaskedField, UncontrolledMaskedField, MaskedField;
var init_MaskedField = __esm({
  "src/components/MaskedField/MaskedField.tsx"() {
    "use strict";
    "use client";
    import_react10 = require("react");
    import_react_imask = require("react-imask");
    init_TextField2();
    import_jsx_runtime8 = require("react/jsx-runtime");
    useAcceptHandler = (onChange, useMaskedValue, name) => {
      return (0, import_react10.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]
      );
    };
    useCombinedRef = (imaskRef, forwardedRef) => {
      return (0, import_react10.useCallback)(
        (element) => {
          imaskRef.current = element;
          if (typeof forwardedRef === "function") {
            forwardedRef(element);
          } else if (forwardedRef) {
            forwardedRef.current = element;
          }
        },
        [imaskRef, forwardedRef]
      );
    };
    useBlurHandler = (onBlur, maskRef, useMaskedValue, name) => {
      return (0, import_react10.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]
      );
    };
    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_react10.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_runtime8.jsx)(
        TextField,
        {
          ...textFieldProps,
          ref: combinedRef,
          name,
          onBlur: handleBlur
        }
      );
    };
    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_runtime8.jsx)(
        TextField,
        {
          ...textFieldProps,
          ref: combinedRef,
          name,
          onBlur: handleBlur,
          defaultValue: defaultValue?.toString()
        }
      );
    };
    MaskedField = ({ ref: forwardedRef, ...props }) => {
      const { value, defaultValue, ...rest } = props;
      if ("value" in props) {
        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
          ControlledMaskedField,
          {
            ...rest,
            value: value ?? "",
            forwardedRef
          }
        );
      } else {
        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
          UncontrolledMaskedField,
          {
            ...rest,
            defaultValue,
            forwardedRef
          }
        );
      }
    };
    MaskedField.displayName = "MaskedField";
  }
});

// src/components/MaskedField/index.tsx
var MaskedField_exports2 = {};
__export(MaskedField_exports2, {
  MaskedField: () => MaskedField2
});
module.exports = __toCommonJS(MaskedField_exports2);
var import_component = __toESM(require("@loadable/component"));
init_TextField2();
var import_jsx_runtime9 = require("react/jsx-runtime");
var LoadableMaskedField = (0, import_component.default)(() => Promise.resolve().then(() => (init_MaskedField(), MaskedField_exports)), {
  resolveComponent: (mod) => mod.MaskedField
});
function MaskedField2(props) {
  const {
    mask: _mask,
    useMaskedValue: _useMaskedValue,
    "data-testid": _dataTestId,
    ref: forwardedRef,
    ...textFieldProps
  } = props;
  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
    LoadableMaskedField,
    {
      ...props,
      fallback: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
        TextField,
        {
          ...textFieldProps,
          ref: forwardedRef,
          type: "text",
          isDisabled: true,
          isReadOnly: true
        }
      )
    }
  );
}
MaskedField2.displayName = "MaskedField";
//# sourceMappingURL=index.js.map
