@simplybusiness/mobius 6.1.1 → 6.2.0

package/dist/cjs/index.js

@@ -62,6 +62,7 @@ __export(index_exports, {
   Logo: () => Logo,
   LoqateAddressLookupService: () => LoqateAddressLookupService,
   MIN_MAX_ERROR: () => MIN_MAX_ERROR,
+  MaskedField: () => MaskedField,
   Modal: () => Modal2,
   NumberField: () => NumberField,
   Option: () => Option2,
@@ -2582,7 +2583,8 @@ var import_react37 = require("react");
 var DrawerContext = (0, import_react37.createContext)({
   onClose: () => {
   },
-  closeLabel: void 0
+  closeLabel: void 0,
+  headerId: void 0
 });
 
 // src/components/Drawer/Drawer.tsx
@@ -2611,7 +2613,8 @@ var Drawer = (0, import_react38.forwardRef)((props, ref) => {
       CSSVariable: TRANSITION_CSS_VARIABLE
     }
   });
-  const hiddenId = `screen-reader-announce-${(0, import_react38.useId)()}`;
+  const hiddenId = `dialog-screen-reader-announce-${(0, import_react38.useId)()}`;
+  const headerId = `dialog-header-${(0, import_react38.useId)()}`;
   const dialogClasses = (0, import_dedupe22.default)(
     "mobius",
     "mobius-drawer",
@@ -2627,9 +2630,10 @@ var Drawer = (0, import_react38.forwardRef)((props, ref) => {
   const contextValue = (0, import_react38.useMemo)(
     () => ({
       onClose: close,
-      closeLabel
+      closeLabel,
+      headerId
     }),
-    [close, closeLabel]
+    [close, closeLabel, headerId]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
     "dialog",
@@ -2639,6 +2643,7 @@ var Drawer = (0, import_react38.forwardRef)((props, 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 })
@@ -2651,8 +2656,8 @@ Drawer.displayName = "Drawer";
 // src/components/Drawer/useDrawer.ts
 var import_react39 = require("react");
 var useDrawer = () => {
-  const { onClose, closeLabel } = (0, import_react39.useContext)(DrawerContext);
-  return { onClose, closeLabel };
+  const { onClose, closeLabel, headerId } = (0, import_react39.useContext)(DrawerContext);
+  return { onClose, closeLabel, headerId };
 };
 
 // src/components/Drawer/Header.tsx
@@ -2661,9 +2666,9 @@ var import_icons8 = require("@simplybusiness/icons");
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var Header = (0, import_react40.forwardRef)(
   ({ children, ...otherProps }, ref) => {
-    const { onClose, closeLabel } = useDrawer();
+    const { onClose, closeLabel, headerId } = useDrawer();
     return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("header", { ref, ...otherProps, className: "mobius-drawer__header", children: [
-      children,
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("h2", { id: headerId, children }),
       /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
         Button,
         {
@@ -3286,8 +3291,9 @@ Modal2.displayName = "Modal";
 // src/components/NumberField/NumberField.tsx
 var import_dedupe36 = __toESM(require("classnames/dedupe"));
 var import_react57 = require("react");
+var import_react58 = require("react");
 var import_jsx_runtime45 = require("react/jsx-runtime");
-var NumberField = (0, import_react57.forwardRef)((props, ref) => {
+var NumberField = (0, import_react58.forwardRef)((props, ref) => {
   const {
     minValue,
     maxValue,
@@ -3297,6 +3303,14 @@ var NumberField = (0, import_react57.forwardRef)((props, ref) => {
     className,
     ...otherProps
   } = props;
+  const focusedInputRef = (0, import_react57.useRef)(null);
+  const wheelHandler = (0, import_react57.useCallback)((ev) => ev.preventDefault(), []);
+  (0, import_react57.useEffect)(() => {
+    return () => {
+      focusedInputRef.current?.removeEventListener("wheel", wheelHandler);
+      focusedInputRef.current = null;
+    };
+  }, [wheelHandler]);
   const containerClasses = (0, import_dedupe36.default)("mobius-number-field", className, {
     "--hide-spin-buttons": hideSpinButtons
   });
@@ -3309,10 +3323,33 @@ var NumberField = (0, import_react57.forwardRef)((props, ref) => {
       event.preventDefault();
     }
   };
+  const {
+    onFocus: customOnFocus,
+    onBlur: customOnBlur,
+    ...rest
+  } = otherProps;
+  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) => {
+      const el = e.currentTarget;
+      el.removeEventListener("wheel", wheelHandler);
+      if (focusedInputRef.current === el) {
+        focusedInputRef.current = null;
+      }
+      customOnBlur?.(e);
+    }
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     TextField,
     {
-      ...otherProps,
+      ...forwardedProps,
       className: containerClasses,
       onBeforeInput: handleBeforeInput,
       type: "number",
@@ -3327,9 +3364,9 @@ var NumberField = (0, import_react57.forwardRef)((props, ref) => {
 NumberField.displayName = "NumberField";
 
 // src/components/Option/Option.tsx
-var import_react58 = require("react");
+var import_react59 = require("react");
 var import_jsx_runtime46 = require("react/jsx-runtime");
-var Option2 = (0, import_react58.forwardRef)((props, ref) => {
+var Option2 = (0, import_react59.forwardRef)((props, ref) => {
   const { isDisabled, ...rest } = props;
   const mappedProps = {
     ...rest,
@@ -3341,7 +3378,7 @@ Option2.displayName = "Option";
 
 // src/components/PasswordField/PasswordField.tsx
 var import_dedupe37 = __toESM(require("classnames/dedupe"));
-var import_react59 = require("react");
+var import_react60 = require("react");
 
 // src/components/PasswordField/ShowHideButton.tsx
 var import_jsx_runtime47 = require("react/jsx-runtime");
@@ -3365,12 +3402,12 @@ var ShowHideButton = ({
 
 // src/components/PasswordField/PasswordField.tsx
 var import_jsx_runtime48 = require("react/jsx-runtime");
-var PasswordField = (0, import_react59.forwardRef)(
+var PasswordField = (0, import_react60.forwardRef)(
   ({ className, ...props }, ref) => {
-    const [show, setShow] = (0, import_react59.useState)(false);
+    const [show, setShow] = (0, import_react60.useState)(false);
     const type = show ? "text" : "password";
     const classes = (0, import_dedupe37.default)("mobius-password-field", className);
-    const localRef = (0, import_react59.useRef)(null);
+    const localRef = (0, import_react60.useRef)(null);
     const handleShowHideButtonClick = () => {
       setShow((oldShow) => !oldShow);
       localRef.current?.focus();
@@ -3390,30 +3427,30 @@ var PasswordField = (0, import_react59.forwardRef)(
 PasswordField.displayName = "PasswordField";
 
 // src/components/Popover/Popover.tsx
-var import_react60 = require("@floating-ui/react");
+var import_react61 = require("@floating-ui/react");
 var import_icons11 = require("@simplybusiness/icons");
 var import_classnames3 = __toESM(require("classnames"));
-var import_react61 = require("react");
+var import_react62 = require("react");
 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_react61.useRef)(null);
-  const [isOpen, setIsOpen] = (0, import_react61.useState)(false);
-  const { refs, floatingStyles, context } = (0, import_react60.useFloating)({
+  const arrowRef = (0, import_react62.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react62.useState)(false);
+  const { refs, floatingStyles, context } = (0, import_react61.useFloating)({
     open: isOpen,
     onOpenChange: setIsOpen,
-    whileElementsMounted: import_react60.autoUpdate,
+    whileElementsMounted: import_react61.autoUpdate,
     middleware: [
-      (0, import_react60.arrow)({
+      (0, import_react61.arrow)({
         element: arrowRef
       }),
-      (0, import_react60.offset)(OFFSET_FROM_CONTENT_DEFAULT),
-      (0, import_react60.shift)(),
-      (0, import_react60.flip)()
+      (0, import_react61.offset)(OFFSET_FROM_CONTENT_DEFAULT),
+      (0, import_react61.shift)(),
+      (0, import_react61.flip)()
     ]
   });
-  const dismiss = (0, import_react60.useDismiss)(context, {
+  const dismiss = (0, import_react61.useDismiss)(context, {
     bubbles: true,
     outsidePress: (event) => {
       const toggle = refs.reference.current;
@@ -3424,7 +3461,7 @@ var Popover = (props) => {
       return true;
     }
   });
-  const { getReferenceProps, getFloatingProps } = (0, import_react60.useInteractions)([dismiss]);
+  const { getReferenceProps, getFloatingProps } = (0, import_react61.useInteractions)([dismiss]);
   const containerClasses = (0, import_classnames3.default)(
     "mobius",
     "mobius-popover__container",
@@ -3439,7 +3476,7 @@ var Popover = (props) => {
     setIsOpen(true);
     onOpen?.();
   };
-  const triggerComponent = (0, import_react61.cloneElement)(trigger, {
+  const triggerComponent = (0, import_react62.cloneElement)(trigger, {
     ref: refs.setReference,
     className: (0, import_classnames3.default)(
       trigger.props.className,
@@ -3487,7 +3524,7 @@ var Popover = (props) => {
             /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "mobius-popover__body", children })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-            import_react60.FloatingArrow,
+            import_react61.FloatingArrow,
             {
               ref: arrowRef,
               context,
@@ -3503,7 +3540,7 @@ var Popover = (props) => {
 
 // src/components/Progress/Progress.tsx
 var import_dedupe38 = __toESM(require("classnames/dedupe"));
-var import_react62 = require("react");
+var import_react63 = require("react");
 var import_jsx_runtime50 = require("react/jsx-runtime");
 function warnAboutInvalidValues(value, minValue, maxValue) {
   if (minValue > maxValue) {
@@ -3545,9 +3582,9 @@ var getLabelComponent = (label, progressLabelId, showLabel) => {
 var DEFAULT_VALUE = 0;
 var DEFAULT_MIN_VALUE = 0;
 var DEFAULT_MAX_VALUE = 100;
-var Progress = (0, import_react62.forwardRef)((props, ref) => {
-  const progressId = (0, import_react62.useId)();
-  const progressLabelId = (0, import_react62.useId)();
+var Progress = (0, import_react63.forwardRef)((props, ref) => {
+  const progressId = (0, import_react63.useId)();
+  const progressLabelId = (0, import_react63.useId)();
   const {
     id,
     label,
@@ -3603,9 +3640,9 @@ Progress.displayName = "Progress";
 
 // src/components/Radio/Radio.tsx
 var import_dedupe39 = __toESM(require("classnames/dedupe"));
-var import_react63 = require("react");
+var import_react64 = require("react");
 var import_jsx_runtime51 = require("react/jsx-runtime");
-var Radio = (0, import_react63.forwardRef)(
+var Radio = (0, import_react64.forwardRef)(
   (props, ref) => {
     const {
       children,
@@ -3627,10 +3664,10 @@ var Radio = (0, import_react63.forwardRef)(
     const isMultiline = label && children;
     const isControlled = selected !== void 0;
     const isChecked = isControlled ? selected === value : defaultChecked;
-    const hasIconFirst = (0, import_react63.useMemo)(() => {
-      if (!children || import_react63.Children.count(children) === 0) return false;
-      const firstChild = import_react63.Children.toArray(children)[0];
-      if (!(0, import_react63.isValidElement)(firstChild)) return false;
+    const hasIconFirst = (0, import_react64.useMemo)(() => {
+      if (!children || import_react64.Children.count(children) === 0) return false;
+      const firstChild = import_react64.Children.toArray(children)[0];
+      if (!(0, import_react64.isValidElement)(firstChild)) return false;
       const props2 = firstChild.props;
       return "icon" in props2 && props2.icon !== void 0;
     }, [children]);
@@ -3697,7 +3734,7 @@ Radio.displayName = "Radio";
 
 // src/components/Radio/RadioGroup.tsx
 var import_dedupe40 = __toESM(require("classnames/dedupe"));
-var import_react64 = require("react");
+var import_react65 = require("react");
 var import_jsx_runtime52 = require("react/jsx-runtime");
 var getDefaultVal = (children, defaultValue) => {
   if (Array.isArray(children) && defaultValue) {
@@ -3707,7 +3744,7 @@ var getDefaultVal = (children, defaultValue) => {
   }
   return "";
 };
-var RadioGroup = (0, import_react64.forwardRef)((props, ref) => {
+var RadioGroup = (0, import_react65.forwardRef)((props, ref) => {
   const {
     label,
     isDisabled = false,
@@ -3726,16 +3763,12 @@ var RadioGroup = (0, import_react64.forwardRef)((props, ref) => {
     ...rest
   } = props;
   const defaultSelected = getDefaultVal(children, value || defaultValue);
-  const [selected, setSelected] = (0, import_react64.useState)(defaultSelected);
-  const selectedRef = (0, import_react64.useRef)(null);
-  (0, import_react64.useEffect)(() => {
+  const [selected, setSelected] = (0, import_react65.useState)(defaultSelected);
+  (0, import_react65.useEffect)(() => {
     if (value !== void 0) {
       setSelected(value);
     }
   }, [value]);
-  (0, import_react64.useEffect)(() => {
-    selectedRef.current?.focus();
-  });
   const validationClasses = useValidationClasses({
     validationState,
     isInvalid
@@ -3757,15 +3790,15 @@ var RadioGroup = (0, import_react64.forwardRef)((props, ref) => {
     [`--is-${orientation}`]: true
   });
   const labelClasses = (0, import_dedupe40.default)(radioClasses, validationClasses);
-  const errorMessageId = (0, import_react64.useId)();
-  const defaultNameAttrId = (0, import_react64.useId)();
+  const errorMessageId = (0, import_react65.useId)();
+  const defaultNameAttrId = (0, import_react65.useId)();
   const nameAttribute = name || defaultNameAttrId;
   const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
   const describedBy = spaceDelimitedList([
     shouldErrorMessageShow,
     props["aria-describedby"]
   ]);
-  const labelId = (0, import_react64.useId)();
+  const labelId = (0, import_react65.useId)();
   return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     "div",
     {
@@ -3784,10 +3817,9 @@ var RadioGroup = (0, import_react64.forwardRef)((props, ref) => {
       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_react64.Children.map(children, (child) => {
-          if ((0, import_react64.isValidElement)(child)) {
-            const props2 = child.props;
-            return (0, import_react64.cloneElement)(
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: radioWrapperClasses, children: import_react65.Children.map(children, (child) => {
+          if ((0, import_react65.isValidElement)(child)) {
+            return (0, import_react65.cloneElement)(
               child,
               {
                 orientation,
@@ -3798,8 +3830,7 @@ var RadioGroup = (0, import_react64.forwardRef)((props, ref) => {
                 setSelected,
                 isRequired,
                 "aria-describedby": describedBy,
-                onChange,
-                ref: props2.value === selected ? selectedRef : void 0
+                onChange
               }
             );
           }
@@ -3850,10 +3881,10 @@ Segment.displayName = "Segment";
 
 // src/components/Select/Select.tsx
 var import_dedupe43 = __toESM(require("classnames/dedupe"));
-var import_react65 = require("react");
+var import_react66 = require("react");
 var import_icons12 = require("@simplybusiness/icons");
 var import_jsx_runtime55 = require("react/jsx-runtime");
-var Select = (0, import_react65.forwardRef)((props, ref) => {
+var Select = (0, import_react66.forwardRef)((props, ref) => {
   const {
     label,
     onChange,
@@ -3894,7 +3925,7 @@ var Select = (0, import_react65.forwardRef)((props, ref) => {
     otherProps.className
   );
   const iconClasses = (0, import_dedupe43.default)("mobius-select__icon", sharedClasses);
-  const errorMessageId = (0, import_react65.useId)();
+  const errorMessageId = (0, import_react66.useId)();
   const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
   const describedBy = spaceDelimitedList([
     shouldErrorMessageShow,
@@ -3932,10 +3963,10 @@ Select.displayName = "Select";
 
 // src/components/Slider/Slider.tsx
 var import_dedupe44 = __toESM(require("classnames/dedupe"));
-var import_react67 = require("react");
+var import_react68 = require("react");
 
 // src/components/Slider/helpers.ts
-var import_react66 = require("react");
+var import_react67 = require("react");
 function numberFormatter(value, formatOptions, locale = navigator.languages?.[0] || "en-GB") {
   if (!formatOptions) {
     return value?.toString() || "";
@@ -3965,11 +3996,11 @@ var Slider = (props) => {
     formatOptions,
     isDisabled = false
   } = props;
-  const trackRef = (0, import_react67.useRef)(null);
-  const [currentValue, setCurrentValue] = (0, import_react67.useState)(
+  const trackRef = (0, import_react68.useRef)(null);
+  const [currentValue, setCurrentValue] = (0, import_react68.useState)(
     value || defaultValue || 0
   );
-  const [isDragging, setIsDraggging] = (0, import_react67.useState)(false);
+  const [isDragging, setIsDraggging] = (0, import_react68.useState)(false);
   const { labelProps, fieldProps } = useLabel({
     id,
     label,
@@ -4031,14 +4062,14 @@ var Slider = (props) => {
 };
 
 // src/components/SVG/SVG.tsx
-var import_react68 = require("react");
+var import_react69 = require("react");
 var import_dedupe45 = __toESM(require("classnames/dedupe"));
 var import_jsx_runtime57 = require("react/jsx-runtime");
-var SVG = (0, import_react68.forwardRef)(
+var SVG = (0, import_react69.forwardRef)(
   (props, ref) => {
     const { children, className, ...otherProps } = props;
     const classes = (0, import_dedupe45.default)("mobius", "mobius-svg", className);
-    const svgNode = import_react68.Children.only(children);
+    const svgNode = import_react69.Children.only(children);
     const { children: svgChildren, viewBox, xmlns } = svgNode.props;
     return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
       "svg",
@@ -4056,10 +4087,10 @@ var SVG = (0, import_react68.forwardRef)(
 SVG.displayName = "SVG";
 
 // src/components/Switch/Switch.tsx
-var import_react69 = require("react");
+var import_react70 = require("react");
 var import_dedupe46 = __toESM(require("classnames/dedupe"));
 var import_jsx_runtime58 = require("react/jsx-runtime");
-var Switch = (0, import_react69.forwardRef)((props, ref) => {
+var Switch = (0, import_react70.forwardRef)((props, ref) => {
   const {
     checked = false,
     className,
@@ -4067,8 +4098,8 @@ var Switch = (0, import_react69.forwardRef)((props, ref) => {
     isDisabled = false,
     ...otherProps
   } = props;
-  const [enabled, setEnabled] = (0, import_react69.useState)(checked);
-  (0, import_react69.useEffect)(() => {
+  const [enabled, setEnabled] = (0, import_react70.useState)(checked);
+  (0, import_react70.useEffect)(() => {
     setEnabled(checked);
   }, [checked]);
   const classes = (0, import_dedupe46.default)(
@@ -4105,10 +4136,10 @@ var Switch = (0, import_react69.forwardRef)((props, ref) => {
 Switch.displayName = "Switch";
 
 // src/components/Table/Table.tsx
-var import_react70 = require("react");
+var import_react71 = require("react");
 var import_dedupe47 = __toESM(require("classnames/dedupe"));
 var import_jsx_runtime59 = require("react/jsx-runtime");
-var Table = (0, import_react70.forwardRef)(
+var Table = (0, import_react71.forwardRef)(
   (props, ref) => {
     const classes = (0, import_dedupe47.default)("mobius", "mobius-table", props.className);
     return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("table", { ref, ...props, className: classes });
@@ -4117,40 +4148,40 @@ var Table = (0, import_react70.forwardRef)(
 Table.displayName = "Table";
 
 // src/components/Table/Head.tsx
-var import_react71 = require("react");
+var import_react72 = require("react");
 var import_dedupe48 = __toESM(require("classnames/dedupe"));
 var import_jsx_runtime60 = require("react/jsx-runtime");
-var Head = (0, import_react71.forwardRef)((props, ref) => {
+var Head = (0, import_react72.forwardRef)((props, ref) => {
   const classes = (0, import_dedupe48.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_react72 = require("react");
+var import_react73 = require("react");
 var import_dedupe49 = __toESM(require("classnames/dedupe"));
 var import_jsx_runtime61 = require("react/jsx-runtime");
-var Body = (0, import_react72.forwardRef)((props, ref) => {
+var Body = (0, import_react73.forwardRef)((props, ref) => {
   const classes = (0, import_dedupe49.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_react73 = require("react");
+var import_react74 = require("react");
 var import_dedupe50 = __toESM(require("classnames/dedupe"));
 var import_jsx_runtime62 = require("react/jsx-runtime");
-var Foot = (0, import_react73.forwardRef)((props, ref) => {
+var Foot = (0, import_react74.forwardRef)((props, ref) => {
   const classes = (0, import_dedupe50.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_react74 = require("react");
+var import_react75 = require("react");
 var import_dedupe51 = __toESM(require("classnames/dedupe"));
 var import_jsx_runtime63 = require("react/jsx-runtime");
-var Row = (0, import_react74.forwardRef)(
+var Row = (0, import_react75.forwardRef)(
   (props, ref) => {
     const classes = (0, import_dedupe51.default)("mobius", "mobius-table__row", props.className);
     return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("tr", { ref, ...props, className: classes });
@@ -4159,10 +4190,10 @@ var Row = (0, import_react74.forwardRef)(
 Row.displayName = "Table.Row";
 
 // src/components/Table/HeaderCell.tsx
-var import_react75 = require("react");
+var import_react76 = require("react");
 var import_dedupe52 = __toESM(require("classnames/dedupe"));
 var import_jsx_runtime64 = require("react/jsx-runtime");
-var HeaderCell = (0, import_react75.forwardRef)((props, ref) => {
+var HeaderCell = (0, import_react76.forwardRef)((props, ref) => {
   const classes = (0, import_dedupe52.default)(
     "mobius",
     "mobius-table__head-cell",
@@ -4173,10 +4204,10 @@ var HeaderCell = (0, import_react75.forwardRef)((props, ref) => {
 HeaderCell.displayName = "Table.HeaderCell";
 
 // src/components/Table/Cell.tsx
-var import_react76 = require("react");
+var import_react77 = require("react");
 var import_dedupe53 = __toESM(require("classnames/dedupe"));
 var import_jsx_runtime65 = require("react/jsx-runtime");
-var Cell = (0, import_react76.forwardRef)(
+var Cell = (0, import_react77.forwardRef)(
   (props, ref) => {
     const classes = (0, import_dedupe53.default)(
       "mobius",
@@ -4201,13 +4232,13 @@ Table2.displayName = "Table";
 
 // src/components/TextArea/TextArea.tsx
 var import_dedupe55 = __toESM(require("classnames/dedupe"));
-var import_react78 = require("react");
+var import_react79 = require("react");
 
 // src/components/TextAreaInput/TextAreaInput.tsx
 var import_dedupe54 = __toESM(require("classnames/dedupe"));
-var import_react77 = require("react");
+var import_react78 = require("react");
 var import_jsx_runtime66 = require("react/jsx-runtime");
-var TextAreaInput = (0, import_react77.forwardRef)((props, ref) => {
+var TextAreaInput = (0, import_react78.forwardRef)((props, ref) => {
   const { isSelected, isDisabled, isReadOnly, isRequired, ...otherProps } = props;
   const classes = (0, import_dedupe54.default)(
     "mobius",
@@ -4234,7 +4265,7 @@ TextAreaInput.displayName = "TextAreaInput";
 
 // src/components/TextArea/TextArea.tsx
 var import_jsx_runtime67 = require("react/jsx-runtime");
-var TextArea = (0, import_react78.forwardRef)((props, ref) => {
+var TextArea = (0, import_react79.forwardRef)((props, ref) => {
   const {
     isDisabled,
     className,
@@ -4279,10 +4310,10 @@ var TextArea = (0, import_react78.forwardRef)((props, ref) => {
 TextArea.displayName = "TextArea";
 
 // src/components/Title/Title.tsx
-var import_react79 = require("react");
+var import_react80 = require("react");
 var import_dedupe56 = __toESM(require("classnames/dedupe"));
 var import_jsx_runtime68 = require("react/jsx-runtime");
-var Title = (0, import_react79.forwardRef)(
+var Title = (0, import_react80.forwardRef)(
   (props, ref) => {
     const {
       elementType: Element = "div",
@@ -4304,7 +4335,7 @@ Title.displayName = "Title";
 
 // src/components/Trust/Trust.tsx
 var import_dedupe57 = __toESM(require("classnames/dedupe"));
-var import_react80 = require("react");
+var import_react81 = require("react");
 
 // src/components/Trust/constants.ts
 var REQUIRED_TRUSTPILOT_CLASS_NAME = "trustpilot-widget";
@@ -4363,7 +4394,7 @@ var TRUSTPILOT_WIDGET = {
 
 // src/components/Trust/Trust.tsx
 var import_jsx_runtime69 = require("react/jsx-runtime");
-var Trust = (0, import_react80.forwardRef)((props, ref) => {
+var Trust = (0, import_react81.forwardRef)((props, ref) => {
   const {
     elementType: Element = "div",
     variant,
@@ -4374,8 +4405,8 @@ var Trust = (0, import_react80.forwardRef)((props, ref) => {
     stars,
     className
   } = props;
-  const [isMounted, setIsMounted] = (0, import_react80.useState)(false);
-  const trustRef = (0, import_react80.useRef)(null);
+  const [isMounted, setIsMounted] = (0, import_react81.useState)(false);
+  const trustRef = (0, import_react81.useRef)(null);
   const {
     templateId,
     className: variantClassName,
@@ -4401,13 +4432,13 @@ var Trust = (0, import_react80.forwardRef)((props, ref) => {
     },
     className
   );
-  (0, import_react80.useEffect)(() => {
+  (0, import_react81.useEffect)(() => {
     const hasTrustpilotLoaded = trustRef.current && window?.Trustpilot && window?.Trustpilot.loadFromElement;
     if (isMounted && hasTrustpilotLoaded) {
       window.Trustpilot.loadFromElement(trustRef.current, true);
     }
   }, [isMounted]);
-  (0, import_react80.useEffect)(() => {
+  (0, import_react81.useEffect)(() => {
     setIsMounted(true);
   }, []);
   if (!isMounted) return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { style: styles });
@@ -4433,10 +4464,10 @@ var Trust = (0, import_react80.forwardRef)((props, ref) => {
 });
 
 // src/components/ExpandableText/ExpandableText.tsx
-var import_react81 = require("react");
+var import_react82 = require("react");
 var import_dedupe58 = __toESM(require("classnames/dedupe"));
 var import_jsx_runtime70 = require("react/jsx-runtime");
-var ExpandableText = (0, import_react81.forwardRef)((props, ref) => {
+var ExpandableText = (0, import_react82.forwardRef)((props, ref) => {
   const {
     text,
     maxLines = 3,
@@ -4449,14 +4480,14 @@ var ExpandableText = (0, import_react81.forwardRef)((props, ref) => {
     onToggle,
     ...otherProps
   } = props;
-  const [isExpanded, setIsExpanded] = (0, import_react81.useState)(false);
-  const [isCollapsed, setIsCollapsed] = (0, import_react81.useState)(false);
-  const textRef = (0, import_react81.useRef)(null);
+  const [isExpanded, setIsExpanded] = (0, import_react82.useState)(false);
+  const [isCollapsed, setIsCollapsed] = (0, import_react82.useState)(false);
+  const textRef = (0, import_react82.useRef)(null);
   const { down } = useBreakpoint();
-  const baseId = (0, import_react81.useId)();
+  const baseId = (0, import_react82.useId)();
   const expandButtonId = `expandable-text-expand-${baseId}`;
   const shouldCollapse = breakpoint ? down(breakpoint) : true;
-  (0, import_react81.useEffect)(() => {
+  (0, import_react82.useEffect)(() => {
     if (!shouldCollapse || !textRef.current) {
       setIsCollapsed(false);
       return;
@@ -4517,3 +4548,64 @@ var ExpandableText = (0, import_react81.forwardRef)((props, ref) => {
   );
 });
 ExpandableText.displayName = "ExpandableText";
+
+// src/components/MaskedField/MaskedField.tsx
+var import_react83 = require("react");
+var import_react_imask = require("react-imask");
+var import_jsx_runtime71 = require("react/jsx-runtime");
+var MaskedField = (0, import_react83.forwardRef)((props, ref) => {
+  const {
+    mask,
+    value,
+    defaultValue,
+    useMaskedValue = false,
+    onChange,
+    "aria-describedby": ariaDescribedBy,
+    "aria-label": ariaLabel,
+    ...textFieldProps
+  } = props;
+  const { ref: maskRef, value: maskedValue } = (0, import_react_imask.useIMask)(mask, {
+    defaultValue,
+    onAccept: (value2, maskRef2) => {
+      if (onChange) {
+        const valueToEmit = useMaskedValue ? value2 : maskRef2.unmaskedValue;
+        const syntheticEvent = {
+          target: {
+            value: valueToEmit,
+            name: textFieldProps.name
+          },
+          currentTarget: {
+            value: valueToEmit,
+            name: textFieldProps.name
+          }
+        };
+        onChange(syntheticEvent);
+      }
+    }
+  });
+  const inputRef = (node) => {
+    if (maskRef) {
+      maskRef.current = node;
+    }
+    if (ref) {
+      if (typeof ref === "function") {
+        ref(node);
+      } else {
+        ref.current = node;
+      }
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+    TextField,
+    {
+      ...textFieldProps,
+      ref: inputRef,
+      value: maskedValue,
+      onChange: () => {
+      },
+      "aria-describedby": ariaDescribedBy,
+      "aria-label": ariaLabel
+    }
+  );
+});
+MaskedField.displayName = "MaskedField";