@simplybusiness/mobius 10.1.2 → 10.3.0

package/dist/cjs/components/Combobox/index.js

@@ -219,6 +219,24 @@ var init_filterUndefinedProps = __esm({
   }
 });
 
+// src/utils/filterUnsetValues.ts
+var filterUnsetValues;
+var init_filterUnsetValues = __esm({
+  "src/utils/filterUnsetValues.ts"() {
+    "use strict";
+    filterUnsetValues = (props) => {
+      const filtered = {};
+      Object.keys(props).forEach((key) => {
+        const value = props[key];
+        if (value !== void 0 && value !== null && value !== "") {
+          filtered[key] = value;
+        }
+      });
+      return filtered;
+    };
+  }
+});
+
 // src/utils/getSpacingValue.ts
 var getSpacingValue;
 var init_getSpacingValue = __esm({
@@ -310,6 +328,7 @@ var init_utils = __esm({
     init_delay();
     init_excludeControls();
     init_filterUndefinedProps();
+    init_filterUnsetValues();
     init_getSpacingValue();
     init_mergeRefs();
     init_polyfill_tests();
@@ -1204,6 +1223,10 @@ var init_AddressLookup = __esm({
       );
       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();
@@ -1260,15 +1283,18 @@ var init_Text = __esm({
     import_Text = require("@simplybusiness/mobius/src/components/Text/Text.css");
     import_jsx_runtime8 = require("react/jsx-runtime");
     getElementType = (variant, elementType) => {
-      if (variant) {
-        return ["h1", "h2", "h3", "h4"].includes(variant) ? variant : "p";
+      if (elementType) {
+        return elementType;
       }
-      return elementType || "p";
+      if (variant && ["h1", "h2", "h3", "h4"].includes(variant)) {
+        return variant;
+      }
+      return "p";
     };
-    Text = ({ ref, elementType: Component = "p", ...props }) => {
+    Text = ({ ref, elementType, ...props }) => {
       const { variant, className, spacing, ...otherProps } = props;
-      const elementType = getElementType(variant, Component);
-      const variantType = variant || elementType;
+      const Element = getElementType(variant, elementType);
+      const variantType = variant || Element;
       const classes = (0, import_dedupe7.default)(
         "mobius",
         "mobius-text",
@@ -1276,7 +1302,7 @@ var init_Text = __esm({
         { [`--has-line-height-${spacing}`]: spacing },
         className
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Component, { ref, ...otherProps, className: classes });
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Element, { ref, ...otherProps, className: classes });
     };
     Text.displayName = "Text";
   }
@@ -1440,7 +1466,7 @@ var init_Box = __esm({
         ...otherProps
       } = props;
       const classes = (0, import_dedupe9.default)("mobius", "mobius-box", otherProps.className);
-      const styleProps = filterUndefinedProps({
+      const fromProps = filterUndefinedProps({
         padding: getSpacingValue(padding),
         paddingInline: getSpacingValue(paddingInline || paddingX),
         paddingBlock: getSpacingValue(paddingBlock || paddingY),
@@ -1453,8 +1479,11 @@ var init_Box = __esm({
         maxWidth,
         maxHeight,
         width,
-        height,
-        ...style
+        height
+      });
+      const styleProps = filterUndefinedProps({
+        ...fromProps,
+        ...style ? filterUnsetValues(style) : {}
       });
       return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Element, { ref, style: styleProps, ...otherProps, className: classes });
     };
@@ -2558,7 +2587,7 @@ var init_Grid = __esm({
     import_dedupe23 = __toESM(require("classnames/dedupe"));
     init_utils();
     import_jsx_runtime30 = require("react/jsx-runtime");
-    Grid = ({ ref: _ref, ...props }) => {
+    Grid = ({ ref, ...props }) => {
       const {
         columns = 12,
         gap,
@@ -2586,7 +2615,7 @@ var init_Grid = __esm({
         justifyItems,
         ...style
       });
-      return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { style: styles, className: classes, ...rest });
+      return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { ref, style: styles, className: classes, ...rest });
     };
     Grid.displayName = "Grid";
   }
@@ -2611,7 +2640,7 @@ var init_Item2 = __esm({
       {}
     );
     DEFAULT_SPAN = 12;
-    GridItem = ({ ref: _ref, ...props }) => {
+    GridItem = ({ ref, ...props }) => {
       const {
         breakpoint: { size: breakpointSize }
       } = useBreakpoint();
@@ -2637,7 +2666,7 @@ var init_Item2 = __esm({
         xxl
       });
       const [responsiveSpan, setResponsiveSpan] = (0, import_react22.useState)();
-      const classes = (0, import_dedupe24.default)("mobius-grid__item", className);
+      const classes = (0, import_dedupe24.default)("mobius", "mobius-grid__item", className);
       (0, import_react22.useEffect)(() => {
         setResponsiveSpan(breakpointMap[breakpointSize]);
       }, [breakpointSize, breakpointMap]);
@@ -2646,7 +2675,7 @@ var init_Item2 = __esm({
         alignSelf,
         justifySelf
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { style: { ...styles }, className: classes, ...rest });
+      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { ref, style: { ...styles }, className: classes, ...rest });
     };
     GridItem.displayName = "GridItem";
   }
@@ -2792,14 +2821,22 @@ var init_List = __esm({
         },
         otherProps.className
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Component, { ref, ...mappedProps, className: classes, children: import_react23.Children.map(children, (child) => {
-        if ((0, import_react23.isValidElement)(child)) {
-          return (0, import_react23.cloneElement)(child, {
-            parentIcon: icon
-          });
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        Component,
+        {
+          ref,
+          ...mappedProps,
+          className: classes,
+          children: import_react23.Children.map(children, (child) => {
+            if ((0, import_react23.isValidElement)(child)) {
+              return (0, import_react23.cloneElement)(child, {
+                parentIcon: icon
+              });
+            }
+            return child;
+          })
         }
-        return child;
-      }) });
+      );
     };
     List.displayName = "List";
   }
@@ -2970,7 +3007,10 @@ var init_ModalContext = __esm({
     ModalContext = (0, import_react24.createContext)({
       onClose: () => {
       },
-      closeLabel: void 0
+      closeLabel: void 0,
+      titleId: void 0,
+      setTitleId: () => {
+      }
     });
   }
 });
@@ -2983,54 +3023,68 @@ var init_useModal = __esm({
     import_react25 = require("react");
     init_ModalContext();
     useModal = () => {
-      const { onClose, closeLabel } = (0, import_react25.useContext)(ModalContext);
-      return { onClose, closeLabel };
+      const { onClose, closeLabel, titleId, setTitleId } = (0, import_react25.useContext)(ModalContext);
+      return { onClose, closeLabel, titleId, setTitleId };
     };
   }
 });
 
 // src/components/Modal/Header.tsx
-var import_icons9, import_jsx_runtime40, Header2;
+var import_react26, import_icons9, import_jsx_runtime40, Header2;
 var init_Header2 = __esm({
   "src/components/Modal/Header.tsx"() {
     "use strict";
+    import_react26 = require("react");
     import_icons9 = require("@simplybusiness/icons");
     init_Button2();
     init_Icon2();
     init_useModal();
     import_jsx_runtime40 = require("react/jsx-runtime");
     Header2 = ({ ref, children, ...otherProps }) => {
-      const { onClose, closeLabel } = useModal();
-      return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("header", { ref, ...otherProps, className: "mobius-modal__header", children: [
-        children,
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
-          Button,
-          {
-            "aria-label": "Close",
-            variant: "basic",
-            onPress: onClose,
-            className: "mobius-modal__close",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Icon, { icon: import_icons9.cross }),
-              " ",
-              closeLabel
-            ]
-          }
-        )
-      ] });
+      const { onClose, closeLabel, setTitleId } = useModal();
+      const titleId = (0, import_react26.useId)();
+      (0, import_react26.useEffect)(() => {
+        setTitleId(titleId);
+      }, [titleId, setTitleId]);
+      return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+        "header",
+        {
+          ref,
+          ...otherProps,
+          className: "mobius-modal__header",
+          id: titleId,
+          children: [
+            children,
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+              Button,
+              {
+                "aria-label": "Close",
+                variant: "basic",
+                onPress: onClose,
+                className: "mobius-modal__close",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Icon, { icon: import_icons9.cross }),
+                  " ",
+                  closeLabel
+                ]
+              }
+            )
+          ]
+        }
+      );
     };
     Header2.displayName = "Header";
   }
 });
 
 // src/components/Modal/Modal.tsx
-var import_dedupe32, import_react26, import_Modal, import_jsx_runtime41, TRANSITION_CSS_VARIABLE2, Modal;
+var import_dedupe32, import_react27, import_Modal, import_jsx_runtime41, TRANSITION_CSS_VARIABLE2, Modal;
 var init_Modal = __esm({
   "src/components/Modal/Modal.tsx"() {
     "use strict";
     "use client";
     import_dedupe32 = __toESM(require("classnames/dedupe"));
-    import_react26 = require("react");
+    import_react27 = require("react");
     init_hooks();
     init_utils();
     init_polyfill_tests();
@@ -3050,11 +3104,11 @@ var init_Modal = __esm({
         animation,
         ...rest
       } = props;
-      const [shouldTransition, setShouldTransition] = (0, import_react26.useState)(false);
-      (0, import_react26.useEffect)(() => {
+      const [shouldTransition, setShouldTransition] = (0, import_react27.useState)(false);
+      (0, import_react27.useEffect)(() => {
         setShouldTransition(supportsDialog());
       }, []);
-      const dialogRef = (0, import_react26.useRef)(null);
+      const dialogRef = (0, import_react27.useRef)(null);
       const { close } = useDialog({
         ref: dialogRef,
         isOpen,
@@ -3078,12 +3132,18 @@ var init_Modal = __esm({
         },
         className
       );
-      const contextValue = (0, import_react26.useMemo)(
+      const [titleId, setTitleId] = (0, import_react27.useState)(void 0);
+      const handleSetTitleId = (0, import_react27.useCallback)((id) => {
+        setTitleId(id);
+      }, []);
+      const contextValue = (0, import_react27.useMemo)(
         () => ({
           onClose: close,
-          closeLabel
+          closeLabel,
+          titleId,
+          setTitleId: handleSetTitleId
         }),
-        [close, closeLabel]
+        [close, closeLabel, titleId, handleSetTitleId]
       );
       return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
         "dialog",
@@ -3091,6 +3151,7 @@ var init_Modal = __esm({
           ref: mergeRefs([dialogRef, ref]),
           onCancel: close,
           className: modalClasses,
+          "aria-labelledby": titleId,
           ...rest,
           children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ModalContext.Provider, { value: contextValue, children })
         }
@@ -3117,13 +3178,13 @@ var init_Modal2 = __esm({
 });
 
 // src/components/NumberField/NumberField.tsx
-var import_dedupe33, import_react27, import_NumberField, import_jsx_runtime42, NumberField;
+var import_dedupe33, import_react28, import_NumberField, import_jsx_runtime42, NumberField;
 var init_NumberField = __esm({
   "src/components/NumberField/NumberField.tsx"() {
     "use strict";
     "use client";
     import_dedupe33 = __toESM(require("classnames/dedupe"));
-    import_react27 = require("react");
+    import_react28 = require("react");
     init_TextField2();
     import_NumberField = require("@simplybusiness/mobius/src/components/NumberField/NumberField.css");
     import_jsx_runtime42 = require("react/jsx-runtime");
@@ -3142,9 +3203,9 @@ var init_NumberField = __esm({
         onBlur: customOnBlur,
         ...rest
       } = otherProps;
-      const focusedInputRef = (0, import_react27.useRef)(null);
-      const wheelHandler = (0, import_react27.useCallback)((ev) => ev.preventDefault(), []);
-      (0, import_react27.useEffect)(() => {
+      const focusedInputRef = (0, import_react28.useRef)(null);
+      const wheelHandler = (0, import_react28.useCallback)((ev) => ev.preventDefault(), []);
+      (0, import_react28.useEffect)(() => {
         return () => {
           focusedInputRef.current?.removeEventListener("wheel", wheelHandler);
           focusedInputRef.current = null;
@@ -3276,13 +3337,13 @@ var init_ShowHideButton = __esm({
 });
 
 // src/components/PasswordField/PasswordField.tsx
-var import_dedupe34, import_react28, import_PasswordField, import_jsx_runtime45, PasswordField;
+var import_dedupe34, import_react29, import_PasswordField, import_jsx_runtime45, PasswordField;
 var init_PasswordField = __esm({
   "src/components/PasswordField/PasswordField.tsx"() {
     "use strict";
     "use client";
     import_dedupe34 = __toESM(require("classnames/dedupe"));
-    import_react28 = require("react");
+    import_react29 = require("react");
     init_mergeRefs();
     init_TextField2();
     init_ShowHideButton();
@@ -3294,10 +3355,10 @@ var init_PasswordField = __esm({
       autoComplete = "current-password",
       ...props
     }) => {
-      const [show, setShow] = (0, import_react28.useState)(false);
+      const [show, setShow] = (0, import_react29.useState)(false);
       const type = show ? "text" : "password";
       const classes = (0, import_dedupe34.default)("mobius-password-field", className);
-      const localRef = (0, import_react28.useRef)(null);
+      const localRef = (0, import_react29.useRef)(null);
       const handleShowHideButtonClick = () => {
         const selectionStart = localRef.current?.selectionStart;
         const selectionEnd = localRef.current?.selectionEnd;
@@ -3334,14 +3395,14 @@ var init_PasswordField2 = __esm({
 });
 
 // src/components/Popover/Popover.tsx
-var import_react29, import_icons11, import_dedupe35, import_react30, import_mobius_hooks4, import_Popover, import_jsx_runtime46;
+var import_react30, import_icons11, import_dedupe35, import_react31, import_mobius_hooks4, import_Popover, import_jsx_runtime46;
 var init_Popover = __esm({
   "src/components/Popover/Popover.tsx"() {
     "use strict";
-    import_react29 = require("@floating-ui/react");
+    import_react30 = require("@floating-ui/react");
     import_icons11 = require("@simplybusiness/icons");
     import_dedupe35 = __toESM(require("classnames/dedupe"));
-    import_react30 = require("react");
+    import_react31 = require("react");
     import_mobius_hooks4 = require("@simplybusiness/mobius-hooks");
     import_Popover = require("@simplybusiness/mobius/src/components/Popover/Popover.css");
     import_jsx_runtime46 = require("react/jsx-runtime");
@@ -3368,13 +3429,13 @@ function warnAboutInvalidValues(value, minValue, maxValue) {
     console.warn("Progress value is greater than maxValue");
   }
 }
-var import_dedupe36, import_react31, import_Progress, import_jsx_runtime47, sanitizedValue, getLabelComponent, DEFAULT_VALUE, DEFAULT_MIN_VALUE, DEFAULT_MAX_VALUE, Progress;
+var import_dedupe36, import_react32, import_Progress, import_jsx_runtime47, sanitizedValue, getLabelComponent, DEFAULT_VALUE, DEFAULT_MIN_VALUE, DEFAULT_MAX_VALUE, Progress;
 var init_Progress = __esm({
   "src/components/Progress/Progress.tsx"() {
     "use strict";
     "use client";
     import_dedupe36 = __toESM(require("classnames/dedupe"));
-    import_react31 = require("react");
+    import_react32 = require("react");
     init_Label2();
     init_VisuallyHidden2();
     import_Progress = require("@simplybusiness/mobius/src/components/Progress/Progress.css");
@@ -3411,8 +3472,8 @@ var init_Progress = __esm({
     DEFAULT_MIN_VALUE = 0;
     DEFAULT_MAX_VALUE = 100;
     Progress = ({ ref, ...props }) => {
-      const progressId = (0, import_react31.useId)();
-      const progressLabelId = (0, import_react31.useId)();
+      const progressId = (0, import_react32.useId)();
+      const progressLabelId = (0, import_react32.useId)();
       const {
         id,
         label,
@@ -3477,13 +3538,13 @@ var init_Progress2 = __esm({
 });
 
 // src/components/Radio/Radio.tsx
-var import_dedupe37, import_react32, import_Radio, import_jsx_runtime48, Radio;
+var import_dedupe37, import_react33, import_Radio, import_jsx_runtime48, Radio;
 var init_Radio = __esm({
   "src/components/Radio/Radio.tsx"() {
     "use strict";
     "use client";
     import_dedupe37 = __toESM(require("classnames/dedupe"));
-    import_react32 = require("react");
+    import_react33 = require("react");
     init_ErrorMessage2();
     init_Label2();
     import_Radio = require("@simplybusiness/mobius/src/components/Radio/Radio.css");
@@ -3511,19 +3572,19 @@ var init_Radio = __esm({
       const isMultiline = label && children;
       const isControlled = selected !== void 0;
       const isChecked = isControlled ? selected === value : defaultChecked;
-      const contentRef = (0, import_react32.useRef)(null);
-      const prevOverflowRef = (0, import_react32.useRef)({
+      const contentRef = (0, import_react33.useRef)(null);
+      const prevOverflowRef = (0, import_react33.useRef)({
         vertical: false,
         horizontal: false
       });
-      const hasIconFirst = (0, import_react32.useMemo)(() => {
-        if (!children || import_react32.Children.count(children) === 0) return false;
-        const firstChild = import_react32.Children.toArray(children)[0];
-        if (!(0, import_react32.isValidElement)(firstChild)) return false;
+      const hasIconFirst = (0, import_react33.useMemo)(() => {
+        if (!children || import_react33.Children.count(children) === 0) return false;
+        const firstChild = import_react33.Children.toArray(children)[0];
+        if (!(0, import_react33.isValidElement)(firstChild)) return false;
         const props2 = firstChild.props;
         return "icon" in props2 && props2.icon !== void 0;
       }, [children]);
-      (0, import_react32.useLayoutEffect)(() => {
+      (0, import_react33.useLayoutEffect)(() => {
         if (!contentRef.current || !onOverflow) return;
         if (orientation === "vertical") {
           return;
@@ -3604,13 +3665,13 @@ var init_Radio = __esm({
 });
 
 // src/components/Radio/RadioGroup.tsx
-var import_dedupe38, import_react33, import_jsx_runtime49, getDefaultVal, RadioGroup;
+var import_dedupe38, import_react34, import_jsx_runtime49, getDefaultVal, RadioGroup;
 var init_RadioGroup = __esm({
   "src/components/Radio/RadioGroup.tsx"() {
     "use strict";
     "use client";
     import_dedupe38 = __toESM(require("classnames/dedupe"));
-    import_react33 = require("react");
+    import_react34 = require("react");
     init_hooks();
     init_spaceDelimitedList();
     init_ErrorMessage2();
@@ -3644,15 +3705,15 @@ var init_RadioGroup = __esm({
         ...rest
       } = props;
       const defaultSelected = getDefaultVal(children, value || defaultValue);
-      const [selected, setSelected] = (0, import_react33.useState)(defaultSelected);
-      const overflowsRef = (0, import_react33.useRef)({});
-      const [hasOverflow, setHasOverflow] = (0, import_react33.useState)(false);
-      (0, import_react33.useEffect)(() => {
+      const [selected, setSelected] = (0, import_react34.useState)(defaultSelected);
+      const overflowsRef = (0, import_react34.useRef)({});
+      const [hasOverflow, setHasOverflow] = (0, import_react34.useState)(false);
+      (0, import_react34.useEffect)(() => {
         if (value !== void 0) {
           setSelected(value);
         }
       }, [value]);
-      const handleOverflow = (0, import_react33.useCallback)(
+      const handleOverflow = (0, import_react34.useCallback)(
         (radioValue, overflow) => {
           overflowsRef.current = {
             ...overflowsRef.current,
@@ -3686,15 +3747,15 @@ var init_RadioGroup = __esm({
         [`--is-${effectiveOrientation}`]: true
       });
       const labelClasses = (0, import_dedupe38.default)(radioClasses, validationClasses);
-      const errorMessageId = (0, import_react33.useId)();
-      const defaultNameAttrId = (0, import_react33.useId)();
+      const errorMessageId = (0, import_react34.useId)();
+      const defaultNameAttrId = (0, import_react34.useId)();
       const nameAttribute = name || defaultNameAttrId;
       const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
       const describedBy = spaceDelimitedList([
         shouldErrorMessageShow,
         props["aria-describedby"]
       ]);
-      const labelId = (0, import_react33.useId)();
+      const labelId = (0, import_react34.useId)();
       return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
         "div",
         {
@@ -3713,10 +3774,10 @@ var init_RadioGroup = __esm({
           role: "radiogroup",
           children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Stack, { gap: "xs", children: [
             label && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Label, { htmlFor: name, id: labelId, className: labelClasses, children: label }),
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: radioWrapperClasses, children: import_react33.Children.map(children, (child) => {
-              if ((0, import_react33.isValidElement)(child)) {
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: radioWrapperClasses, children: import_react34.Children.map(children, (child) => {
+              if ((0, import_react34.isValidElement)(child)) {
                 const childValue = child.props.value;
-                return (0, import_react33.cloneElement)(
+                return (0, import_react34.cloneElement)(
                   child,
                   {
                     orientation: effectiveOrientation,
@@ -3783,7 +3844,7 @@ var init_Segment = __esm({
     import_dedupe40 = __toESM(require("classnames/dedupe"));
     import_Segment = require("@simplybusiness/mobius/src/components/Segment/Segment.css");
     import_jsx_runtime51 = require("react/jsx-runtime");
-    Segment = (props) => {
+    Segment = ({ ref, ...props }) => {
       const { heading, children, colour, inverted, className, ...rest } = props;
       const classes = (0, import_dedupe40.default)(
         "mobius",
@@ -3792,7 +3853,7 @@ var init_Segment = __esm({
         { inverted },
         className
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: classes, ...rest, children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { ref, className: classes, ...rest, children: [
         heading && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "mobius-segment__heading", children: heading }),
         children
       ] });
@@ -3811,14 +3872,14 @@ var init_Segment2 = __esm({
 });
 
 // src/components/Select/Select.tsx
-var import_icons12, import_dedupe41, import_react34, import_Select, import_jsx_runtime52, Select;
+var import_icons12, import_dedupe41, import_react35, import_Select, import_jsx_runtime52, Select;
 var init_Select = __esm({
   "src/components/Select/Select.tsx"() {
     "use strict";
     "use client";
     import_icons12 = require("@simplybusiness/icons");
     import_dedupe41 = __toESM(require("classnames/dedupe"));
-    import_react34 = require("react");
+    import_react35 = require("react");
     init_hooks();
     init_useLabel2();
     init_spaceDelimitedList();
@@ -3865,7 +3926,7 @@ var init_Select = __esm({
         otherProps.className
       );
       const iconClasses = (0, import_dedupe41.default)("mobius-select__icon", sharedClasses);
-      const errorMessageId = (0, import_react34.useId)();
+      const errorMessageId = (0, import_react35.useId)();
       const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
       const describedBy = spaceDelimitedList([
         shouldErrorMessageShow,
@@ -3913,13 +3974,13 @@ var init_Select2 = __esm({
 });
 
 // src/components/Slider/Slider.tsx
-var import_dedupe42, import_react35, import_Slider, import_jsx_runtime53;
+var import_dedupe42, import_react36, import_Slider, import_jsx_runtime53;
 var init_Slider = __esm({
   "src/components/Slider/Slider.tsx"() {
     "use strict";
     "use client";
     import_dedupe42 = __toESM(require("classnames/dedupe"));
-    import_react35 = require("react");
+    import_react36 = require("react");
     import_Slider = require("@simplybusiness/mobius/src/components/Slider/Slider.css");
     import_jsx_runtime53 = require("react/jsx-runtime");
   }
@@ -3934,17 +3995,17 @@ var init_Slider2 = __esm({
 });
 
 // src/components/SVG/SVG.tsx
-var import_react36, import_dedupe43, import_jsx_runtime54, SVG;
+var import_react37, import_dedupe43, import_jsx_runtime54, SVG;
 var init_SVG = __esm({
   "src/components/SVG/SVG.tsx"() {
     "use strict";
-    import_react36 = require("react");
+    import_react37 = require("react");
     import_dedupe43 = __toESM(require("classnames/dedupe"));
     import_jsx_runtime54 = require("react/jsx-runtime");
     SVG = ({ ref, ...props }) => {
       const { children, className, ...otherProps } = props;
       const classes = (0, import_dedupe43.default)("mobius", "mobius-svg", className);
-      const svgNode = import_react36.Children.only(children);
+      const svgNode = import_react37.Children.only(children);
       const { children: svgChildren, viewBox, xmlns } = svgNode.props;
       return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
         "svg",
@@ -3971,12 +4032,12 @@ var init_SVG2 = __esm({
 });
 
 // src/components/Switch/Switch.tsx
-var import_react37, import_dedupe44, import_Switch, import_jsx_runtime55, Switch;
+var import_react38, import_dedupe44, import_Switch, import_jsx_runtime55, Switch;
 var init_Switch = __esm({
   "src/components/Switch/Switch.tsx"() {
     "use strict";
     "use client";
-    import_react37 = require("react");
+    import_react38 = require("react");
     import_dedupe44 = __toESM(require("classnames/dedupe"));
     init_VisuallyHidden2();
     import_Switch = require("@simplybusiness/mobius/src/components/Switch/Switch.css");
@@ -3989,8 +4050,8 @@ var init_Switch = __esm({
         isDisabled = false,
         ...otherProps
       } = props;
-      const [enabled, setEnabled] = (0, import_react37.useState)(checked);
-      (0, import_react37.useEffect)(() => {
+      const [enabled, setEnabled] = (0, import_react38.useState)(checked);
+      (0, import_react38.useEffect)(() => {
         setEnabled(checked);
       }, [checked]);
       const classes = (0, import_dedupe44.default)(
@@ -4119,13 +4180,13 @@ var init_HeaderCell = __esm({
     "use strict";
     import_dedupe50 = __toESM(require("classnames/dedupe"));
     import_jsx_runtime61 = require("react/jsx-runtime");
-    HeaderCell = ({ ref, ...props }) => {
+    HeaderCell = ({ ref, scope = "col", ...props }) => {
       const classes = (0, import_dedupe50.default)(
         "mobius",
         "mobius-table__head-cell",
         props.className
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("th", { ...props, ref, className: classes });
+      return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("th", { ...props, ref, scope, className: classes });
     };
     HeaderCell.displayName = "Table.HeaderCell";
   }
@@ -4330,12 +4391,12 @@ var init_Toast = __esm({
 });
 
 // src/components/Trust/Trust.tsx
-var import_dedupe55, import_react38, import_jsx_runtime66;
+var import_dedupe55, import_react39, import_jsx_runtime66;
 var init_Trust = __esm({
   "src/components/Trust/Trust.tsx"() {
     "use strict";
     import_dedupe55 = __toESM(require("classnames/dedupe"));
-    import_react38 = require("react");
+    import_react39 = require("react");
     import_jsx_runtime66 = require("react/jsx-runtime");
   }
 });
@@ -4357,13 +4418,13 @@ var init_Trust2 = __esm({
 });
 
 // src/components/ExpandableText/ExpandableText.tsx
-var import_dedupe56, import_react39, import_ExpandableText, import_jsx_runtime67, ExpandableText;
+var import_dedupe56, import_react40, import_ExpandableText, import_jsx_runtime67, ExpandableText;
 var init_ExpandableText = __esm({
   "src/components/ExpandableText/ExpandableText.tsx"() {
     "use strict";
     "use client";
     import_dedupe56 = __toESM(require("classnames/dedupe"));
-    import_react39 = require("react");
+    import_react40 = require("react");
     init_src();
     import_ExpandableText = require("@simplybusiness/mobius/src/components/ExpandableText/ExpandableText.css");
     import_jsx_runtime67 = require("react/jsx-runtime");
@@ -4380,14 +4441,14 @@ var init_ExpandableText = __esm({
         onToggle,
         ...otherProps
       } = props;
-      const [isExpanded, setIsExpanded] = (0, import_react39.useState)(false);
-      const [isCollapsed, setIsCollapsed] = (0, import_react39.useState)(false);
-      const textRef = (0, import_react39.useRef)(null);
+      const [isExpanded, setIsExpanded] = (0, import_react40.useState)(false);
+      const [isCollapsed, setIsCollapsed] = (0, import_react40.useState)(false);
+      const textRef = (0, import_react40.useRef)(null);
       const { down } = useBreakpoint();
-      const baseId = (0, import_react39.useId)();
+      const baseId = (0, import_react40.useId)();
       const expandButtonId = `expandable-text-expand-${baseId}`;
       const shouldCollapse = breakpoint ? down(breakpoint) : true;
-      (0, import_react39.useEffect)(() => {
+      (0, import_react40.useEffect)(() => {
         if (!shouldCollapse || !textRef.current) {
           setIsCollapsed(false);
           return;
@@ -4464,17 +4525,17 @@ var MaskedField_exports = {};
 __export(MaskedField_exports, {
   MaskedField: () => MaskedField
 });
-var import_react40, import_react_imask, import_jsx_runtime68, useAcceptHandler, useCombinedRef, useBlurHandler, ControlledMaskedField, UncontrolledMaskedField, MaskedField;
+var import_react41, import_react_imask, import_jsx_runtime68, useAcceptHandler, useCombinedRef, useBlurHandler, ControlledMaskedField, UncontrolledMaskedField, MaskedField;
 var init_MaskedField = __esm({
   "src/components/MaskedField/MaskedField.tsx"() {
     "use strict";
     "use client";
-    import_react40 = require("react");
+    import_react41 = require("react");
     import_react_imask = require("react-imask");
     init_TextField2();
     import_jsx_runtime68 = require("react/jsx-runtime");
     useAcceptHandler = (onChange, useMaskedValue, name) => {
-      return (0, import_react40.useCallback)(
+      return (0, import_react41.useCallback)(
         (maskedValue, maskInstance) => {
           if (!onChange) {
             return;
@@ -4490,7 +4551,7 @@ var init_MaskedField = __esm({
       );
     };
     useCombinedRef = (imaskRef, forwardedRef) => {
-      return (0, import_react40.useCallback)(
+      return (0, import_react41.useCallback)(
         (element) => {
           imaskRef.current = element;
           if (typeof forwardedRef === "function") {
@@ -4503,7 +4564,7 @@ var init_MaskedField = __esm({
       );
     };
     useBlurHandler = (onBlur, maskRef, useMaskedValue, name) => {
-      return (0, import_react40.useCallback)(
+      return (0, import_react41.useCallback)(
         (event) => {
           if (!onBlur || !maskRef.current) {
             return;
@@ -4533,7 +4594,7 @@ var init_MaskedField = __esm({
       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_react40.useEffect)(() => {
+      (0, import_react41.useEffect)(() => {
         if (!maskRef.current) {
           return;
         }
@@ -4803,15 +4864,15 @@ var init_ErrorMessage2 = __esm({
 });
 
 // src/components/TextField/adornmentWithClassName.ts
-var import_dedupe58, import_react41, adornmentWithClassName;
+var import_dedupe58, import_react42, adornmentWithClassName;
 var init_adornmentWithClassName = __esm({
   "src/components/TextField/adornmentWithClassName.ts"() {
     "use strict";
     import_dedupe58 = __toESM(require("classnames/dedupe"));
-    import_react41 = require("react");
+    import_react42 = require("react");
     adornmentWithClassName = (component, validationClasses, className) => {
       if (!component) return null;
-      return (0, import_react41.cloneElement)(component, {
+      return (0, import_react42.cloneElement)(component, {
         className: (0, import_dedupe58.default)(
           component.props.className,
           validationClasses,
@@ -4971,11 +5032,11 @@ var init_utils3 = __esm({
 });
 
 // src/components/Combobox/Option.tsx
-var import_react42, import_dedupe60, import_jsx_runtime72, Option2;
+var import_react43, import_dedupe60, import_jsx_runtime72, Option2;
 var init_Option3 = __esm({
   "src/components/Combobox/Option.tsx"() {
     "use strict";
-    import_react42 = require("react");
+    import_react43 = require("react");
     import_dedupe60 = __toESM(require("classnames/dedupe"));
     init_utils3();
     import_jsx_runtime72 = require("react/jsx-runtime");
@@ -4987,13 +5048,13 @@ var init_Option3 = __esm({
       optionTestIdPrefix,
       id
     }) => {
-      const optionRef = (0, import_react42.useRef)(null);
+      const optionRef = (0, import_react43.useRef)(null);
       const optionValue = getOptionValue(option) || "";
       const testId = buildOptionTestId(
         optionTestIdPrefix || "combobox-option",
         optionValue
       );
-      (0, import_react42.useEffect)(() => {
+      (0, import_react43.useEffect)(() => {
         if (isHighlighted && optionRef.current && optionRef.current.scrollIntoView) {
           optionRef.current.scrollIntoView({ block: "nearest" });
         }
@@ -5109,10 +5170,10 @@ var init_Listbox = __esm({
 
 // src/components/Combobox/useComboboxHighlight.tsx
 function useComboboxHighlight(options) {
-  const [highlightedIndex, setHighlightedIndex] = (0, import_react43.useState)(
+  const [highlightedIndex, setHighlightedIndex] = (0, import_react44.useState)(
     options && options.length ? 0 : -1
   );
-  const [highlightedGroupIndex, setHighlightedGroupIndex] = (0, import_react43.useState)(0);
+  const [highlightedGroupIndex, setHighlightedGroupIndex] = (0, import_react44.useState)(0);
   function highlightNextOption() {
     const isGroup = isOptionGroup(options);
     if (!options) {
@@ -5188,11 +5249,11 @@ function useComboboxHighlight(options) {
     clearHighlight
   };
 }
-var import_react43;
+var import_react44;
 var init_useComboboxHighlight = __esm({
   "src/components/Combobox/useComboboxHighlight.tsx"() {
     "use strict";
-    import_react43 = require("react");
+    import_react44 = require("react");
     init_utils3();
   }
 });
@@ -5207,19 +5268,19 @@ function useComboboxOptions({
   skipNextDebounceRef,
   onSearched
 }) {
-  const [filteredOptions, setFilteredOptions] = (0, import_react44.useState)(void 0);
+  const [filteredOptions, setFilteredOptions] = (0, import_react45.useState)(void 0);
   const debouncedInputValue = (0, import_mobius_hooks5.useDebouncedValue)(
     inputValue,
     // Don't debounce synchronous options
     options ? 0 : delay
   );
-  const [isLoading, setIsLoading] = (0, import_react44.useState)(false);
-  const [error3, setError] = (0, import_react44.useState)(null);
-  const asyncOptionsRef = (0, import_react44.useRef)(asyncOptions);
+  const [isLoading, setIsLoading] = (0, import_react45.useState)(false);
+  const [error3, setError] = (0, import_react45.useState)(null);
+  const asyncOptionsRef = (0, import_react45.useRef)(asyncOptions);
   asyncOptionsRef.current = asyncOptions;
-  const onSearchedRef = (0, import_react44.useRef)(onSearched);
+  const onSearchedRef = (0, import_react45.useRef)(onSearched);
   onSearchedRef.current = onSearched;
-  (0, import_react44.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     const controller = new AbortController();
     const { signal } = controller;
     const fetchOptions = async () => {
@@ -5277,24 +5338,24 @@ function useComboboxOptions({
     isError: error3 != null
   };
 }
-var import_mobius_hooks5, import_react44;
+var import_mobius_hooks5, import_react45;
 var init_useComboboxOptions = __esm({
   "src/components/Combobox/useComboboxOptions.ts"() {
     "use strict";
     import_mobius_hooks5 = require("@simplybusiness/mobius-hooks");
-    import_react44 = require("react");
+    import_react45 = require("react");
     init_utils3();
   }
 });
 
 // src/components/Combobox/Combobox.tsx
-var import_mobius_hooks6, import_dedupe62, import_react45, import_Combobox2, import_jsx_runtime74, ComboboxInner, Combobox;
+var import_mobius_hooks6, import_dedupe62, import_react46, import_Combobox2, import_jsx_runtime74, ComboboxInner, Combobox;
 var init_Combobox = __esm({
   "src/components/Combobox/Combobox.tsx"() {
     "use strict";
     import_mobius_hooks6 = require("@simplybusiness/mobius-hooks");
     import_dedupe62 = __toESM(require("classnames/dedupe"));
-    import_react45 = require("react");
+    import_react46 = require("react");
     init_hooks();
     init_TextField2();
     init_VisuallyHidden2();
@@ -5329,11 +5390,11 @@ var init_Combobox = __esm({
         errorMessage,
         ...otherProps
       } = props;
-      const skipNextDebounceRef = (0, import_react45.useRef)(false);
-      const fallbackRef = (0, import_react45.useRef)(null);
-      const [inputValue, setInputValue] = (0, import_react45.useState)(defaultValue || "");
-      const [isOpen, setIsOpen] = (0, import_react45.useState)(false);
-      const [isChanging, setIsChanging] = (0, import_react45.useState)(false);
+      const skipNextDebounceRef = (0, import_react46.useRef)(false);
+      const fallbackRef = (0, import_react46.useRef)(null);
+      const [inputValue, setInputValue] = (0, import_react46.useState)(defaultValue || "");
+      const [isOpen, setIsOpen] = (0, import_react46.useState)(false);
+      const [isChanging, setIsChanging] = (0, import_react46.useState)(false);
       const { filteredOptions, updateFilteredOptions, isLoading, error: error3 } = useComboboxOptions({
         options,
         asyncOptions,
@@ -5342,7 +5403,7 @@ var init_Combobox = __esm({
         minSearchLength,
         skipNextDebounceRef
       });
-      const [validationError, setValidationError] = (0, import_react45.useState)(
+      const [validationError, setValidationError] = (0, import_react46.useState)(
         error3?.message || errorMessage
       );
       const {
@@ -5355,14 +5416,14 @@ var init_Combobox = __esm({
         clearHighlight
       } = useComboboxHighlight(filteredOptions);
       const inputRef = ref || fallbackRef;
-      const listboxId = (0, import_react45.useId)();
-      const statusId = (0, import_react45.useId)();
-      const blurTimeoutRef = (0, import_react45.useRef)(null);
-      const userInteractedRef = (0, import_react45.useRef)(false);
-      const justSelectedRef = (0, import_react45.useRef)(false);
+      const listboxId = (0, import_react46.useId)();
+      const statusId = (0, import_react46.useId)();
+      const blurTimeoutRef = (0, import_react46.useRef)(null);
+      const userInteractedRef = (0, import_react46.useRef)(false);
+      const justSelectedRef = (0, import_react46.useRef)(false);
       const { down } = useBreakpoint();
       const isMobile = down("md");
-      (0, import_react45.useEffect)(() => {
+      (0, import_react46.useEffect)(() => {
         setValidationError(error3?.message || errorMessage);
       }, [error3, errorMessage]);
       const getEmptyValue = () => {
@@ -5391,7 +5452,7 @@ var init_Combobox = __esm({
           justSelectedRef.current = false;
         }
       };
-      (0, import_react45.useEffect)(() => {
+      (0, import_react46.useEffect)(() => {
         if (!inputRef || typeof inputRef === "function") return;
         const inputElement = inputRef.current;
         if (!inputElement) return;
@@ -5544,12 +5605,12 @@ var init_Combobox = __esm({
           default:
         }
       };
-      (0, import_react45.useEffect)(() => {
+      (0, import_react46.useEffect)(() => {
         if (value) {
           setInputValue(value);
         }
       }, [value]);
-      (0, import_react45.useEffect)(() => {
+      (0, import_react46.useEffect)(() => {
         if (asyncOptions && isChanging) {
           setIsOpen(!!filteredOptions && filteredOptions.length > 0);
         }