@simplybusiness/mobius 10.2.0 → 10.3.1

package/dist/cjs/components/index.js

@@ -75,6 +75,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({
@@ -166,6 +184,7 @@ var init_utils = __esm({
     init_delay();
     init_excludeControls();
     init_filterUndefinedProps();
+    init_filterUnsetValues();
     init_getSpacingValue();
     init_mergeRefs();
     init_polyfill_tests();
@@ -2408,15 +2427,18 @@ var init_Text = __esm({
     import_Text = require("@simplybusiness/mobius/src/components/Text/Text.css");
     import_jsx_runtime16 = require("react/jsx-runtime");
     getElementType = (variant, elementType) => {
-      if (variant) {
-        return ["h1", "h2", "h3", "h4"].includes(variant) ? variant : "p";
+      if (elementType) {
+        return elementType;
+      }
+      if (variant && ["h1", "h2", "h3", "h4"].includes(variant)) {
+        return variant;
       }
-      return elementType || "p";
+      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_dedupe15.default)(
         "mobius",
         "mobius-text",
@@ -2424,21 +2446,35 @@ var init_Text = __esm({
         { [`--has-line-height-${spacing}`]: spacing },
         className
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Component, { ref, ...otherProps, className: classes });
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Element, { ref, ...otherProps, className: classes });
     };
     Text.displayName = "Text";
   }
 });
 
 // src/components/TextOrHTML/TextOrHTML.tsx
-var import_react15, import_jsx_runtime17, isHTML, TextOrHTML;
+var import_dedupe16, import_react15, import_jsx_runtime17, isBlockHTML, containsHTML, buildTextClasses, TextOrHTML;
 var init_TextOrHTML = __esm({
   "src/components/TextOrHTML/TextOrHTML.tsx"() {
     "use strict";
+    import_dedupe16 = __toESM(require("classnames/dedupe"));
     import_react15 = require("react");
     init_Text();
     import_jsx_runtime17 = require("react/jsx-runtime");
-    isHTML = (text) => /^\s*<[a-z]/i.test(text);
+    isBlockHTML = (text) => /^\s*<[a-z]/i.test(text);
+    containsHTML = (text) => /<[a-z/]/i.test(text);
+    buildTextClasses = (textProps, htmlClassName) => {
+      const { variant, elementType, spacing, className } = textProps;
+      const variantType = variant || getElementType(variant, elementType);
+      return (0, import_dedupe16.default)(
+        "mobius",
+        "mobius-text",
+        { [`--is-${variantType}`]: variantType },
+        { [`--has-line-height-${spacing}`]: spacing },
+        className,
+        htmlClassName
+      );
+    };
     TextOrHTML = ({
       ref,
       text,
@@ -2448,11 +2484,23 @@ var init_TextOrHTML = __esm({
       autoDetect = false,
       ...textProps
     }) => {
-      const textIsHTML = autoDetect && isHTML(text);
-      const shouldWrapInText = autoDetect ? textWrapper || !textIsHTML : textWrapper;
-      const resolvedElementType = htmlElementType ?? (textIsHTML ? "div" : "span");
-      const DangerousComponent = resolvedElementType;
+      const textIsBlockHTML = autoDetect && isBlockHTML(text);
       const dangerousHTML = (0, import_react15.useMemo)(() => ({ __html: text }), [text]);
+      if (autoDetect && !textIsBlockHTML) {
+        const { variant, spacing, elementType, className, ...domProps } = textProps;
+        const Element = getElementType(variant, elementType);
+        const classes = buildTextClasses(textProps, htmlClassName);
+        return containsHTML(text) ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          Element,
+          {
+            ref,
+            ...domProps,
+            className: classes,
+            dangerouslySetInnerHTML: dangerousHTML
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Element, { ref, ...domProps, className: classes, children: text });
+      }
+      const DangerousComponent = htmlElementType ?? (textIsBlockHTML ? "div" : "span");
       const dangerousElement = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         DangerousComponent,
         {
@@ -2460,7 +2508,7 @@ var init_TextOrHTML = __esm({
           dangerouslySetInnerHTML: dangerousHTML
         }
       );
-      if (shouldWrapInText) {
+      if (textWrapper) {
         return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text, { ref, ...textProps, children: dangerousElement });
       }
       return dangerousElement;
@@ -2481,12 +2529,12 @@ var init_TextOrHTML2 = __esm({
 function isAlertVariant(value) {
   return value === "info" || value === "success" || value === "warning" || value === "error";
 }
-var import_icons4, import_dedupe16, import_Alert, import_jsx_runtime18, Alert;
+var import_icons4, import_dedupe17, import_Alert, import_jsx_runtime18, Alert;
 var init_Alert = __esm({
   "src/components/Alert/Alert.tsx"() {
     "use strict";
     import_icons4 = require("@simplybusiness/icons");
-    import_dedupe16 = __toESM(require("classnames/dedupe"));
+    import_dedupe17 = __toESM(require("classnames/dedupe"));
     init_Icon2();
     init_TextOrHTML2();
     import_Alert = require("@simplybusiness/mobius/src/components/Alert/Alert.css");
@@ -2503,7 +2551,7 @@ var init_Alert = __esm({
       if (!show) return null;
       const variant = variantProp && isAlertVariant(variantProp) ? variantProp : "info";
       const colorValue = variant === "success" ? `var(--color-valid)` : `var(--color-${variant})`;
-      const classes = (0, import_dedupe16.default)(
+      const classes = (0, import_dedupe17.default)(
         "mobius",
         "mobius-alert",
         {
@@ -2521,9 +2569,9 @@ var init_Alert = __esm({
         warning: import_icons4.warning,
         error: import_icons4.error
       };
-      const headerClasses = (0, import_dedupe16.default)("mobius", "mobius-alert__header");
-      const iconClasses = (0, import_dedupe16.default)("mobius", "mobius-alert__icon");
-      const contentClasses = (0, import_dedupe16.default)("mobius", "mobius-alert__content");
+      const headerClasses = (0, import_dedupe17.default)("mobius", "mobius-alert__header");
+      const iconClasses = (0, import_dedupe17.default)("mobius", "mobius-alert__icon");
+      const contentClasses = (0, import_dedupe17.default)("mobius", "mobius-alert__content");
       return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Element, { ref, role: "alert", ...otherProps, className: classes, children: [
         /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: iconClasses, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { icon: icon[variant], color: colorValue }) }),
         /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
@@ -2554,11 +2602,11 @@ var init_Alert2 = __esm({
 });
 
 // src/components/Box/Box.tsx
-var import_dedupe17, import_Box, import_jsx_runtime19, Box;
+var import_dedupe18, import_Box, import_jsx_runtime19, Box;
 var init_Box = __esm({
   "src/components/Box/Box.tsx"() {
     "use strict";
-    import_dedupe17 = __toESM(require("classnames/dedupe"));
+    import_dedupe18 = __toESM(require("classnames/dedupe"));
     init_utils();
     import_Box = require("@simplybusiness/mobius/src/components/Box/Box.css");
     import_jsx_runtime19 = require("react/jsx-runtime");
@@ -2587,8 +2635,8 @@ var init_Box = __esm({
         style,
         ...otherProps
       } = props;
-      const classes = (0, import_dedupe17.default)("mobius", "mobius-box", otherProps.className);
-      const styleProps = filterUndefinedProps({
+      const classes = (0, import_dedupe18.default)("mobius", "mobius-box", otherProps.className);
+      const fromProps = filterUndefinedProps({
         padding: getSpacingValue(padding),
         paddingInline: getSpacingValue(paddingInline || paddingX),
         paddingBlock: getSpacingValue(paddingBlock || paddingY),
@@ -2601,8 +2649,11 @@ var init_Box = __esm({
         maxWidth,
         maxHeight,
         width,
-        height,
-        ...style
+        height
+      });
+      const styleProps = filterUndefinedProps({
+        ...fromProps,
+        ...style ? filterUnsetValues(style) : {}
       });
       return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Element, { ref, style: styleProps, ...otherProps, className: classes });
     };
@@ -2619,13 +2670,13 @@ var init_Box2 = __esm({
 });
 
 // src/components/Breadcrumbs/Breadcrumbs.tsx
-var import_react16, import_dedupe18, import_Breadcrumbs, import_jsx_runtime20, Breadcrumbs;
+var import_react16, import_dedupe19, import_Breadcrumbs, import_jsx_runtime20, Breadcrumbs;
 var init_Breadcrumbs = __esm({
   "src/components/Breadcrumbs/Breadcrumbs.tsx"() {
     "use strict";
     "use client";
     import_react16 = require("react");
-    import_dedupe18 = __toESM(require("classnames/dedupe"));
+    import_dedupe19 = __toESM(require("classnames/dedupe"));
     import_Breadcrumbs = require("@simplybusiness/mobius/src/components/Breadcrumbs/Breadcrumbs.css");
     import_jsx_runtime20 = require("react/jsx-runtime");
     Breadcrumbs = ({ ref, ...props }) => {
@@ -2633,7 +2684,7 @@ var init_Breadcrumbs = __esm({
       const { navProps } = { navProps: { "aria-label": ariaLabel } };
       const { children, ...otherProps } = props;
       const childArray = import_react16.Children.toArray(children);
-      const classes = (0, import_dedupe18.default)(
+      const classes = (0, import_dedupe19.default)(
         "mobius",
         "mobius-breadcrumb",
         otherProps.className
@@ -2653,13 +2704,13 @@ var init_Breadcrumbs = __esm({
 });
 
 // src/components/Breadcrumbs/BreadcrumbItem.tsx
-var import_react17, import_dedupe19, import_jsx_runtime21, BreadcrumbItem;
+var import_react17, import_dedupe20, import_jsx_runtime21, BreadcrumbItem;
 var init_BreadcrumbItem = __esm({
   "src/components/Breadcrumbs/BreadcrumbItem.tsx"() {
     "use strict";
     "use client";
     import_react17 = require("react");
-    import_dedupe19 = __toESM(require("classnames/dedupe"));
+    import_dedupe20 = __toESM(require("classnames/dedupe"));
     init_Box2();
     import_jsx_runtime21 = require("react/jsx-runtime");
     BreadcrumbItem = ({ ref, ...props }) => {
@@ -2678,7 +2729,7 @@ var init_BreadcrumbItem = __esm({
           ...otherProps
         }
       };
-      const classes = (0, import_dedupe19.default)(
+      const classes = (0, import_dedupe20.default)(
         "mobius",
         "mobius-breadcrumb__item",
         props.className
@@ -2743,12 +2794,12 @@ var init_Success = __esm({
 });
 
 // src/components/Button/Button.tsx
-var import_dedupe20, import_Button, import_jsx_runtime24, Button;
+var import_dedupe21, import_Button, import_jsx_runtime24, Button;
 var init_Button = __esm({
   "src/components/Button/Button.tsx"() {
     "use strict";
     "use client";
-    import_dedupe20 = __toESM(require("classnames/dedupe"));
+    import_dedupe21 = __toESM(require("classnames/dedupe"));
     init_Loading();
     init_useButton2();
     init_Success();
@@ -2768,7 +2819,7 @@ var init_Button = __esm({
         ...otherProps
       } = props;
       const { buttonProps } = useButton(props);
-      otherProps.className = (0, import_dedupe20.default)(
+      otherProps.className = (0, import_dedupe21.default)(
         "mobius",
         "mobius-button",
         `--variant-${variant}`,
@@ -2798,13 +2849,13 @@ var init_Button2 = __esm({
 });
 
 // src/components/Checkbox/Checkbox.tsx
-var import_react18, import_dedupe21, import_icons7, import_Checkbox, import_jsx_runtime25, Checkbox;
+var import_react18, import_dedupe22, import_icons7, import_Checkbox, import_jsx_runtime25, Checkbox;
 var init_Checkbox = __esm({
   "src/components/Checkbox/Checkbox.tsx"() {
     "use strict";
     "use client";
     import_react18 = require("react");
-    import_dedupe21 = __toESM(require("classnames/dedupe"));
+    import_dedupe22 = __toESM(require("classnames/dedupe"));
     import_icons7 = require("@simplybusiness/icons");
     init_ErrorMessage2();
     init_spaceDelimitedList();
@@ -2843,7 +2894,7 @@ var init_Checkbox = __esm({
         }
       }, [selected, isControlled]);
       const validationClasses = useValidationClasses({ isInvalid });
-      const sharedClasses = (0, import_dedupe21.default)(
+      const sharedClasses = (0, import_dedupe22.default)(
         {
           "--is-disabled": isDisabled,
           "--is-selected": checked,
@@ -2852,15 +2903,15 @@ var init_Checkbox = __esm({
         },
         validationClasses
       );
-      const wrapperClasses = (0, import_dedupe21.default)(
+      const wrapperClasses = (0, import_dedupe22.default)(
         "mobius",
         "mobius-checkbox",
         sharedClasses,
         className
       );
-      const labelClasses = (0, import_dedupe21.default)("mobius-checkbox__label", sharedClasses);
-      const inputClasses = (0, import_dedupe21.default)("mobius-checkbox__input", sharedClasses);
-      const iconClasses = (0, import_dedupe21.default)("mobius-checkbox__icon", sharedClasses);
+      const labelClasses = (0, import_dedupe22.default)("mobius-checkbox__label", sharedClasses);
+      const inputClasses = (0, import_dedupe22.default)("mobius-checkbox__input", sharedClasses);
+      const iconClasses = (0, import_dedupe22.default)("mobius-checkbox__icon", sharedClasses);
       const errorMessageId = (0, import_react18.useId)();
       const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
       const describedBy = spaceDelimitedList([
@@ -2915,12 +2966,12 @@ var init_Checkbox = __esm({
 });
 
 // src/components/Checkbox/CheckboxGroup.tsx
-var import_dedupe22, import_react19, import_CheckboxGroup, import_jsx_runtime26, CheckboxGroup;
+var import_dedupe23, import_react19, import_CheckboxGroup, import_jsx_runtime26, CheckboxGroup;
 var init_CheckboxGroup = __esm({
   "src/components/Checkbox/CheckboxGroup.tsx"() {
     "use strict";
     "use client";
-    import_dedupe22 = __toESM(require("classnames/dedupe"));
+    import_dedupe23 = __toESM(require("classnames/dedupe"));
     import_react19 = require("react");
     init_hooks();
     init_spaceDelimitedList();
@@ -2959,7 +3010,7 @@ var init_CheckboxGroup = __esm({
           isInitializedRef.current = true;
         }
       }, [defaultValue]);
-      const checkboxGroupClasses = (0, import_dedupe22.default)(
+      const checkboxGroupClasses = (0, import_dedupe23.default)(
         "mobius",
         "mobius-checkbox-group",
         className,
@@ -2971,7 +3022,7 @@ var init_CheckboxGroup = __esm({
         }
       );
       const validationClasses = useValidationClasses({ isInvalid });
-      const labelClasses = (0, import_dedupe22.default)(
+      const labelClasses = (0, import_dedupe23.default)(
         {
           "--is-disabled": isDisabled
         },
@@ -3067,17 +3118,17 @@ var init_Checkbox2 = __esm({
 });
 
 // src/components/Container/Container.tsx
-var import_dedupe23, import_Container, import_jsx_runtime27, Container;
+var import_dedupe24, import_Container, import_jsx_runtime27, Container;
 var init_Container = __esm({
   "src/components/Container/Container.tsx"() {
     "use strict";
-    import_dedupe23 = __toESM(require("classnames/dedupe"));
+    import_dedupe24 = __toESM(require("classnames/dedupe"));
     init_utils();
     import_Container = require("@simplybusiness/mobius/src/components/Container/Container.css");
     import_jsx_runtime27 = require("react/jsx-runtime");
     Container = ({ ref, ...props }) => {
       const { elementType: Element = "div", size = "md", ...otherProps } = props;
-      const classes = (0, import_dedupe23.default)(
+      const classes = (0, import_dedupe24.default)(
         "mobius",
         "mobius-container",
         sizeClasses(size),
@@ -3136,12 +3187,12 @@ var init_validation = __esm({
 });
 
 // src/components/DateField/DateField.tsx
-var import_dedupe24, import_react20, import_jsx_runtime28, MIN_MAX_ERROR, DateField;
+var import_dedupe25, import_react20, import_jsx_runtime28, MIN_MAX_ERROR, DateField;
 var init_DateField = __esm({
   "src/components/DateField/DateField.tsx"() {
     "use strict";
     "use client";
-    import_dedupe24 = __toESM(require("classnames/dedupe"));
+    import_dedupe25 = __toESM(require("classnames/dedupe"));
     import_react20 = require("react");
     init_mergeRefs();
     init_TextField2();
@@ -3162,7 +3213,7 @@ var init_DateField = __esm({
       const [error3, setError] = (0, import_react20.useState)(errorMessage);
       const [isInvalid, setIsInvalid] = (0, import_react20.useState)(void 0);
       const localRef = (0, import_react20.useRef)(null);
-      const classes = (0, import_dedupe24.default)("mobius-date-field", className);
+      const classes = (0, import_dedupe25.default)("mobius-date-field", className);
       const formattedMin = min ? convertToDateFormat(min, format) : void 0;
       const formattedMax = max ? convertToDateFormat(max, format) : void 0;
       const formattedDefaultValue = defaultValue ? convertToDateFormat(defaultValue, format) : void 0;
@@ -3265,12 +3316,12 @@ var init_DrawerContext = __esm({
 });
 
 // src/components/Drawer/Drawer.tsx
-var import_dedupe25, import_react22, import_Drawer, import_jsx_runtime30, TRANSITION_CSS_VARIABLE, Drawer;
+var import_dedupe26, import_react22, import_Drawer, import_jsx_runtime30, TRANSITION_CSS_VARIABLE, Drawer;
 var init_Drawer = __esm({
   "src/components/Drawer/Drawer.tsx"() {
     "use strict";
     "use client";
-    import_dedupe25 = __toESM(require("classnames/dedupe"));
+    import_dedupe26 = __toESM(require("classnames/dedupe"));
     import_react22 = require("react");
     init_hooks();
     init_utils();
@@ -3304,7 +3355,7 @@ var init_Drawer = __esm({
       });
       const hiddenId = `dialog-screen-reader-announce-${(0, import_react22.useId)()}`;
       const headerId = `dialog-header-${(0, import_react22.useId)()}`;
-      const dialogClasses = (0, import_dedupe25.default)(
+      const dialogClasses = (0, import_dedupe26.default)(
         "mobius",
         "mobius-drawer",
         `--${direction}`,
@@ -3411,14 +3462,14 @@ var init_Drawer2 = __esm({
 });
 
 // src/components/DropdownMenu/DropdownMenu.tsx
-var import_react24, import_react_accessible_dropdown_menu_hook, import_dedupe26, import_DropdownMenu, import_jsx_runtime32, DropdownMenu;
+var import_react24, import_react_accessible_dropdown_menu_hook, import_dedupe27, import_DropdownMenu, import_jsx_runtime32, DropdownMenu;
 var init_DropdownMenu = __esm({
   "src/components/DropdownMenu/DropdownMenu.tsx"() {
     "use strict";
     "use client";
     import_react24 = require("react");
     import_react_accessible_dropdown_menu_hook = __toESM(require("react-accessible-dropdown-menu-hook"));
-    import_dedupe26 = __toESM(require("classnames/dedupe"));
+    import_dedupe27 = __toESM(require("classnames/dedupe"));
     init_Button2();
     import_DropdownMenu = require("@simplybusiness/mobius/src/components/DropdownMenu/DropdownMenu.css");
     import_jsx_runtime32 = require("react/jsx-runtime");
@@ -3438,13 +3489,13 @@ var init_DropdownMenu = __esm({
         isOpen: open,
         setIsOpen
       } = (0, import_react_accessible_dropdown_menu_hook.default)(numberOfItems);
-      const classes = (0, import_dedupe26.default)(
+      const classes = (0, import_dedupe27.default)(
         "mobius",
         "mobius-dropdown-menu",
         otherProps.className
       );
-      const triggerClasses = (0, import_dedupe26.default)("mobius", "mobius-dropdown-menu__trigger");
-      const listClasses = (0, import_dedupe26.default)("mobius", "mobius-dropdown-menu__list", {
+      const triggerClasses = (0, import_dedupe27.default)("mobius", "mobius-dropdown-menu__trigger");
+      const listClasses = (0, import_dedupe27.default)("mobius", "mobius-dropdown-menu__list", {
         "--is-open": open
       });
       const handleChildClick = ({ onClick }, index) => {
@@ -3478,12 +3529,12 @@ var init_DropdownMenu = __esm({
 });
 
 // src/components/DropdownMenu/Item.tsx
-var import_react25, import_dedupe27, import_jsx_runtime33, Item;
+var import_react25, import_dedupe28, import_jsx_runtime33, Item;
 var init_Item = __esm({
   "src/components/DropdownMenu/Item.tsx"() {
     "use strict";
     import_react25 = require("react");
-    import_dedupe27 = __toESM(require("classnames/dedupe"));
+    import_dedupe28 = __toESM(require("classnames/dedupe"));
     import_jsx_runtime33 = require("react/jsx-runtime");
     Item = ({ ref, ...props }) => {
       const {
@@ -3493,7 +3544,7 @@ var init_Item = __esm({
         children,
         ...otherProps
       } = props;
-      const classes = (0, import_dedupe27.default)(
+      const classes = (0, import_dedupe28.default)(
         "mobius",
         "mobius-dropdown-menu__item",
         { "--is-active": active },
@@ -3501,7 +3552,7 @@ var init_Item = __esm({
       );
       return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Element, { ref, onClick, ...otherProps, children: import_react25.Children.map(children, (child) => {
         if ((0, import_react25.isValidElement)(child)) {
-          const childClasses = (0, import_dedupe27.default)(
+          const childClasses = (0, import_dedupe28.default)(
             child.props.className,
             classes
           );
@@ -3537,12 +3588,12 @@ var init_DropdownMenu2 = __esm({
 });
 
 // src/components/Fieldset/Fieldset.tsx
-var import_dedupe28, import_react26, import_Fieldset, import_jsx_runtime34, useFieldset, Fieldset;
+var import_dedupe29, import_react26, import_Fieldset, import_jsx_runtime34, useFieldset, Fieldset;
 var init_Fieldset = __esm({
   "src/components/Fieldset/Fieldset.tsx"() {
     "use strict";
     "use client";
-    import_dedupe28 = __toESM(require("classnames/dedupe"));
+    import_dedupe29 = __toESM(require("classnames/dedupe"));
     import_react26 = require("react");
     init_Flex2();
     import_Fieldset = require("@simplybusiness/mobius/src/components/Fieldset/Fieldset.css");
@@ -3577,7 +3628,7 @@ var init_Fieldset = __esm({
         ...otherProps
       } = props;
       const { legendProps, containerProps } = useFieldset(props);
-      const classes = (0, import_dedupe28.default)("mobius", "mobius-fieldset", props.className);
+      const classes = (0, import_dedupe29.default)("mobius", "mobius-fieldset", props.className);
       legendProps.className = "mobius-fieldset__legend";
       return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Flex, { ...containerProps, ...otherProps, className: classes, children: [
         legend && (0, import_react26.cloneElement)(legendComponent, { ...legendProps }, [legend]),
@@ -3597,14 +3648,14 @@ var init_Fieldset2 = __esm({
 });
 
 // src/components/Grid/Grid.tsx
-var import_dedupe29, import_jsx_runtime35, Grid;
+var import_dedupe30, import_jsx_runtime35, Grid;
 var init_Grid = __esm({
   "src/components/Grid/Grid.tsx"() {
     "use strict";
-    import_dedupe29 = __toESM(require("classnames/dedupe"));
+    import_dedupe30 = __toESM(require("classnames/dedupe"));
     init_utils();
     import_jsx_runtime35 = require("react/jsx-runtime");
-    Grid = ({ ref: _ref, ...props }) => {
+    Grid = ({ ref, ...props }) => {
       const {
         columns = 12,
         gap,
@@ -3618,7 +3669,7 @@ var init_Grid = __esm({
         style,
         ...rest
       } = props;
-      const classes = (0, import_dedupe29.default)("mobius", "mobius-grid", className);
+      const classes = (0, import_dedupe30.default)("mobius", "mobius-grid", className);
       const styles = filterUndefinedProps({
         boxSizing: "border-box",
         display: "grid",
@@ -3632,20 +3683,20 @@ var init_Grid = __esm({
         justifyItems,
         ...style
       });
-      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { style: styles, className: classes, ...rest });
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { ref, style: styles, className: classes, ...rest });
     };
     Grid.displayName = "Grid";
   }
 });
 
 // src/components/Grid/Item.tsx
-var import_react27, import_dedupe30, import_jsx_runtime36, getBreakpointMap, DEFAULT_SPAN, GridItem;
+var import_react27, import_dedupe31, import_jsx_runtime36, getBreakpointMap, DEFAULT_SPAN, GridItem;
 var init_Item2 = __esm({
   "src/components/Grid/Item.tsx"() {
     "use strict";
     "use client";
     import_react27 = require("react");
-    import_dedupe30 = __toESM(require("classnames/dedupe"));
+    import_dedupe31 = __toESM(require("classnames/dedupe"));
     init_hooks();
     import_jsx_runtime36 = require("react/jsx-runtime");
     getBreakpointMap = (config) => Object.entries(config).reduce(
@@ -3657,7 +3708,7 @@ var init_Item2 = __esm({
       {}
     );
     DEFAULT_SPAN = 12;
-    GridItem = ({ ref: _ref, ...props }) => {
+    GridItem = ({ ref, ...props }) => {
       const {
         breakpoint: { size: breakpointSize }
       } = useBreakpoint();
@@ -3683,7 +3734,7 @@ var init_Item2 = __esm({
         xxl
       });
       const [responsiveSpan, setResponsiveSpan] = (0, import_react27.useState)();
-      const classes = (0, import_dedupe30.default)("mobius-grid__item", className);
+      const classes = (0, import_dedupe31.default)("mobius", "mobius-grid__item", className);
       (0, import_react27.useEffect)(() => {
         setResponsiveSpan(breakpointMap[breakpointSize]);
       }, [breakpointSize, breakpointMap]);
@@ -3692,7 +3743,7 @@ var init_Item2 = __esm({
         alignSelf,
         justifySelf
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { style: { ...styles }, className: classes, ...rest });
+      return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { ref, style: { ...styles }, className: classes, ...rest });
     };
     GridItem.displayName = "GridItem";
   }
@@ -3713,11 +3764,11 @@ var init_Grid2 = __esm({
 });
 
 // src/components/Image/Image.tsx
-var import_dedupe31, import_jsx_runtime37, Image;
+var import_dedupe32, import_jsx_runtime37, Image;
 var init_Image = __esm({
   "src/components/Image/Image.tsx"() {
     "use strict";
-    import_dedupe31 = __toESM(require("classnames/dedupe"));
+    import_dedupe32 = __toESM(require("classnames/dedupe"));
     import_jsx_runtime37 = require("react/jsx-runtime");
     Image = ({
       ref,
@@ -3725,7 +3776,7 @@ var init_Image = __esm({
       elementType: Component = "img",
       ...otherProps
     }) => {
-      const classes = (0, import_dedupe31.default)("mobius", "mobius-image", otherProps.className);
+      const classes = (0, import_dedupe32.default)("mobius", "mobius-image", otherProps.className);
       return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Component, { alt, ref, ...otherProps, className: classes });
     };
     Image.displayName = "Image";
@@ -3741,11 +3792,11 @@ var init_Image2 = __esm({
 });
 
 // src/components/Link/Link.tsx
-var import_dedupe32, import_Link, import_jsx_runtime38, Link;
+var import_dedupe33, import_Link, import_jsx_runtime38, Link;
 var init_Link = __esm({
   "src/components/Link/Link.tsx"() {
     "use strict";
-    import_dedupe32 = __toESM(require("classnames/dedupe"));
+    import_dedupe33 = __toESM(require("classnames/dedupe"));
     import_Link = require("@simplybusiness/mobius/src/components/Link/Link.css");
     import_jsx_runtime38 = require("react/jsx-runtime");
     Link = ({ ref, ...props }) => {
@@ -3761,7 +3812,7 @@ var init_Link = __esm({
         pointerEvents: "none"
       };
       const styles = { ...style, ...isDisabled && disabledStyles };
-      const classes = (0, import_dedupe32.default)(
+      const classes = (0, import_dedupe33.default)(
         "mobius",
         "mobius-link",
         className,
@@ -3805,14 +3856,14 @@ function LinkButton({
   if (!href) {
     throw new Error("LinkButton requires a href prop");
   }
-  const classes = (0, import_dedupe33.default)("mobius", "mobius-link-button", className);
+  const classes = (0, import_dedupe34.default)("mobius", "mobius-link-button", className);
   return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Button, { elementType, href, className: classes, ...rest, children });
 }
-var import_dedupe33, import_jsx_runtime39;
+var import_dedupe34, import_jsx_runtime39;
 var init_LinkButton = __esm({
   "src/components/LinkButton/LinkButton.tsx"() {
     "use strict";
-    import_dedupe33 = __toESM(require("classnames/dedupe"));
+    import_dedupe34 = __toESM(require("classnames/dedupe"));
     init_Button2();
     import_jsx_runtime39 = require("react/jsx-runtime");
   }
@@ -3827,12 +3878,12 @@ var init_LinkButton2 = __esm({
 });
 
 // src/components/List/List.tsx
-var import_react28, import_dedupe34, import_List, import_jsx_runtime40, List;
+var import_react28, import_dedupe35, import_List, import_jsx_runtime40, List;
 var init_List = __esm({
   "src/components/List/List.tsx"() {
     "use strict";
     import_react28 = require("react");
-    import_dedupe34 = __toESM(require("classnames/dedupe"));
+    import_dedupe35 = __toESM(require("classnames/dedupe"));
     import_List = require("@simplybusiness/mobius/src/components/List/List.css");
     import_jsx_runtime40 = require("react/jsx-runtime");
     List = ({ ref, ...props }) => {
@@ -3843,7 +3894,7 @@ var init_List = __esm({
         ...restProps,
         reversed: isReversed
       };
-      const classes = (0, import_dedupe34.default)(
+      const classes = (0, import_dedupe35.default)(
         "mobius",
         "mobius-list",
         {
@@ -3852,30 +3903,38 @@ var init_List = __esm({
         },
         otherProps.className
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Component, { ref, ...mappedProps, className: classes, children: import_react28.Children.map(children, (child) => {
-        if ((0, import_react28.isValidElement)(child)) {
-          return (0, import_react28.cloneElement)(child, {
-            parentIcon: icon
-          });
+      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        Component,
+        {
+          ref,
+          ...mappedProps,
+          className: classes,
+          children: import_react28.Children.map(children, (child) => {
+            if ((0, import_react28.isValidElement)(child)) {
+              return (0, import_react28.cloneElement)(child, {
+                parentIcon: icon
+              });
+            }
+            return child;
+          })
         }
-        return child;
-      }) });
+      );
     };
     List.displayName = "List";
   }
 });
 
 // src/components/List/ListItem.tsx
-var import_dedupe35, import_jsx_runtime41, ListItem;
+var import_dedupe36, import_jsx_runtime41, ListItem;
 var init_ListItem = __esm({
   "src/components/List/ListItem.tsx"() {
     "use strict";
-    import_dedupe35 = __toESM(require("classnames/dedupe"));
+    import_dedupe36 = __toESM(require("classnames/dedupe"));
     import_jsx_runtime41 = require("react/jsx-runtime");
     ListItem = ({ ref, ...props }) => {
       const { parentIcon, icon, children, ...otherProps } = props;
       const iconContent = icon || parentIcon;
-      const classes = (0, import_dedupe35.default)(
+      const classes = (0, import_dedupe36.default)(
         "mobius",
         "mobius-list__item",
         {
@@ -3883,8 +3942,8 @@ var init_ListItem = __esm({
         },
         props.className
       );
-      const contentClasses = (0, import_dedupe35.default)("mobius", "mobius-list__item-content");
-      const iconClasses = (0, import_dedupe35.default)("mobius", "mobius-list__icon");
+      const contentClasses = (0, import_dedupe36.default)("mobius", "mobius-list__item-content");
+      const iconClasses = (0, import_dedupe36.default)("mobius", "mobius-list__icon");
       if (iconContent) {
         return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("li", { ref, ...otherProps, className: classes, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { className: contentClasses, children: [
           /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: iconClasses, children: iconContent }),
@@ -3907,18 +3966,18 @@ var init_List2 = __esm({
 });
 
 // src/components/LoadingIndicator/LoadingIndicator.tsx
-var import_dedupe36, import_icons9, import_LoadingIndicator, import_jsx_runtime42, LoadingIndicator;
+var import_dedupe37, import_icons9, import_LoadingIndicator, import_jsx_runtime42, LoadingIndicator;
 var init_LoadingIndicator = __esm({
   "src/components/LoadingIndicator/LoadingIndicator.tsx"() {
     "use strict";
-    import_dedupe36 = __toESM(require("classnames/dedupe"));
+    import_dedupe37 = __toESM(require("classnames/dedupe"));
     import_icons9 = require("@simplybusiness/icons");
     init_Icon2();
     import_LoadingIndicator = require("@simplybusiness/mobius/src/components/LoadingIndicator/LoadingIndicator.css");
     import_jsx_runtime42 = require("react/jsx-runtime");
     LoadingIndicator = ({ ref, ...props }) => {
       const { icon = import_icons9.loading, ...otherProps } = props;
-      const classes = (0, import_dedupe36.default)(
+      const classes = (0, import_dedupe37.default)(
         "mobius",
         "mobius-loading-indicator",
         otherProps.className
@@ -3938,15 +3997,15 @@ var init_LoadingIndicator2 = __esm({
 });
 
 // src/components/Logo/Logo.tsx
-var import_dedupe37, import_jsx_runtime43, Logo;
+var import_dedupe38, import_jsx_runtime43, Logo;
 var init_Logo = __esm({
   "src/components/Logo/Logo.tsx"() {
     "use strict";
-    import_dedupe37 = __toESM(require("classnames/dedupe"));
+    import_dedupe38 = __toESM(require("classnames/dedupe"));
     import_jsx_runtime43 = require("react/jsx-runtime");
     Logo = ({ ref, ...props }) => {
       const { className, width, height, ...otherProps } = props;
-      const classes = (0, import_dedupe37.default)("mobius", "mobius-logo", className);
+      const classes = (0, import_dedupe38.default)("mobius", "mobius-logo", className);
       return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
         "svg",
         {
@@ -4030,7 +4089,10 @@ var init_ModalContext = __esm({
     ModalContext = (0, import_react29.createContext)({
       onClose: () => {
       },
-      closeLabel: void 0
+      closeLabel: void 0,
+      titleId: void 0,
+      setTitleId: () => {
+      }
     });
   }
 });
@@ -4043,54 +4105,68 @@ var init_useModal = __esm({
     import_react30 = require("react");
     init_ModalContext();
     useModal = () => {
-      const { onClose, closeLabel } = (0, import_react30.useContext)(ModalContext);
-      return { onClose, closeLabel };
+      const { onClose, closeLabel, titleId, setTitleId } = (0, import_react30.useContext)(ModalContext);
+      return { onClose, closeLabel, titleId, setTitleId };
     };
   }
 });
 
 // src/components/Modal/Header.tsx
-var import_icons10, import_jsx_runtime45, Header2;
+var import_react31, import_icons10, import_jsx_runtime45, Header2;
 var init_Header2 = __esm({
   "src/components/Modal/Header.tsx"() {
     "use strict";
+    import_react31 = require("react");
     import_icons10 = require("@simplybusiness/icons");
     init_Button2();
     init_Icon2();
     init_useModal();
     import_jsx_runtime45 = require("react/jsx-runtime");
     Header2 = ({ ref, children, ...otherProps }) => {
-      const { onClose, closeLabel } = useModal();
-      return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("header", { ref, ...otherProps, className: "mobius-modal__header", children: [
-        children,
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
-          Button,
-          {
-            "aria-label": "Close",
-            variant: "basic",
-            onPress: onClose,
-            className: "mobius-modal__close",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Icon, { icon: import_icons10.cross }),
-              " ",
-              closeLabel
-            ]
-          }
-        )
-      ] });
+      const { onClose, closeLabel, setTitleId } = useModal();
+      const titleId = (0, import_react31.useId)();
+      (0, import_react31.useEffect)(() => {
+        setTitleId(titleId);
+      }, [titleId, setTitleId]);
+      return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+        "header",
+        {
+          ref,
+          ...otherProps,
+          className: "mobius-modal__header",
+          id: titleId,
+          children: [
+            children,
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+              Button,
+              {
+                "aria-label": "Close",
+                variant: "basic",
+                onPress: onClose,
+                className: "mobius-modal__close",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Icon, { icon: import_icons10.cross }),
+                  " ",
+                  closeLabel
+                ]
+              }
+            )
+          ]
+        }
+      );
     };
     Header2.displayName = "Header";
   }
 });
 
 // src/components/Modal/Modal.tsx
-var import_dedupe38, import_react31, import_Modal, import_jsx_runtime46, TRANSITION_CSS_VARIABLE2, Modal;
+var import_dedupe39, import_react32, import_Modal, import_jsx_runtime46, TRANSITION_CSS_VARIABLE2, Modal;
 var init_Modal = __esm({
   "src/components/Modal/Modal.tsx"() {
     "use strict";
     "use client";
-    import_dedupe38 = __toESM(require("classnames/dedupe"));
-    import_react31 = require("react");
+    import_dedupe39 = __toESM(require("classnames/dedupe"));
+    import_react32 = require("react");
     init_hooks();
     init_utils();
     init_polyfill_tests();
@@ -4110,11 +4186,11 @@ var init_Modal = __esm({
         animation,
         ...rest
       } = props;
-      const [shouldTransition, setShouldTransition] = (0, import_react31.useState)(false);
-      (0, import_react31.useEffect)(() => {
+      const [shouldTransition, setShouldTransition] = (0, import_react32.useState)(false);
+      (0, import_react32.useEffect)(() => {
         setShouldTransition(supportsDialog());
       }, []);
-      const dialogRef = (0, import_react31.useRef)(null);
+      const dialogRef = (0, import_react32.useRef)(null);
       const { close } = useDialog({
         ref: dialogRef,
         isOpen,
@@ -4125,7 +4201,7 @@ var init_Modal = __esm({
           CSSVariable: TRANSITION_CSS_VARIABLE2
         }
       });
-      const modalClasses = (0, import_dedupe38.default)(
+      const modalClasses = (0, import_dedupe39.default)(
         "mobius",
         "mobius-modal",
         {
@@ -4138,12 +4214,18 @@ var init_Modal = __esm({
         },
         className
       );
-      const contextValue = (0, import_react31.useMemo)(
+      const [titleId, setTitleId] = (0, import_react32.useState)(void 0);
+      const handleSetTitleId = (0, import_react32.useCallback)((id) => {
+        setTitleId(id);
+      }, []);
+      const contextValue = (0, import_react32.useMemo)(
         () => ({
           onClose: close,
-          closeLabel
+          closeLabel,
+          titleId,
+          setTitleId: handleSetTitleId
         }),
-        [close, closeLabel]
+        [close, closeLabel, titleId, handleSetTitleId]
       );
       return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
         "dialog",
@@ -4151,6 +4233,7 @@ var init_Modal = __esm({
           ref: mergeRefs([dialogRef, ref]),
           onCancel: close,
           className: modalClasses,
+          "aria-labelledby": titleId,
           ...rest,
           children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ModalContext.Provider, { value: contextValue, children })
         }
@@ -4178,13 +4261,13 @@ var init_Modal2 = __esm({
 });
 
 // src/components/NumberField/NumberField.tsx
-var import_dedupe39, import_react32, import_NumberField, import_jsx_runtime47, NumberField;
+var import_dedupe40, import_react33, import_NumberField, import_jsx_runtime47, NumberField;
 var init_NumberField = __esm({
   "src/components/NumberField/NumberField.tsx"() {
     "use strict";
     "use client";
-    import_dedupe39 = __toESM(require("classnames/dedupe"));
-    import_react32 = require("react");
+    import_dedupe40 = __toESM(require("classnames/dedupe"));
+    import_react33 = require("react");
     init_TextField2();
     import_NumberField = require("@simplybusiness/mobius/src/components/NumberField/NumberField.css");
     import_jsx_runtime47 = require("react/jsx-runtime");
@@ -4203,15 +4286,15 @@ var init_NumberField = __esm({
         onBlur: customOnBlur,
         ...rest
       } = otherProps;
-      const focusedInputRef = (0, import_react32.useRef)(null);
-      const wheelHandler = (0, import_react32.useCallback)((ev) => ev.preventDefault(), []);
-      (0, import_react32.useEffect)(() => {
+      const focusedInputRef = (0, import_react33.useRef)(null);
+      const wheelHandler = (0, import_react33.useCallback)((ev) => ev.preventDefault(), []);
+      (0, import_react33.useEffect)(() => {
         return () => {
           focusedInputRef.current?.removeEventListener("wheel", wheelHandler);
           focusedInputRef.current = null;
         };
       }, [wheelHandler]);
-      const containerClasses = (0, import_dedupe39.default)("mobius-number-field", className, {
+      const containerClasses = (0, import_dedupe40.default)("mobius-number-field", className, {
         "--hide-spin-buttons": hideSpinButtons
       });
       const handleBeforeInput = (event) => {
@@ -4337,13 +4420,13 @@ var init_ShowHideButton = __esm({
 });
 
 // src/components/PasswordField/PasswordField.tsx
-var import_dedupe40, import_react33, import_PasswordField, import_jsx_runtime50, PasswordField;
+var import_dedupe41, import_react34, import_PasswordField, import_jsx_runtime50, PasswordField;
 var init_PasswordField = __esm({
   "src/components/PasswordField/PasswordField.tsx"() {
     "use strict";
     "use client";
-    import_dedupe40 = __toESM(require("classnames/dedupe"));
-    import_react33 = require("react");
+    import_dedupe41 = __toESM(require("classnames/dedupe"));
+    import_react34 = require("react");
     init_mergeRefs();
     init_TextField2();
     init_ShowHideButton();
@@ -4355,10 +4438,10 @@ var init_PasswordField = __esm({
       autoComplete = "current-password",
       ...props
     }) => {
-      const [show, setShow] = (0, import_react33.useState)(false);
+      const [show, setShow] = (0, import_react34.useState)(false);
       const type = show ? "text" : "password";
-      const classes = (0, import_dedupe40.default)("mobius-password-field", className);
-      const localRef = (0, import_react33.useRef)(null);
+      const classes = (0, import_dedupe41.default)("mobius-password-field", className);
+      const localRef = (0, import_react34.useRef)(null);
       const handleShowHideButtonClick = () => {
         const selectionStart = localRef.current?.selectionStart;
         const selectionEnd = localRef.current?.selectionEnd;
@@ -4395,14 +4478,14 @@ var init_PasswordField2 = __esm({
 });
 
 // src/components/Popover/Popover.tsx
-var import_react34, import_icons12, import_dedupe41, import_react35, import_mobius_hooks6, import_Popover, import_jsx_runtime51, OFFSET_FROM_CONTENT_DEFAULT, Popover;
+var import_react35, import_icons12, import_dedupe42, import_react36, import_mobius_hooks6, import_Popover, import_jsx_runtime51, OFFSET_FROM_CONTENT_DEFAULT, Popover;
 var init_Popover = __esm({
   "src/components/Popover/Popover.tsx"() {
     "use strict";
-    import_react34 = require("@floating-ui/react");
+    import_react35 = require("@floating-ui/react");
     import_icons12 = require("@simplybusiness/icons");
-    import_dedupe41 = __toESM(require("classnames/dedupe"));
-    import_react35 = require("react");
+    import_dedupe42 = __toESM(require("classnames/dedupe"));
+    import_react36 = require("react");
     import_mobius_hooks6 = require("@simplybusiness/mobius-hooks");
     init_Button2();
     init_Icon2();
@@ -4411,23 +4494,23 @@ var init_Popover = __esm({
     OFFSET_FROM_CONTENT_DEFAULT = 10;
     Popover = (props) => {
       const { trigger, children, onOpen, onClose, className } = props;
-      const arrowRef = (0, import_react35.useRef)(null);
-      const floatingContainerRef = (0, import_react35.useRef)(null);
-      const [isOpen, setIsOpen] = (0, import_react35.useState)(false);
-      const { refs, floatingStyles, context } = (0, import_react34.useFloating)({
+      const arrowRef = (0, import_react36.useRef)(null);
+      const floatingContainerRef = (0, import_react36.useRef)(null);
+      const [isOpen, setIsOpen] = (0, import_react36.useState)(false);
+      const { refs, floatingStyles, context } = (0, import_react35.useFloating)({
         open: isOpen,
         onOpenChange: setIsOpen,
-        whileElementsMounted: import_react34.autoUpdate,
+        whileElementsMounted: import_react35.autoUpdate,
         middleware: [
-          (0, import_react34.arrow)({
+          (0, import_react35.arrow)({
             element: arrowRef
           }),
-          (0, import_react34.offset)(OFFSET_FROM_CONTENT_DEFAULT),
-          (0, import_react34.shift)(),
-          (0, import_react34.flip)()
+          (0, import_react35.offset)(OFFSET_FROM_CONTENT_DEFAULT),
+          (0, import_react35.shift)(),
+          (0, import_react35.flip)()
         ]
       });
-      const dismiss = (0, import_react34.useDismiss)(context, {
+      const dismiss = (0, import_react35.useDismiss)(context, {
         bubbles: true,
         outsidePress: (event) => {
           const toggle = refs.reference.current;
@@ -4438,20 +4521,20 @@ var init_Popover = __esm({
           return true;
         }
       });
-      const { getReferenceProps, getFloatingProps } = (0, import_react34.useInteractions)([dismiss]);
-      const containerClasses = (0, import_dedupe41.default)(
+      const { getReferenceProps, getFloatingProps } = (0, import_react35.useInteractions)([dismiss]);
+      const containerClasses = (0, import_dedupe42.default)(
         "mobius",
         "mobius-popover__container",
         className
       );
-      const setFloatingRef = (0, import_react35.useCallback)(
+      const setFloatingRef = (0, import_react36.useCallback)(
         (node) => {
           refs.setFloating(node);
           floatingContainerRef.current = node;
         },
         [refs]
       );
-      (0, import_react35.useEffect)(() => {
+      (0, import_react36.useEffect)(() => {
         const el = floatingContainerRef.current;
         if (!el) return;
         const preventLabelActivation = (e) => {
@@ -4472,9 +4555,9 @@ var init_Popover = __esm({
         setIsOpen(true);
         onOpen?.();
       };
-      const triggerComponent = (0, import_react35.cloneElement)(trigger, {
+      const triggerComponent = (0, import_react36.cloneElement)(trigger, {
         ref: refs.setReference,
-        className: (0, import_dedupe41.default)(
+        className: (0, import_dedupe42.default)(
           trigger.props.className,
           "mobius-popover__toggle"
         ),
@@ -4520,7 +4603,7 @@ var init_Popover = __esm({
                 /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "mobius-popover__body", children })
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-                import_react34.FloatingArrow,
+                import_react35.FloatingArrow,
                 {
                   ref: arrowRef,
                   context,
@@ -4556,13 +4639,13 @@ function warnAboutInvalidValues(value, minValue, maxValue) {
     console.warn("Progress value is greater than maxValue");
   }
 }
-var import_dedupe42, import_react36, import_Progress, import_jsx_runtime52, sanitizedValue, getLabelComponent, DEFAULT_VALUE, DEFAULT_MIN_VALUE, DEFAULT_MAX_VALUE, Progress;
+var import_dedupe43, import_react37, import_Progress, import_jsx_runtime52, 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_dedupe42 = __toESM(require("classnames/dedupe"));
-    import_react36 = require("react");
+    import_dedupe43 = __toESM(require("classnames/dedupe"));
+    import_react37 = require("react");
     init_Label2();
     init_VisuallyHidden2();
     import_Progress = require("@simplybusiness/mobius/src/components/Progress/Progress.css");
@@ -4599,8 +4682,8 @@ var init_Progress = __esm({
     DEFAULT_MIN_VALUE = 0;
     DEFAULT_MAX_VALUE = 100;
     Progress = ({ ref, ...props }) => {
-      const progressId = (0, import_react36.useId)();
-      const progressLabelId = (0, import_react36.useId)();
+      const progressId = (0, import_react37.useId)();
+      const progressLabelId = (0, import_react37.useId)();
       const {
         id,
         label,
@@ -4625,7 +4708,7 @@ var init_Progress = __esm({
         100
       );
       const barWidth = `${percentage}%`;
-      const classes = (0, import_dedupe42.default)("mobius", "mobius-progress", className, {
+      const classes = (0, import_dedupe43.default)("mobius", "mobius-progress", className, {
         "--is-primary": variant === "primary",
         "--is-secondary": variant === "secondary"
       });
@@ -4665,13 +4748,13 @@ var init_Progress2 = __esm({
 });
 
 // src/components/Radio/Radio.tsx
-var import_dedupe43, import_react37, import_Radio, import_jsx_runtime53, Radio;
+var import_dedupe44, import_react38, import_Radio, import_jsx_runtime53, Radio;
 var init_Radio = __esm({
   "src/components/Radio/Radio.tsx"() {
     "use strict";
     "use client";
-    import_dedupe43 = __toESM(require("classnames/dedupe"));
-    import_react37 = require("react");
+    import_dedupe44 = __toESM(require("classnames/dedupe"));
+    import_react38 = require("react");
     init_ErrorMessage2();
     init_Label2();
     import_Radio = require("@simplybusiness/mobius/src/components/Radio/Radio.css");
@@ -4699,19 +4782,19 @@ var init_Radio = __esm({
       const isMultiline = label && children;
       const isControlled = selected !== void 0;
       const isChecked = isControlled ? selected === value : defaultChecked;
-      const contentRef = (0, import_react37.useRef)(null);
-      const prevOverflowRef = (0, import_react37.useRef)({
+      const contentRef = (0, import_react38.useRef)(null);
+      const prevOverflowRef = (0, import_react38.useRef)({
         vertical: false,
         horizontal: false
       });
-      const hasIconFirst = (0, import_react37.useMemo)(() => {
-        if (!children || import_react37.Children.count(children) === 0) return false;
-        const firstChild = import_react37.Children.toArray(children)[0];
-        if (!(0, import_react37.isValidElement)(firstChild)) return false;
+      const hasIconFirst = (0, import_react38.useMemo)(() => {
+        if (!children || import_react38.Children.count(children) === 0) return false;
+        const firstChild = import_react38.Children.toArray(children)[0];
+        if (!(0, import_react38.isValidElement)(firstChild)) return false;
         const props2 = firstChild.props;
         return "icon" in props2 && props2.icon !== void 0;
       }, [children]);
-      (0, import_react37.useLayoutEffect)(() => {
+      (0, import_react38.useLayoutEffect)(() => {
         if (!contentRef.current || !onOverflow) return;
         if (orientation === "vertical") {
           return;
@@ -4740,13 +4823,13 @@ var init_Radio = __esm({
         "--is-multiline": !!isMultiline,
         "--is-required": isRequired
       };
-      const containerClasses = (0, import_dedupe43.default)(
+      const containerClasses = (0, import_dedupe44.default)(
         "mobius-radio__label",
         radioClasses,
         className,
         { "--has-icon-first": hasIconFirst }
       );
-      const inputClasses = (0, import_dedupe43.default)("mobius-radio__input", radioClasses);
+      const inputClasses = (0, import_dedupe44.default)("mobius-radio__input", radioClasses);
       const { "aria-describedby": _ariaDescribedBy, ...rest } = otherProps;
       const handleChange = (event) => {
         if (setSelected) {
@@ -4792,13 +4875,13 @@ var init_Radio = __esm({
 });
 
 // src/components/Radio/RadioGroup.tsx
-var import_dedupe44, import_react38, import_jsx_runtime54, getDefaultVal, RadioGroup;
+var import_dedupe45, import_react39, import_jsx_runtime54, getDefaultVal, RadioGroup;
 var init_RadioGroup = __esm({
   "src/components/Radio/RadioGroup.tsx"() {
     "use strict";
     "use client";
-    import_dedupe44 = __toESM(require("classnames/dedupe"));
-    import_react38 = require("react");
+    import_dedupe45 = __toESM(require("classnames/dedupe"));
+    import_react39 = require("react");
     init_hooks();
     init_spaceDelimitedList();
     init_ErrorMessage2();
@@ -4832,15 +4915,15 @@ var init_RadioGroup = __esm({
         ...rest
       } = props;
       const defaultSelected = getDefaultVal(children, value || defaultValue);
-      const [selected, setSelected] = (0, import_react38.useState)(defaultSelected);
-      const overflowsRef = (0, import_react38.useRef)({});
-      const [hasOverflow, setHasOverflow] = (0, import_react38.useState)(false);
-      (0, import_react38.useEffect)(() => {
+      const [selected, setSelected] = (0, import_react39.useState)(defaultSelected);
+      const overflowsRef = (0, import_react39.useRef)({});
+      const [hasOverflow, setHasOverflow] = (0, import_react39.useState)(false);
+      (0, import_react39.useEffect)(() => {
         if (value !== void 0) {
           setSelected(value);
         }
       }, [value]);
-      const handleOverflow = (0, import_react38.useCallback)(
+      const handleOverflow = (0, import_react39.useCallback)(
         (radioValue, overflow) => {
           overflowsRef.current = {
             ...overflowsRef.current,
@@ -4864,25 +4947,25 @@ var init_RadioGroup = __esm({
         [`--is-${effectiveOrientation}`]: true,
         [className || ""]: true
       };
-      const radioGroupClasses = (0, import_dedupe44.default)(
+      const radioGroupClasses = (0, import_dedupe45.default)(
         "mobius",
         "mobius-radio-group",
         radioClasses,
         validationClasses
       );
-      const radioWrapperClasses = (0, import_dedupe44.default)("mobius-radio__wrapper", {
+      const radioWrapperClasses = (0, import_dedupe45.default)("mobius-radio__wrapper", {
         [`--is-${effectiveOrientation}`]: true
       });
-      const labelClasses = (0, import_dedupe44.default)(radioClasses, validationClasses);
-      const errorMessageId = (0, import_react38.useId)();
-      const defaultNameAttrId = (0, import_react38.useId)();
+      const labelClasses = (0, import_dedupe45.default)(radioClasses, validationClasses);
+      const errorMessageId = (0, import_react39.useId)();
+      const defaultNameAttrId = (0, import_react39.useId)();
       const nameAttribute = name || defaultNameAttrId;
       const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
       const describedBy = spaceDelimitedList([
         shouldErrorMessageShow,
         props["aria-describedby"]
       ]);
-      const labelId = (0, import_react38.useId)();
+      const labelId = (0, import_react39.useId)();
       return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
         "div",
         {
@@ -4901,10 +4984,10 @@ var init_RadioGroup = __esm({
           role: "radiogroup",
           children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Stack, { gap: "xs", children: [
             label && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Label, { htmlFor: name, id: labelId, className: labelClasses, children: label }),
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: radioWrapperClasses, children: import_react38.Children.map(children, (child) => {
-              if ((0, import_react38.isValidElement)(child)) {
+            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: radioWrapperClasses, children: import_react39.Children.map(children, (child) => {
+              if ((0, import_react39.isValidElement)(child)) {
                 const childValue = child.props.value;
-                return (0, import_react38.cloneElement)(
+                return (0, import_react39.cloneElement)(
                   child,
                   {
                     orientation: effectiveOrientation,
@@ -4941,16 +5024,16 @@ var init_Radio2 = __esm({
 });
 
 // src/components/Segment/SegmentGroup.tsx
-var import_dedupe45, import_jsx_runtime55, SegmentGroup;
+var import_dedupe46, import_jsx_runtime55, SegmentGroup;
 var init_SegmentGroup = __esm({
   "src/components/Segment/SegmentGroup.tsx"() {
     "use strict";
-    import_dedupe45 = __toESM(require("classnames/dedupe"));
+    import_dedupe46 = __toESM(require("classnames/dedupe"));
     import_jsx_runtime55 = require("react/jsx-runtime");
     SegmentGroup = (props) => {
       const { children, horizontal, gap, className, ...rest } = props;
       const gapClass = gap ? `gap-${gap}` : "";
-      const classes = (0, import_dedupe45.default)(
+      const classes = (0, import_dedupe46.default)(
         "mobius",
         "mobius-segment-group",
         className,
@@ -4964,23 +5047,23 @@ var init_SegmentGroup = __esm({
 });
 
 // src/components/Segment/Segment.tsx
-var import_dedupe46, import_Segment, import_jsx_runtime56, Segment;
+var import_dedupe47, import_Segment, import_jsx_runtime56, Segment;
 var init_Segment = __esm({
   "src/components/Segment/Segment.tsx"() {
     "use strict";
-    import_dedupe46 = __toESM(require("classnames/dedupe"));
+    import_dedupe47 = __toESM(require("classnames/dedupe"));
     import_Segment = require("@simplybusiness/mobius/src/components/Segment/Segment.css");
     import_jsx_runtime56 = require("react/jsx-runtime");
-    Segment = (props) => {
+    Segment = ({ ref, ...props }) => {
       const { heading, children, colour, inverted, className, ...rest } = props;
-      const classes = (0, import_dedupe46.default)(
+      const classes = (0, import_dedupe47.default)(
         "mobius",
         "mobius-segment",
         colour,
         { inverted },
         className
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: classes, ...rest, children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { ref, className: classes, ...rest, children: [
         heading && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "mobius-segment__heading", children: heading }),
         children
       ] });
@@ -4999,14 +5082,14 @@ var init_Segment2 = __esm({
 });
 
 // src/components/Select/Select.tsx
-var import_icons13, import_dedupe47, import_react39, import_Select, import_jsx_runtime57, Select;
+var import_icons13, import_dedupe48, import_react40, import_Select, import_jsx_runtime57, Select;
 var init_Select = __esm({
   "src/components/Select/Select.tsx"() {
     "use strict";
     "use client";
     import_icons13 = require("@simplybusiness/icons");
-    import_dedupe47 = __toESM(require("classnames/dedupe"));
-    import_react39 = require("react");
+    import_dedupe48 = __toESM(require("classnames/dedupe"));
+    import_react40 = require("react");
     init_hooks();
     init_useLabel2();
     init_spaceDelimitedList();
@@ -5036,24 +5119,24 @@ var init_Select = __esm({
         "--is-required": typeof isRequired === "boolean" && isRequired,
         "--is-optional": typeof isRequired === "boolean" && !isRequired
       };
-      const sharedClasses = (0, import_dedupe47.default)(validationClasses, stateClasses);
-      const wrapperClasses = (0, import_dedupe47.default)(
+      const sharedClasses = (0, import_dedupe48.default)(validationClasses, stateClasses);
+      const wrapperClasses = (0, import_dedupe48.default)(
         "mobius-select__wrapper",
         sharedClasses,
         otherProps.className
       );
-      const selectClasses = (0, import_dedupe47.default)(
+      const selectClasses = (0, import_dedupe48.default)(
         "mobius-select",
         sharedClasses,
         otherProps.className
       );
-      const labelClasses = (0, import_dedupe47.default)(
+      const labelClasses = (0, import_dedupe48.default)(
         "mobius-label",
         sharedClasses,
         otherProps.className
       );
-      const iconClasses = (0, import_dedupe47.default)("mobius-select__icon", sharedClasses);
-      const errorMessageId = (0, import_react39.useId)();
+      const iconClasses = (0, import_dedupe48.default)("mobius-select__icon", sharedClasses);
+      const errorMessageId = (0, import_react40.useId)();
       const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
       const describedBy = spaceDelimitedList([
         shouldErrorMessageShow,
@@ -5107,22 +5190,22 @@ function numberFormatter(value, formatOptions, locale = navigator.languages?.[0]
   }
   return new Intl.NumberFormat(locale, formatOptions).format(+(value || 0));
 }
-var import_react40;
+var import_react41;
 var init_helpers = __esm({
   "src/components/Slider/helpers.ts"() {
     "use strict";
-    import_react40 = require("react");
+    import_react41 = require("react");
   }
 });
 
 // src/components/Slider/Slider.tsx
-var import_dedupe48, import_react41, import_Slider, import_jsx_runtime58, Slider;
+var import_dedupe49, import_react42, import_Slider, import_jsx_runtime58, Slider;
 var init_Slider = __esm({
   "src/components/Slider/Slider.tsx"() {
     "use strict";
     "use client";
-    import_dedupe48 = __toESM(require("classnames/dedupe"));
-    import_react41 = require("react");
+    import_dedupe49 = __toESM(require("classnames/dedupe"));
+    import_react42 = require("react");
     init_hooks();
     init_Label2();
     init_helpers();
@@ -5148,11 +5231,11 @@ var init_Slider = __esm({
         formatOptions,
         isDisabled = false
       } = props;
-      const trackRef = (0, import_react41.useRef)(null);
-      const [currentValue, setCurrentValue] = (0, import_react41.useState)(
+      const trackRef = (0, import_react42.useRef)(null);
+      const [currentValue, setCurrentValue] = (0, import_react42.useState)(
         value || defaultValue || 0
       );
-      const [isDragging, setIsDraggging] = (0, import_react41.useState)(false);
+      const [isDragging, setIsDraggging] = (0, import_react42.useState)(false);
       const { labelProps, fieldProps } = useLabel({
         id,
         label,
@@ -5160,7 +5243,7 @@ var init_Slider = __esm({
         "aria-labelledby": ariaLabelledBy
       });
       const formattedValue = numberFormatter(currentValue, formatOptions);
-      const classes = (0, import_dedupe48.default)("mobius", "mobius-slider", className, {
+      const classes = (0, import_dedupe49.default)("mobius", "mobius-slider", className, {
         "--is-disabled": isDisabled,
         "--is-primary": variant === "primary",
         "--is-secondary": variant === "secondary",
@@ -5224,17 +5307,17 @@ var init_Slider2 = __esm({
 });
 
 // src/components/SVG/SVG.tsx
-var import_react42, import_dedupe49, import_jsx_runtime59, SVG;
+var import_react43, import_dedupe50, import_jsx_runtime59, SVG;
 var init_SVG = __esm({
   "src/components/SVG/SVG.tsx"() {
     "use strict";
-    import_react42 = require("react");
-    import_dedupe49 = __toESM(require("classnames/dedupe"));
+    import_react43 = require("react");
+    import_dedupe50 = __toESM(require("classnames/dedupe"));
     import_jsx_runtime59 = require("react/jsx-runtime");
     SVG = ({ ref, ...props }) => {
       const { children, className, ...otherProps } = props;
-      const classes = (0, import_dedupe49.default)("mobius", "mobius-svg", className);
-      const svgNode = import_react42.Children.only(children);
+      const classes = (0, import_dedupe50.default)("mobius", "mobius-svg", className);
+      const svgNode = import_react43.Children.only(children);
       const { children: svgChildren, viewBox, xmlns } = svgNode.props;
       return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
         "svg",
@@ -5261,13 +5344,13 @@ var init_SVG2 = __esm({
 });
 
 // src/components/Switch/Switch.tsx
-var import_react43, import_dedupe50, import_Switch, import_jsx_runtime60, Switch;
+var import_react44, import_dedupe51, import_Switch, import_jsx_runtime60, Switch;
 var init_Switch = __esm({
   "src/components/Switch/Switch.tsx"() {
     "use strict";
     "use client";
-    import_react43 = require("react");
-    import_dedupe50 = __toESM(require("classnames/dedupe"));
+    import_react44 = require("react");
+    import_dedupe51 = __toESM(require("classnames/dedupe"));
     init_VisuallyHidden2();
     import_Switch = require("@simplybusiness/mobius/src/components/Switch/Switch.css");
     import_jsx_runtime60 = require("react/jsx-runtime");
@@ -5279,11 +5362,11 @@ var init_Switch = __esm({
         isDisabled = false,
         ...otherProps
       } = props;
-      const [enabled, setEnabled] = (0, import_react43.useState)(checked);
-      (0, import_react43.useEffect)(() => {
+      const [enabled, setEnabled] = (0, import_react44.useState)(checked);
+      (0, import_react44.useEffect)(() => {
         setEnabled(checked);
       }, [checked]);
-      const classes = (0, import_dedupe50.default)(
+      const classes = (0, import_dedupe51.default)(
         "mobius",
         "mobius-switch",
         {
@@ -5327,15 +5410,15 @@ var init_Switch2 = __esm({
 });
 
 // src/components/Table/Table.tsx
-var import_dedupe51, import_Table, import_jsx_runtime61, Table;
+var import_dedupe52, import_Table, import_jsx_runtime61, Table;
 var init_Table = __esm({
   "src/components/Table/Table.tsx"() {
     "use strict";
-    import_dedupe51 = __toESM(require("classnames/dedupe"));
+    import_dedupe52 = __toESM(require("classnames/dedupe"));
     import_Table = require("@simplybusiness/mobius/src/components/Table/Table.css");
     import_jsx_runtime61 = require("react/jsx-runtime");
     Table = ({ ref, ...props }) => {
-      const classes = (0, import_dedupe51.default)("mobius", "mobius-table", props.className);
+      const classes = (0, import_dedupe52.default)("mobius", "mobius-table", props.className);
       return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("table", { ref, ...props, className: classes });
     };
     Table.displayName = "Table";
@@ -5343,14 +5426,14 @@ var init_Table = __esm({
 });
 
 // src/components/Table/Head.tsx
-var import_dedupe52, import_jsx_runtime62, Head;
+var import_dedupe53, import_jsx_runtime62, Head;
 var init_Head = __esm({
   "src/components/Table/Head.tsx"() {
     "use strict";
-    import_dedupe52 = __toESM(require("classnames/dedupe"));
+    import_dedupe53 = __toESM(require("classnames/dedupe"));
     import_jsx_runtime62 = require("react/jsx-runtime");
     Head = ({ ref, ...props }) => {
-      const classes = (0, import_dedupe52.default)("mobius", "mobius-table__head", props.className);
+      const classes = (0, import_dedupe53.default)("mobius", "mobius-table__head", props.className);
       return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("thead", { ref, ...props, className: classes });
     };
     Head.displayName = "Table.Head";
@@ -5358,14 +5441,14 @@ var init_Head = __esm({
 });
 
 // src/components/Table/Body.tsx
-var import_dedupe53, import_jsx_runtime63, Body;
+var import_dedupe54, import_jsx_runtime63, Body;
 var init_Body = __esm({
   "src/components/Table/Body.tsx"() {
     "use strict";
-    import_dedupe53 = __toESM(require("classnames/dedupe"));
+    import_dedupe54 = __toESM(require("classnames/dedupe"));
     import_jsx_runtime63 = require("react/jsx-runtime");
     Body = ({ ref, ...props }) => {
-      const classes = (0, import_dedupe53.default)("mobius", "mobius-table__body", props.className);
+      const classes = (0, import_dedupe54.default)("mobius", "mobius-table__body", props.className);
       return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("tbody", { ref, ...props, className: classes });
     };
     Body.displayName = "Table.Body";
@@ -5373,14 +5456,14 @@ var init_Body = __esm({
 });
 
 // src/components/Table/Foot.tsx
-var import_dedupe54, import_jsx_runtime64, Foot;
+var import_dedupe55, import_jsx_runtime64, Foot;
 var init_Foot = __esm({
   "src/components/Table/Foot.tsx"() {
     "use strict";
-    import_dedupe54 = __toESM(require("classnames/dedupe"));
+    import_dedupe55 = __toESM(require("classnames/dedupe"));
     import_jsx_runtime64 = require("react/jsx-runtime");
     Foot = ({ ref, ...props }) => {
-      const classes = (0, import_dedupe54.default)("mobius", "mobius-table__foot", props.className);
+      const classes = (0, import_dedupe55.default)("mobius", "mobius-table__foot", props.className);
       return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("tfoot", { ref, ...props, className: classes });
     };
     Foot.displayName = "Table.Foot";
@@ -5388,14 +5471,14 @@ var init_Foot = __esm({
 });
 
 // src/components/Table/Row.tsx
-var import_dedupe55, import_jsx_runtime65, Row;
+var import_dedupe56, import_jsx_runtime65, Row;
 var init_Row = __esm({
   "src/components/Table/Row.tsx"() {
     "use strict";
-    import_dedupe55 = __toESM(require("classnames/dedupe"));
+    import_dedupe56 = __toESM(require("classnames/dedupe"));
     import_jsx_runtime65 = require("react/jsx-runtime");
     Row = ({ ref, ...props }) => {
-      const classes = (0, import_dedupe55.default)("mobius", "mobius-table__row", props.className);
+      const classes = (0, import_dedupe56.default)("mobius", "mobius-table__row", props.className);
       return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("tr", { ref, ...props, className: classes });
     };
     Row.displayName = "Table.Row";
@@ -5403,33 +5486,33 @@ var init_Row = __esm({
 });
 
 // src/components/Table/HeaderCell.tsx
-var import_dedupe56, import_jsx_runtime66, HeaderCell;
+var import_dedupe57, import_jsx_runtime66, HeaderCell;
 var init_HeaderCell = __esm({
   "src/components/Table/HeaderCell.tsx"() {
     "use strict";
-    import_dedupe56 = __toESM(require("classnames/dedupe"));
+    import_dedupe57 = __toESM(require("classnames/dedupe"));
     import_jsx_runtime66 = require("react/jsx-runtime");
-    HeaderCell = ({ ref, ...props }) => {
-      const classes = (0, import_dedupe56.default)(
+    HeaderCell = ({ ref, scope = "col", ...props }) => {
+      const classes = (0, import_dedupe57.default)(
         "mobius",
         "mobius-table__head-cell",
         props.className
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("th", { ...props, ref, className: classes });
+      return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("th", { ...props, ref, scope, className: classes });
     };
     HeaderCell.displayName = "Table.HeaderCell";
   }
 });
 
 // src/components/Table/Cell.tsx
-var import_dedupe57, import_jsx_runtime67, Cell;
+var import_dedupe58, import_jsx_runtime67, Cell;
 var init_Cell = __esm({
   "src/components/Table/Cell.tsx"() {
     "use strict";
-    import_dedupe57 = __toESM(require("classnames/dedupe"));
+    import_dedupe58 = __toESM(require("classnames/dedupe"));
     import_jsx_runtime67 = require("react/jsx-runtime");
     Cell = ({ ref, ...props }) => {
-      const classes = (0, import_dedupe57.default)(
+      const classes = (0, import_dedupe58.default)(
         "mobius",
         "mobius-table__body-cell",
         props.className
@@ -5473,15 +5556,15 @@ var init_Text2 = __esm({
 });
 
 // src/components/TextAreaInput/TextAreaInput.tsx
-var import_dedupe58, import_jsx_runtime68, TextAreaInput;
+var import_dedupe59, import_jsx_runtime68, TextAreaInput;
 var init_TextAreaInput = __esm({
   "src/components/TextAreaInput/TextAreaInput.tsx"() {
     "use strict";
-    import_dedupe58 = __toESM(require("classnames/dedupe"));
+    import_dedupe59 = __toESM(require("classnames/dedupe"));
     import_jsx_runtime68 = require("react/jsx-runtime");
     TextAreaInput = ({ ref, ...props }) => {
       const { isSelected, isDisabled, isReadOnly, isRequired, ...otherProps } = props;
-      const classes = (0, import_dedupe58.default)(
+      const classes = (0, import_dedupe59.default)(
         "mobius",
         "mobius-text-area__input",
         {
@@ -5515,12 +5598,12 @@ var init_TextAreaInput2 = __esm({
 });
 
 // src/components/TextArea/TextArea.tsx
-var import_dedupe59, import_TextArea, import_jsx_runtime69, TextArea;
+var import_dedupe60, import_TextArea, import_jsx_runtime69, TextArea;
 var init_TextArea = __esm({
   "src/components/TextArea/TextArea.tsx"() {
     "use strict";
     "use client";
-    import_dedupe59 = __toESM(require("classnames/dedupe"));
+    import_dedupe60 = __toESM(require("classnames/dedupe"));
     init_hooks();
     init_ErrorMessage2();
     init_Label2();
@@ -5538,10 +5621,10 @@ var init_TextArea = __esm({
         ...otherProps
       } = props;
       const { inputProps, labelProps, errorMessageProps } = useTextField(props);
-      const classes = (0, import_dedupe59.default)("mobius", "mobius-text-area", className);
+      const classes = (0, import_dedupe60.default)("mobius", "mobius-text-area", className);
       const validationClasses = useValidationClasses({ isInvalid });
-      const inputClasses = (0, import_dedupe59.default)("mobius-text-area__input", validationClasses);
-      const labelClasses = (0, import_dedupe59.default)(
+      const inputClasses = (0, import_dedupe60.default)("mobius-text-area__input", validationClasses);
+      const labelClasses = (0, import_dedupe60.default)(
         {
           "--is-disabled": isDisabled
         },
@@ -5576,11 +5659,11 @@ var init_TextArea2 = __esm({
 });
 
 // src/components/Title/Title.tsx
-var import_dedupe60, import_Title, import_jsx_runtime70, Title;
+var import_dedupe61, import_Title, import_jsx_runtime70, Title;
 var init_Title = __esm({
   "src/components/Title/Title.tsx"() {
     "use strict";
-    import_dedupe60 = __toESM(require("classnames/dedupe"));
+    import_dedupe61 = __toESM(require("classnames/dedupe"));
     init_Flex2();
     import_Title = require("@simplybusiness/mobius/src/components/Title/Title.css");
     import_jsx_runtime70 = require("react/jsx-runtime");
@@ -5591,10 +5674,10 @@ var init_Title = __esm({
         description,
         ...otherProps
       } = props;
-      const classes = (0, import_dedupe60.default)("mobius", "mobius-title", otherProps.className);
-      const headerClasses = (0, import_dedupe60.default)("mobius", "mobius-title__header");
-      const contentClasses = (0, import_dedupe60.default)("mobius", "mobius-title__description");
-      const containerClasses = (0, import_dedupe60.default)("mobius", "mobius-title__container");
+      const classes = (0, import_dedupe61.default)("mobius", "mobius-title", otherProps.className);
+      const headerClasses = (0, import_dedupe61.default)("mobius", "mobius-title__header");
+      const contentClasses = (0, import_dedupe61.default)("mobius", "mobius-title__description");
+      const containerClasses = (0, import_dedupe61.default)("mobius", "mobius-title__container");
       return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Element, { ref, ...otherProps, className: classes, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(Flex, { flexDirection: "column", className: containerClasses, children: [
         /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("p", { className: headerClasses, children: title }),
         /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("p", { className: contentClasses, children: description })
@@ -5624,12 +5707,12 @@ var init_state = __esm({
 });
 
 // src/components/Toast/Toast.tsx
-var import_icons14, import_dedupe61, import_sonner, import_Toast, import_jsx_runtime71, variantIcons, variantColors, ToastIcon, CloseIcon, ToastContent, createCustomToast, toast;
+var import_icons14, import_dedupe62, import_sonner, import_Toast, import_jsx_runtime71, variantIcons, variantColors, ToastIcon, CloseIcon, ToastContent, createCustomToast, toast;
 var init_Toast = __esm({
   "src/components/Toast/Toast.tsx"() {
     "use strict";
     import_icons14 = require("@simplybusiness/icons");
-    import_dedupe61 = __toESM(require("classnames/dedupe"));
+    import_dedupe62 = __toESM(require("classnames/dedupe"));
     import_sonner = require("sonner");
     init_Icon2();
     init_state();
@@ -5657,7 +5740,7 @@ var init_Toast = __esm({
       action,
       cancel,
       showCloseButton = toastState.showCloseButton
-    }) => /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: (0, import_dedupe61.default)("mobius", "mobius-toast", `--${variant}`), children: [
+    }) => /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: (0, import_dedupe62.default)("mobius", "mobius-toast", `--${variant}`), children: [
       /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ToastIcon, { variant }),
       /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "mobius-toast__body", children: [
         /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "mobius-toast__content", children: [
@@ -5737,11 +5820,11 @@ var init_Toast = __esm({
 });
 
 // src/components/Toast/Toaster.tsx
-var import_react44, import_sonner2, import_jsx_runtime72, Toaster;
+var import_react45, import_sonner2, import_jsx_runtime72, Toaster;
 var init_Toaster = __esm({
   "src/components/Toast/Toaster.tsx"() {
     "use strict";
-    import_react44 = require("react");
+    import_react45 = require("react");
     import_sonner2 = require("sonner");
     init_state();
     import_jsx_runtime72 = require("react/jsx-runtime");
@@ -5753,7 +5836,7 @@ var init_Toaster = __esm({
       visibleToasts = 3,
       gap = 8
     }) => {
-      (0, import_react44.useEffect)(() => {
+      (0, import_react45.useEffect)(() => {
         toastState.showCloseButton = closeButton;
       }, [closeButton]);
       return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
@@ -5849,12 +5932,12 @@ var init_constants = __esm({
 });
 
 // src/components/Trust/Trust.tsx
-var import_dedupe62, import_react45, import_jsx_runtime73, Trust;
+var import_dedupe63, import_react46, import_jsx_runtime73, Trust;
 var init_Trust = __esm({
   "src/components/Trust/Trust.tsx"() {
     "use strict";
-    import_dedupe62 = __toESM(require("classnames/dedupe"));
-    import_react45 = require("react");
+    import_dedupe63 = __toESM(require("classnames/dedupe"));
+    import_react46 = require("react");
     init_utils();
     init_constants();
     import_jsx_runtime73 = require("react/jsx-runtime");
@@ -5869,8 +5952,8 @@ var init_Trust = __esm({
         stars,
         className
       } = props;
-      const [isMounted, setIsMounted] = (0, import_react45.useState)(false);
-      const trustRef = (0, import_react45.useRef)(null);
+      const [isMounted, setIsMounted] = (0, import_react46.useState)(false);
+      const trustRef = (0, import_react46.useRef)(null);
       const {
         templateId,
         className: variantClassName,
@@ -5887,7 +5970,7 @@ var init_Trust = __esm({
         "data-style-height": height,
         "data-stars": stars
       };
-      const classes = (0, import_dedupe62.default)(
+      const classes = (0, import_dedupe63.default)(
         "mobius",
         "mobius-trust",
         REQUIRED_TRUSTPILOT_CLASS_NAME,
@@ -5897,13 +5980,13 @@ var init_Trust = __esm({
         },
         className
       );
-      (0, import_react45.useEffect)(() => {
+      (0, import_react46.useEffect)(() => {
         const hasTrustpilotLoaded = trustRef.current && window?.Trustpilot && window?.Trustpilot.loadFromElement;
         if (isMounted && hasTrustpilotLoaded) {
           window.Trustpilot.loadFromElement(trustRef.current, true);
         }
       }, [isMounted]);
-      (0, import_react45.useEffect)(() => {
+      (0, import_react46.useEffect)(() => {
         setIsMounted(true);
       }, []);
       if (!isMounted) return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { style: styles });
@@ -5947,13 +6030,13 @@ var init_Trust2 = __esm({
 });
 
 // src/components/ExpandableText/ExpandableText.tsx
-var import_dedupe63, import_react46, import_ExpandableText, import_jsx_runtime74, ExpandableText;
+var import_dedupe64, import_react47, import_ExpandableText, import_jsx_runtime74, ExpandableText;
 var init_ExpandableText = __esm({
   "src/components/ExpandableText/ExpandableText.tsx"() {
     "use strict";
     "use client";
-    import_dedupe63 = __toESM(require("classnames/dedupe"));
-    import_react46 = require("react");
+    import_dedupe64 = __toESM(require("classnames/dedupe"));
+    import_react47 = require("react");
     init_src();
     import_ExpandableText = require("@simplybusiness/mobius/src/components/ExpandableText/ExpandableText.css");
     import_jsx_runtime74 = require("react/jsx-runtime");
@@ -5970,14 +6053,14 @@ var init_ExpandableText = __esm({
         onToggle,
         ...otherProps
       } = props;
-      const [isExpanded, setIsExpanded] = (0, import_react46.useState)(false);
-      const [isCollapsed, setIsCollapsed] = (0, import_react46.useState)(false);
-      const textRef = (0, import_react46.useRef)(null);
+      const [isExpanded, setIsExpanded] = (0, import_react47.useState)(false);
+      const [isCollapsed, setIsCollapsed] = (0, import_react47.useState)(false);
+      const textRef = (0, import_react47.useRef)(null);
       const { down } = useBreakpoint();
-      const baseId = (0, import_react46.useId)();
+      const baseId = (0, import_react47.useId)();
       const expandButtonId = `expandable-text-expand-${baseId}`;
       const shouldCollapse = breakpoint ? down(breakpoint) : true;
-      (0, import_react46.useEffect)(() => {
+      (0, import_react47.useEffect)(() => {
         if (!shouldCollapse || !textRef.current) {
           setIsCollapsed(false);
           return;
@@ -5993,8 +6076,8 @@ var init_ExpandableText = __esm({
         setIsExpanded(expanded);
         onToggle?.(expanded);
       };
-      const classes = (0, import_dedupe63.default)("mobius-expandable-text", className);
-      const textContainerClasses = (0, import_dedupe63.default)("mobius-expandable-text__content", {
+      const classes = (0, import_dedupe64.default)("mobius-expandable-text", className);
+      const textContainerClasses = (0, import_dedupe64.default)("mobius-expandable-text__content", {
         "mobius-expandable-text__content--collapsed": !isExpanded
       });
       const textContainerStyle = {
@@ -6054,17 +6137,17 @@ var MaskedField_exports = {};
 __export(MaskedField_exports, {
   MaskedField: () => MaskedField
 });
-var import_react47, import_react_imask, import_jsx_runtime75, useAcceptHandler, useCombinedRef, useBlurHandler, ControlledMaskedField, UncontrolledMaskedField, MaskedField;
+var import_react48, import_react_imask, import_jsx_runtime75, useAcceptHandler, useCombinedRef, useBlurHandler, ControlledMaskedField, UncontrolledMaskedField, MaskedField;
 var init_MaskedField = __esm({
   "src/components/MaskedField/MaskedField.tsx"() {
     "use strict";
     "use client";
-    import_react47 = require("react");
+    import_react48 = require("react");
     import_react_imask = require("react-imask");
     init_TextField2();
     import_jsx_runtime75 = require("react/jsx-runtime");
     useAcceptHandler = (onChange, useMaskedValue, name) => {
-      return (0, import_react47.useCallback)(
+      return (0, import_react48.useCallback)(
         (maskedValue, maskInstance) => {
           if (!onChange) {
             return;
@@ -6080,7 +6163,7 @@ var init_MaskedField = __esm({
       );
     };
     useCombinedRef = (imaskRef, forwardedRef) => {
-      return (0, import_react47.useCallback)(
+      return (0, import_react48.useCallback)(
         (element) => {
           imaskRef.current = element;
           if (typeof forwardedRef === "function") {
@@ -6093,7 +6176,7 @@ var init_MaskedField = __esm({
       );
     };
     useBlurHandler = (onBlur, maskRef, useMaskedValue, name) => {
-      return (0, import_react47.useCallback)(
+      return (0, import_react48.useCallback)(
         (event) => {
           if (!onBlur || !maskRef.current) {
             return;
@@ -6123,7 +6206,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_react47.useEffect)(() => {
+      (0, import_react48.useEffect)(() => {
         if (!maskRef.current) {
           return;
         }
@@ -6299,6 +6382,7 @@ __export(components_exports, {
   VisuallyHidden: () => VisuallyHidden,
   buildOptionTestId: () => buildOptionTestId,
   convertToDateFormat: () => convertToDateFormat,
+  getElementType: () => getElementType,
   isValidDate: () => isValidDate,
   toast: () => toast,
   useDrawer: () => useDrawer,