@simplybusiness/mobius 10.3.0 → 10.3.2

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

@@ -1353,14 +1353,28 @@ var init_Text = __esm({
 });
 
 // src/components/TextOrHTML/TextOrHTML.tsx
-var import_react10, import_jsx_runtime9, isHTML, TextOrHTML;
+var import_dedupe8, import_react10, import_jsx_runtime9, isBlockHTML, containsHTML, buildTextClasses, TextOrHTML;
 var init_TextOrHTML = __esm({
   "src/components/TextOrHTML/TextOrHTML.tsx"() {
     "use strict";
+    import_dedupe8 = __toESM(require("classnames/dedupe"));
     import_react10 = require("react");
     init_Text();
     import_jsx_runtime9 = 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) || /&(?:#\d+|#x[\da-f]+|[a-z]\w*);/i.test(text);
+    buildTextClasses = (textProps, htmlClassName) => {
+      const { variant, elementType, spacing, className } = textProps;
+      const variantType = variant || getElementType(variant, elementType);
+      return (0, import_dedupe8.default)(
+        "mobius",
+        "mobius-text",
+        { [`--is-${variantType}`]: variantType },
+        { [`--has-line-height-${spacing}`]: spacing },
+        className,
+        htmlClassName
+      );
+    };
     TextOrHTML = ({
       ref,
       text,
@@ -1370,11 +1384,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_react10.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_runtime9.jsx)(
+          Element,
+          {
+            ref,
+            ...domProps,
+            className: classes,
+            dangerouslySetInnerHTML: dangerousHTML
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Element, { ref, ...domProps, className: classes, children: text });
+      }
+      const DangerousComponent = htmlElementType ?? (textIsBlockHTML ? "div" : "span");
       const dangerousElement = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         DangerousComponent,
         {
@@ -1382,7 +1408,7 @@ var init_TextOrHTML = __esm({
           dangerouslySetInnerHTML: dangerousHTML
         }
       );
-      if (shouldWrapInText) {
+      if (textWrapper) {
         return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { ref, ...textProps, children: dangerousElement });
       }
       return dangerousElement;
@@ -1403,12 +1429,12 @@ var init_TextOrHTML2 = __esm({
 function isAlertVariant(value) {
   return value === "info" || value === "success" || value === "warning" || value === "error";
 }
-var import_icons3, import_dedupe8, import_Alert, import_jsx_runtime10, Alert;
+var import_icons3, import_dedupe9, import_Alert, import_jsx_runtime10, Alert;
 var init_Alert = __esm({
   "src/components/Alert/Alert.tsx"() {
     "use strict";
     import_icons3 = require("@simplybusiness/icons");
-    import_dedupe8 = __toESM(require("classnames/dedupe"));
+    import_dedupe9 = __toESM(require("classnames/dedupe"));
     init_Icon2();
     init_TextOrHTML2();
     import_Alert = require("@simplybusiness/mobius/src/components/Alert/Alert.css");
@@ -1425,7 +1451,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_dedupe8.default)(
+      const classes = (0, import_dedupe9.default)(
         "mobius",
         "mobius-alert",
         {
@@ -1443,9 +1469,9 @@ var init_Alert = __esm({
         warning: import_icons3.warning,
         error: import_icons3.error
       };
-      const headerClasses = (0, import_dedupe8.default)("mobius", "mobius-alert__header");
-      const iconClasses = (0, import_dedupe8.default)("mobius", "mobius-alert__icon");
-      const contentClasses = (0, import_dedupe8.default)("mobius", "mobius-alert__content");
+      const headerClasses = (0, import_dedupe9.default)("mobius", "mobius-alert__header");
+      const iconClasses = (0, import_dedupe9.default)("mobius", "mobius-alert__icon");
+      const contentClasses = (0, import_dedupe9.default)("mobius", "mobius-alert__content");
       return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Element, { ref, role: "alert", ...otherProps, className: classes, children: [
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: iconClasses, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { icon: icon[variant], color: colorValue }) }),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
@@ -1476,11 +1502,11 @@ var init_Alert2 = __esm({
 });
 
 // src/components/Box/Box.tsx
-var import_dedupe9, import_Box, import_jsx_runtime11, Box;
+var import_dedupe10, import_Box, import_jsx_runtime11, Box;
 var init_Box = __esm({
   "src/components/Box/Box.tsx"() {
     "use strict";
-    import_dedupe9 = __toESM(require("classnames/dedupe"));
+    import_dedupe10 = __toESM(require("classnames/dedupe"));
     init_utils();
     import_Box = require("@simplybusiness/mobius/src/components/Box/Box.css");
     import_jsx_runtime11 = require("react/jsx-runtime");
@@ -1509,7 +1535,7 @@ var init_Box = __esm({
         style,
         ...otherProps
       } = props;
-      const classes = (0, import_dedupe9.default)("mobius", "mobius-box", otherProps.className);
+      const classes = (0, import_dedupe10.default)("mobius", "mobius-box", otherProps.className);
       const fromProps = filterUndefinedProps({
         padding: getSpacingValue(padding),
         paddingInline: getSpacingValue(paddingInline || paddingX),
@@ -1544,13 +1570,13 @@ var init_Box2 = __esm({
 });
 
 // src/components/Breadcrumbs/Breadcrumbs.tsx
-var import_react11, import_dedupe10, import_Breadcrumbs, import_jsx_runtime12, Breadcrumbs;
+var import_react11, import_dedupe11, import_Breadcrumbs, import_jsx_runtime12, Breadcrumbs;
 var init_Breadcrumbs = __esm({
   "src/components/Breadcrumbs/Breadcrumbs.tsx"() {
     "use strict";
     "use client";
     import_react11 = require("react");
-    import_dedupe10 = __toESM(require("classnames/dedupe"));
+    import_dedupe11 = __toESM(require("classnames/dedupe"));
     import_Breadcrumbs = require("@simplybusiness/mobius/src/components/Breadcrumbs/Breadcrumbs.css");
     import_jsx_runtime12 = require("react/jsx-runtime");
     Breadcrumbs = ({ ref, ...props }) => {
@@ -1558,7 +1584,7 @@ var init_Breadcrumbs = __esm({
       const { navProps } = { navProps: { "aria-label": ariaLabel } };
       const { children, ...otherProps } = props;
       const childArray = import_react11.Children.toArray(children);
-      const classes = (0, import_dedupe10.default)(
+      const classes = (0, import_dedupe11.default)(
         "mobius",
         "mobius-breadcrumb",
         otherProps.className
@@ -1578,13 +1604,13 @@ var init_Breadcrumbs = __esm({
 });
 
 // src/components/Breadcrumbs/BreadcrumbItem.tsx
-var import_react12, import_dedupe11, import_jsx_runtime13, BreadcrumbItem;
+var import_react12, import_dedupe12, import_jsx_runtime13, BreadcrumbItem;
 var init_BreadcrumbItem = __esm({
   "src/components/Breadcrumbs/BreadcrumbItem.tsx"() {
     "use strict";
     "use client";
     import_react12 = require("react");
-    import_dedupe11 = __toESM(require("classnames/dedupe"));
+    import_dedupe12 = __toESM(require("classnames/dedupe"));
     init_Box2();
     import_jsx_runtime13 = require("react/jsx-runtime");
     BreadcrumbItem = ({ ref, ...props }) => {
@@ -1603,7 +1629,7 @@ var init_BreadcrumbItem = __esm({
           ...otherProps
         }
       };
-      const classes = (0, import_dedupe11.default)(
+      const classes = (0, import_dedupe12.default)(
         "mobius",
         "mobius-breadcrumb__item",
         props.className
@@ -1713,12 +1739,12 @@ var init_Success = __esm({
 });
 
 // src/components/Button/Button.tsx
-var import_dedupe12, import_Button, import_jsx_runtime17, Button;
+var import_dedupe13, import_Button, import_jsx_runtime17, Button;
 var init_Button = __esm({
   "src/components/Button/Button.tsx"() {
     "use strict";
     "use client";
-    import_dedupe12 = __toESM(require("classnames/dedupe"));
+    import_dedupe13 = __toESM(require("classnames/dedupe"));
     init_Loading();
     init_useButton2();
     init_Success();
@@ -1738,7 +1764,7 @@ var init_Button = __esm({
         ...otherProps
       } = props;
       const { buttonProps } = useButton(props);
-      otherProps.className = (0, import_dedupe12.default)(
+      otherProps.className = (0, import_dedupe13.default)(
         "mobius",
         "mobius-button",
         `--variant-${variant}`,
@@ -1768,16 +1794,16 @@ var init_Button2 = __esm({
 });
 
 // src/components/Stack/Stack.tsx
-var import_dedupe13, import_Stack, import_jsx_runtime18, Stack;
+var import_dedupe14, import_Stack, import_jsx_runtime18, Stack;
 var init_Stack = __esm({
   "src/components/Stack/Stack.tsx"() {
     "use strict";
-    import_dedupe13 = __toESM(require("classnames/dedupe"));
+    import_dedupe14 = __toESM(require("classnames/dedupe"));
     import_Stack = require("@simplybusiness/mobius/src/components/Stack/Stack.css");
     import_jsx_runtime18 = require("react/jsx-runtime");
     Stack = ({ ref, ...props }) => {
       const { elementType: Element = "div", gap, ...otherProps } = props;
-      const classes = (0, import_dedupe13.default)(
+      const classes = (0, import_dedupe14.default)(
         "mobius",
         "mobius-stack",
         {
@@ -1800,13 +1826,13 @@ var init_Stack2 = __esm({
 });
 
 // src/components/Checkbox/Checkbox.tsx
-var import_react13, import_dedupe14, import_icons6, import_Checkbox, import_jsx_runtime19, Checkbox;
+var import_react13, import_dedupe15, import_icons6, import_Checkbox, import_jsx_runtime19, Checkbox;
 var init_Checkbox = __esm({
   "src/components/Checkbox/Checkbox.tsx"() {
     "use strict";
     "use client";
     import_react13 = require("react");
-    import_dedupe14 = __toESM(require("classnames/dedupe"));
+    import_dedupe15 = __toESM(require("classnames/dedupe"));
     import_icons6 = require("@simplybusiness/icons");
     init_ErrorMessage2();
     init_spaceDelimitedList();
@@ -1845,7 +1871,7 @@ var init_Checkbox = __esm({
         }
       }, [selected, isControlled]);
       const validationClasses = useValidationClasses({ isInvalid });
-      const sharedClasses = (0, import_dedupe14.default)(
+      const sharedClasses = (0, import_dedupe15.default)(
         {
           "--is-disabled": isDisabled,
           "--is-selected": checked,
@@ -1854,15 +1880,15 @@ var init_Checkbox = __esm({
         },
         validationClasses
       );
-      const wrapperClasses = (0, import_dedupe14.default)(
+      const wrapperClasses = (0, import_dedupe15.default)(
         "mobius",
         "mobius-checkbox",
         sharedClasses,
         className
       );
-      const labelClasses = (0, import_dedupe14.default)("mobius-checkbox__label", sharedClasses);
-      const inputClasses = (0, import_dedupe14.default)("mobius-checkbox__input", sharedClasses);
-      const iconClasses = (0, import_dedupe14.default)("mobius-checkbox__icon", sharedClasses);
+      const labelClasses = (0, import_dedupe15.default)("mobius-checkbox__label", sharedClasses);
+      const inputClasses = (0, import_dedupe15.default)("mobius-checkbox__input", sharedClasses);
+      const iconClasses = (0, import_dedupe15.default)("mobius-checkbox__icon", sharedClasses);
       const errorMessageId = (0, import_react13.useId)();
       const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
       const describedBy = spaceDelimitedList([
@@ -1917,16 +1943,16 @@ var init_Checkbox = __esm({
 });
 
 // src/components/Label/Label.tsx
-var import_dedupe15, import_Label, import_jsx_runtime20, Label;
+var import_dedupe16, import_Label, import_jsx_runtime20, Label;
 var init_Label = __esm({
   "src/components/Label/Label.tsx"() {
     "use strict";
-    import_dedupe15 = __toESM(require("classnames/dedupe"));
+    import_dedupe16 = __toESM(require("classnames/dedupe"));
     import_Label = require("@simplybusiness/mobius/src/components/Label/Label.css");
     import_jsx_runtime20 = require("react/jsx-runtime");
     Label = ({ ref, ...props }) => {
       const { elementType: Element = "label", children, ...otherProps } = props;
-      const classes = (0, import_dedupe15.default)("mobius", "mobius-label", props.className);
+      const classes = (0, import_dedupe16.default)("mobius", "mobius-label", props.className);
       otherProps.className = classes;
       return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Element, { ref, ...otherProps, className: classes, children });
     };
@@ -1943,12 +1969,12 @@ var init_Label2 = __esm({
 });
 
 // src/components/Checkbox/CheckboxGroup.tsx
-var import_dedupe16, import_react14, import_CheckboxGroup, import_jsx_runtime21, CheckboxGroup;
+var import_dedupe17, import_react14, import_CheckboxGroup, import_jsx_runtime21, CheckboxGroup;
 var init_CheckboxGroup = __esm({
   "src/components/Checkbox/CheckboxGroup.tsx"() {
     "use strict";
     "use client";
-    import_dedupe16 = __toESM(require("classnames/dedupe"));
+    import_dedupe17 = __toESM(require("classnames/dedupe"));
     import_react14 = require("react");
     init_hooks();
     init_spaceDelimitedList();
@@ -1987,7 +2013,7 @@ var init_CheckboxGroup = __esm({
           isInitializedRef.current = true;
         }
       }, [defaultValue]);
-      const checkboxGroupClasses = (0, import_dedupe16.default)(
+      const checkboxGroupClasses = (0, import_dedupe17.default)(
         "mobius",
         "mobius-checkbox-group",
         className,
@@ -1999,7 +2025,7 @@ var init_CheckboxGroup = __esm({
         }
       );
       const validationClasses = useValidationClasses({ isInvalid });
-      const labelClasses = (0, import_dedupe16.default)(
+      const labelClasses = (0, import_dedupe17.default)(
         {
           "--is-disabled": isDisabled
         },
@@ -2095,17 +2121,17 @@ var init_Checkbox2 = __esm({
 });
 
 // src/components/Container/Container.tsx
-var import_dedupe17, import_Container, import_jsx_runtime22, Container;
+var import_dedupe18, import_Container, import_jsx_runtime22, Container;
 var init_Container = __esm({
   "src/components/Container/Container.tsx"() {
     "use strict";
-    import_dedupe17 = __toESM(require("classnames/dedupe"));
+    import_dedupe18 = __toESM(require("classnames/dedupe"));
     init_utils();
     import_Container = require("@simplybusiness/mobius/src/components/Container/Container.css");
     import_jsx_runtime22 = require("react/jsx-runtime");
     Container = ({ ref, ...props }) => {
       const { elementType: Element = "div", size = "md", ...otherProps } = props;
-      const classes = (0, import_dedupe17.default)(
+      const classes = (0, import_dedupe18.default)(
         "mobius",
         "mobius-container",
         sizeClasses(size),
@@ -2164,12 +2190,12 @@ var init_validation = __esm({
 });
 
 // src/components/DateField/DateField.tsx
-var import_dedupe18, import_react15, import_jsx_runtime23, MIN_MAX_ERROR, DateField;
+var import_dedupe19, import_react15, import_jsx_runtime23, MIN_MAX_ERROR, DateField;
 var init_DateField = __esm({
   "src/components/DateField/DateField.tsx"() {
     "use strict";
     "use client";
-    import_dedupe18 = __toESM(require("classnames/dedupe"));
+    import_dedupe19 = __toESM(require("classnames/dedupe"));
     import_react15 = require("react");
     init_mergeRefs();
     init_TextField2();
@@ -2190,7 +2216,7 @@ var init_DateField = __esm({
       const [error3, setError] = (0, import_react15.useState)(errorMessage);
       const [isInvalid, setIsInvalid] = (0, import_react15.useState)(void 0);
       const localRef = (0, import_react15.useRef)(null);
-      const classes = (0, import_dedupe18.default)("mobius-date-field", className);
+      const classes = (0, import_dedupe19.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;
@@ -2293,12 +2319,12 @@ var init_DrawerContext = __esm({
 });
 
 // src/components/Drawer/Drawer.tsx
-var import_dedupe19, import_react17, import_Drawer, import_jsx_runtime25, TRANSITION_CSS_VARIABLE, Drawer;
+var import_dedupe20, import_react17, import_Drawer, import_jsx_runtime25, TRANSITION_CSS_VARIABLE, Drawer;
 var init_Drawer = __esm({
   "src/components/Drawer/Drawer.tsx"() {
     "use strict";
     "use client";
-    import_dedupe19 = __toESM(require("classnames/dedupe"));
+    import_dedupe20 = __toESM(require("classnames/dedupe"));
     import_react17 = require("react");
     init_hooks();
     init_utils();
@@ -2332,7 +2358,7 @@ var init_Drawer = __esm({
       });
       const hiddenId = `dialog-screen-reader-announce-${(0, import_react17.useId)()}`;
       const headerId = `dialog-header-${(0, import_react17.useId)()}`;
-      const dialogClasses = (0, import_dedupe19.default)(
+      const dialogClasses = (0, import_dedupe20.default)(
         "mobius",
         "mobius-drawer",
         `--${direction}`,
@@ -2438,14 +2464,14 @@ var init_Drawer2 = __esm({
 });
 
 // src/components/DropdownMenu/DropdownMenu.tsx
-var import_react19, import_react_accessible_dropdown_menu_hook, import_dedupe20, import_DropdownMenu, import_jsx_runtime27, DropdownMenu;
+var import_react19, import_react_accessible_dropdown_menu_hook, import_dedupe21, import_DropdownMenu, import_jsx_runtime27, DropdownMenu;
 var init_DropdownMenu = __esm({
   "src/components/DropdownMenu/DropdownMenu.tsx"() {
     "use strict";
     "use client";
     import_react19 = require("react");
     import_react_accessible_dropdown_menu_hook = __toESM(require("react-accessible-dropdown-menu-hook"));
-    import_dedupe20 = __toESM(require("classnames/dedupe"));
+    import_dedupe21 = __toESM(require("classnames/dedupe"));
     init_Button2();
     import_DropdownMenu = require("@simplybusiness/mobius/src/components/DropdownMenu/DropdownMenu.css");
     import_jsx_runtime27 = require("react/jsx-runtime");
@@ -2465,13 +2491,13 @@ var init_DropdownMenu = __esm({
         isOpen: open,
         setIsOpen
       } = (0, import_react_accessible_dropdown_menu_hook.default)(numberOfItems);
-      const classes = (0, import_dedupe20.default)(
+      const classes = (0, import_dedupe21.default)(
         "mobius",
         "mobius-dropdown-menu",
         otherProps.className
       );
-      const triggerClasses = (0, import_dedupe20.default)("mobius", "mobius-dropdown-menu__trigger");
-      const listClasses = (0, import_dedupe20.default)("mobius", "mobius-dropdown-menu__list", {
+      const triggerClasses = (0, import_dedupe21.default)("mobius", "mobius-dropdown-menu__trigger");
+      const listClasses = (0, import_dedupe21.default)("mobius", "mobius-dropdown-menu__list", {
         "--is-open": open
       });
       const handleChildClick = ({ onClick }, index) => {
@@ -2505,12 +2531,12 @@ var init_DropdownMenu = __esm({
 });
 
 // src/components/DropdownMenu/Item.tsx
-var import_react20, import_dedupe21, import_jsx_runtime28, Item;
+var import_react20, import_dedupe22, import_jsx_runtime28, Item;
 var init_Item = __esm({
   "src/components/DropdownMenu/Item.tsx"() {
     "use strict";
     import_react20 = require("react");
-    import_dedupe21 = __toESM(require("classnames/dedupe"));
+    import_dedupe22 = __toESM(require("classnames/dedupe"));
     import_jsx_runtime28 = require("react/jsx-runtime");
     Item = ({ ref, ...props }) => {
       const {
@@ -2520,7 +2546,7 @@ var init_Item = __esm({
         children,
         ...otherProps
       } = props;
-      const classes = (0, import_dedupe21.default)(
+      const classes = (0, import_dedupe22.default)(
         "mobius",
         "mobius-dropdown-menu__item",
         { "--is-active": active },
@@ -2528,7 +2554,7 @@ var init_Item = __esm({
       );
       return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Element, { ref, onClick, ...otherProps, children: import_react20.Children.map(children, (child) => {
         if ((0, import_react20.isValidElement)(child)) {
-          const childClasses = (0, import_dedupe21.default)(
+          const childClasses = (0, import_dedupe22.default)(
             child.props.className,
             classes
           );
@@ -2564,12 +2590,12 @@ var init_DropdownMenu2 = __esm({
 });
 
 // src/components/Fieldset/Fieldset.tsx
-var import_dedupe22, import_react21, import_Fieldset, import_jsx_runtime29, useFieldset, Fieldset;
+var import_dedupe23, import_react21, import_Fieldset, import_jsx_runtime29, useFieldset, Fieldset;
 var init_Fieldset = __esm({
   "src/components/Fieldset/Fieldset.tsx"() {
     "use strict";
     "use client";
-    import_dedupe22 = __toESM(require("classnames/dedupe"));
+    import_dedupe23 = __toESM(require("classnames/dedupe"));
     import_react21 = require("react");
     init_Flex2();
     import_Fieldset = require("@simplybusiness/mobius/src/components/Fieldset/Fieldset.css");
@@ -2604,7 +2630,7 @@ var init_Fieldset = __esm({
         ...otherProps
       } = props;
       const { legendProps, containerProps } = useFieldset(props);
-      const classes = (0, import_dedupe22.default)("mobius", "mobius-fieldset", props.className);
+      const classes = (0, import_dedupe23.default)("mobius", "mobius-fieldset", props.className);
       legendProps.className = "mobius-fieldset__legend";
       return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Flex, { ...containerProps, ...otherProps, className: classes, children: [
         legend && (0, import_react21.cloneElement)(legendComponent, { ...legendProps }, [legend]),
@@ -2624,11 +2650,11 @@ var init_Fieldset2 = __esm({
 });
 
 // src/components/Grid/Grid.tsx
-var import_dedupe23, import_jsx_runtime30, Grid;
+var import_dedupe24, import_jsx_runtime30, Grid;
 var init_Grid = __esm({
   "src/components/Grid/Grid.tsx"() {
     "use strict";
-    import_dedupe23 = __toESM(require("classnames/dedupe"));
+    import_dedupe24 = __toESM(require("classnames/dedupe"));
     init_utils();
     import_jsx_runtime30 = require("react/jsx-runtime");
     Grid = ({ ref, ...props }) => {
@@ -2645,7 +2671,7 @@ var init_Grid = __esm({
         style,
         ...rest
       } = props;
-      const classes = (0, import_dedupe23.default)("mobius", "mobius-grid", className);
+      const classes = (0, import_dedupe24.default)("mobius", "mobius-grid", className);
       const styles = filterUndefinedProps({
         boxSizing: "border-box",
         display: "grid",
@@ -2666,13 +2692,13 @@ var init_Grid = __esm({
 });
 
 // src/components/Grid/Item.tsx
-var import_react22, import_dedupe24, import_jsx_runtime31, getBreakpointMap, DEFAULT_SPAN, GridItem;
+var import_react22, import_dedupe25, import_jsx_runtime31, getBreakpointMap, DEFAULT_SPAN, GridItem;
 var init_Item2 = __esm({
   "src/components/Grid/Item.tsx"() {
     "use strict";
     "use client";
     import_react22 = require("react");
-    import_dedupe24 = __toESM(require("classnames/dedupe"));
+    import_dedupe25 = __toESM(require("classnames/dedupe"));
     init_hooks();
     import_jsx_runtime31 = require("react/jsx-runtime");
     getBreakpointMap = (config) => Object.entries(config).reduce(
@@ -2710,7 +2736,7 @@ var init_Item2 = __esm({
         xxl
       });
       const [responsiveSpan, setResponsiveSpan] = (0, import_react22.useState)();
-      const classes = (0, import_dedupe24.default)("mobius", "mobius-grid__item", className);
+      const classes = (0, import_dedupe25.default)("mobius", "mobius-grid__item", className);
       (0, import_react22.useEffect)(() => {
         setResponsiveSpan(breakpointMap[breakpointSize]);
       }, [breakpointSize, breakpointMap]);
@@ -2740,11 +2766,11 @@ var init_Grid2 = __esm({
 });
 
 // src/components/Image/Image.tsx
-var import_dedupe25, import_jsx_runtime32, Image;
+var import_dedupe26, import_jsx_runtime32, Image;
 var init_Image = __esm({
   "src/components/Image/Image.tsx"() {
     "use strict";
-    import_dedupe25 = __toESM(require("classnames/dedupe"));
+    import_dedupe26 = __toESM(require("classnames/dedupe"));
     import_jsx_runtime32 = require("react/jsx-runtime");
     Image = ({
       ref,
@@ -2752,7 +2778,7 @@ var init_Image = __esm({
       elementType: Component = "img",
       ...otherProps
     }) => {
-      const classes = (0, import_dedupe25.default)("mobius", "mobius-image", otherProps.className);
+      const classes = (0, import_dedupe26.default)("mobius", "mobius-image", otherProps.className);
       return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Component, { alt, ref, ...otherProps, className: classes });
     };
     Image.displayName = "Image";
@@ -2768,11 +2794,11 @@ var init_Image2 = __esm({
 });
 
 // src/components/Link/Link.tsx
-var import_dedupe26, import_Link, import_jsx_runtime33, Link;
+var import_dedupe27, import_Link, import_jsx_runtime33, Link;
 var init_Link = __esm({
   "src/components/Link/Link.tsx"() {
     "use strict";
-    import_dedupe26 = __toESM(require("classnames/dedupe"));
+    import_dedupe27 = __toESM(require("classnames/dedupe"));
     import_Link = require("@simplybusiness/mobius/src/components/Link/Link.css");
     import_jsx_runtime33 = require("react/jsx-runtime");
     Link = ({ ref, ...props }) => {
@@ -2788,7 +2814,7 @@ var init_Link = __esm({
         pointerEvents: "none"
       };
       const styles = { ...style, ...isDisabled && disabledStyles };
-      const classes = (0, import_dedupe26.default)(
+      const classes = (0, import_dedupe27.default)(
         "mobius",
         "mobius-link",
         className,
@@ -2822,11 +2848,11 @@ var init_Link2 = __esm({
 });
 
 // src/components/LinkButton/LinkButton.tsx
-var import_dedupe27, import_jsx_runtime34;
+var import_dedupe28, import_jsx_runtime34;
 var init_LinkButton = __esm({
   "src/components/LinkButton/LinkButton.tsx"() {
     "use strict";
-    import_dedupe27 = __toESM(require("classnames/dedupe"));
+    import_dedupe28 = __toESM(require("classnames/dedupe"));
     import_jsx_runtime34 = require("react/jsx-runtime");
   }
 });
@@ -2840,12 +2866,12 @@ var init_LinkButton2 = __esm({
 });
 
 // src/components/List/List.tsx
-var import_react23, import_dedupe28, import_List, import_jsx_runtime35, List;
+var import_react23, import_dedupe29, import_List, import_jsx_runtime35, List;
 var init_List = __esm({
   "src/components/List/List.tsx"() {
     "use strict";
     import_react23 = require("react");
-    import_dedupe28 = __toESM(require("classnames/dedupe"));
+    import_dedupe29 = __toESM(require("classnames/dedupe"));
     import_List = require("@simplybusiness/mobius/src/components/List/List.css");
     import_jsx_runtime35 = require("react/jsx-runtime");
     List = ({ ref, ...props }) => {
@@ -2856,7 +2882,7 @@ var init_List = __esm({
         ...restProps,
         reversed: isReversed
       };
-      const classes = (0, import_dedupe28.default)(
+      const classes = (0, import_dedupe29.default)(
         "mobius",
         "mobius-list",
         {
@@ -2887,16 +2913,16 @@ var init_List = __esm({
 });
 
 // src/components/List/ListItem.tsx
-var import_dedupe29, import_jsx_runtime36, ListItem;
+var import_dedupe30, import_jsx_runtime36, ListItem;
 var init_ListItem = __esm({
   "src/components/List/ListItem.tsx"() {
     "use strict";
-    import_dedupe29 = __toESM(require("classnames/dedupe"));
+    import_dedupe30 = __toESM(require("classnames/dedupe"));
     import_jsx_runtime36 = require("react/jsx-runtime");
     ListItem = ({ ref, ...props }) => {
       const { parentIcon, icon, children, ...otherProps } = props;
       const iconContent = icon || parentIcon;
-      const classes = (0, import_dedupe29.default)(
+      const classes = (0, import_dedupe30.default)(
         "mobius",
         "mobius-list__item",
         {
@@ -2904,8 +2930,8 @@ var init_ListItem = __esm({
         },
         props.className
       );
-      const contentClasses = (0, import_dedupe29.default)("mobius", "mobius-list__item-content");
-      const iconClasses = (0, import_dedupe29.default)("mobius", "mobius-list__icon");
+      const contentClasses = (0, import_dedupe30.default)("mobius", "mobius-list__item-content");
+      const iconClasses = (0, import_dedupe30.default)("mobius", "mobius-list__icon");
       if (iconContent) {
         return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("li", { ref, ...otherProps, className: classes, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: contentClasses, children: [
           /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: iconClasses, children: iconContent }),
@@ -2928,18 +2954,18 @@ var init_List2 = __esm({
 });
 
 // src/components/LoadingIndicator/LoadingIndicator.tsx
-var import_dedupe30, import_icons8, import_LoadingIndicator, import_jsx_runtime37, LoadingIndicator;
+var import_dedupe31, import_icons8, import_LoadingIndicator, import_jsx_runtime37, LoadingIndicator;
 var init_LoadingIndicator = __esm({
   "src/components/LoadingIndicator/LoadingIndicator.tsx"() {
     "use strict";
-    import_dedupe30 = __toESM(require("classnames/dedupe"));
+    import_dedupe31 = __toESM(require("classnames/dedupe"));
     import_icons8 = require("@simplybusiness/icons");
     init_Icon2();
     import_LoadingIndicator = require("@simplybusiness/mobius/src/components/LoadingIndicator/LoadingIndicator.css");
     import_jsx_runtime37 = require("react/jsx-runtime");
     LoadingIndicator = ({ ref, ...props }) => {
       const { icon = import_icons8.loading, ...otherProps } = props;
-      const classes = (0, import_dedupe30.default)(
+      const classes = (0, import_dedupe31.default)(
         "mobius",
         "mobius-loading-indicator",
         otherProps.className
@@ -2959,15 +2985,15 @@ var init_LoadingIndicator2 = __esm({
 });
 
 // src/components/Logo/Logo.tsx
-var import_dedupe31, import_jsx_runtime38, Logo;
+var import_dedupe32, import_jsx_runtime38, Logo;
 var init_Logo = __esm({
   "src/components/Logo/Logo.tsx"() {
     "use strict";
-    import_dedupe31 = __toESM(require("classnames/dedupe"));
+    import_dedupe32 = __toESM(require("classnames/dedupe"));
     import_jsx_runtime38 = require("react/jsx-runtime");
     Logo = ({ ref, ...props }) => {
       const { className, width, height, ...otherProps } = props;
-      const classes = (0, import_dedupe31.default)("mobius", "mobius-logo", className);
+      const classes = (0, import_dedupe32.default)("mobius", "mobius-logo", className);
       return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
         "svg",
         {
@@ -3122,12 +3148,12 @@ var init_Header2 = __esm({
 });
 
 // src/components/Modal/Modal.tsx
-var import_dedupe32, import_react27, import_Modal, import_jsx_runtime41, TRANSITION_CSS_VARIABLE2, Modal;
+var import_dedupe33, 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_dedupe33 = __toESM(require("classnames/dedupe"));
     import_react27 = require("react");
     init_hooks();
     init_utils();
@@ -3163,7 +3189,7 @@ var init_Modal = __esm({
           CSSVariable: TRANSITION_CSS_VARIABLE2
         }
       });
-      const modalClasses = (0, import_dedupe32.default)(
+      const modalClasses = (0, import_dedupe33.default)(
         "mobius",
         "mobius-modal",
         {
@@ -3222,12 +3248,12 @@ var init_Modal2 = __esm({
 });
 
 // src/components/NumberField/NumberField.tsx
-var import_dedupe33, import_react28, import_NumberField, import_jsx_runtime42, NumberField;
+var import_dedupe34, 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_dedupe34 = __toESM(require("classnames/dedupe"));
     import_react28 = require("react");
     init_TextField2();
     import_NumberField = require("@simplybusiness/mobius/src/components/NumberField/NumberField.css");
@@ -3255,7 +3281,7 @@ var init_NumberField = __esm({
           focusedInputRef.current = null;
         };
       }, [wheelHandler]);
-      const containerClasses = (0, import_dedupe33.default)("mobius-number-field", className, {
+      const containerClasses = (0, import_dedupe34.default)("mobius-number-field", className, {
         "--hide-spin-buttons": hideSpinButtons
       });
       const handleBeforeInput = (event) => {
@@ -3381,12 +3407,12 @@ var init_ShowHideButton = __esm({
 });
 
 // src/components/PasswordField/PasswordField.tsx
-var import_dedupe34, import_react29, import_PasswordField, import_jsx_runtime45, PasswordField;
+var import_dedupe35, 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_dedupe35 = __toESM(require("classnames/dedupe"));
     import_react29 = require("react");
     init_mergeRefs();
     init_TextField2();
@@ -3401,7 +3427,7 @@ var init_PasswordField = __esm({
     }) => {
       const [show, setShow] = (0, import_react29.useState)(false);
       const type = show ? "text" : "password";
-      const classes = (0, import_dedupe34.default)("mobius-password-field", className);
+      const classes = (0, import_dedupe35.default)("mobius-password-field", className);
       const localRef = (0, import_react29.useRef)(null);
       const handleShowHideButtonClick = () => {
         const selectionStart = localRef.current?.selectionStart;
@@ -3439,13 +3465,13 @@ var init_PasswordField2 = __esm({
 });
 
 // src/components/Popover/Popover.tsx
-var import_react30, import_icons11, import_dedupe35, import_react31, import_mobius_hooks4, import_Popover, import_jsx_runtime46;
+var import_react30, import_icons11, import_dedupe36, import_react31, import_mobius_hooks4, import_Popover, import_jsx_runtime46;
 var init_Popover = __esm({
   "src/components/Popover/Popover.tsx"() {
     "use strict";
     import_react30 = require("@floating-ui/react");
     import_icons11 = require("@simplybusiness/icons");
-    import_dedupe35 = __toESM(require("classnames/dedupe"));
+    import_dedupe36 = __toESM(require("classnames/dedupe"));
     import_react31 = require("react");
     import_mobius_hooks4 = require("@simplybusiness/mobius-hooks");
     import_Popover = require("@simplybusiness/mobius/src/components/Popover/Popover.css");
@@ -3473,12 +3499,12 @@ function warnAboutInvalidValues(value, minValue, maxValue) {
     console.warn("Progress value is greater than maxValue");
   }
 }
-var import_dedupe36, import_react32, import_Progress, import_jsx_runtime47, sanitizedValue, getLabelComponent, DEFAULT_VALUE, DEFAULT_MIN_VALUE, DEFAULT_MAX_VALUE, Progress;
+var import_dedupe37, 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_dedupe37 = __toESM(require("classnames/dedupe"));
     import_react32 = require("react");
     init_Label2();
     init_VisuallyHidden2();
@@ -3542,7 +3568,7 @@ var init_Progress = __esm({
         100
       );
       const barWidth = `${percentage}%`;
-      const classes = (0, import_dedupe36.default)("mobius", "mobius-progress", className, {
+      const classes = (0, import_dedupe37.default)("mobius", "mobius-progress", className, {
         "--is-primary": variant === "primary",
         "--is-secondary": variant === "secondary"
       });
@@ -3582,12 +3608,12 @@ var init_Progress2 = __esm({
 });
 
 // src/components/Radio/Radio.tsx
-var import_dedupe37, import_react33, import_Radio, import_jsx_runtime48, Radio;
+var import_dedupe38, 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_dedupe38 = __toESM(require("classnames/dedupe"));
     import_react33 = require("react");
     init_ErrorMessage2();
     init_Label2();
@@ -3657,13 +3683,13 @@ var init_Radio = __esm({
         "--is-multiline": !!isMultiline,
         "--is-required": isRequired
       };
-      const containerClasses = (0, import_dedupe37.default)(
+      const containerClasses = (0, import_dedupe38.default)(
         "mobius-radio__label",
         radioClasses,
         className,
         { "--has-icon-first": hasIconFirst }
       );
-      const inputClasses = (0, import_dedupe37.default)("mobius-radio__input", radioClasses);
+      const inputClasses = (0, import_dedupe38.default)("mobius-radio__input", radioClasses);
       const { "aria-describedby": _ariaDescribedBy, ...rest } = otherProps;
       const handleChange = (event) => {
         if (setSelected) {
@@ -3709,12 +3735,12 @@ var init_Radio = __esm({
 });
 
 // src/components/Radio/RadioGroup.tsx
-var import_dedupe38, import_react34, import_jsx_runtime49, getDefaultVal, RadioGroup;
+var import_dedupe39, 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_dedupe39 = __toESM(require("classnames/dedupe"));
     import_react34 = require("react");
     init_hooks();
     init_spaceDelimitedList();
@@ -3781,16 +3807,16 @@ var init_RadioGroup = __esm({
         [`--is-${effectiveOrientation}`]: true,
         [className || ""]: true
       };
-      const radioGroupClasses = (0, import_dedupe38.default)(
+      const radioGroupClasses = (0, import_dedupe39.default)(
         "mobius",
         "mobius-radio-group",
         radioClasses,
         validationClasses
       );
-      const radioWrapperClasses = (0, import_dedupe38.default)("mobius-radio__wrapper", {
+      const radioWrapperClasses = (0, import_dedupe39.default)("mobius-radio__wrapper", {
         [`--is-${effectiveOrientation}`]: true
       });
-      const labelClasses = (0, import_dedupe38.default)(radioClasses, validationClasses);
+      const labelClasses = (0, import_dedupe39.default)(radioClasses, validationClasses);
       const errorMessageId = (0, import_react34.useId)();
       const defaultNameAttrId = (0, import_react34.useId)();
       const nameAttribute = name || defaultNameAttrId;
@@ -3858,16 +3884,16 @@ var init_Radio2 = __esm({
 });
 
 // src/components/Segment/SegmentGroup.tsx
-var import_dedupe39, import_jsx_runtime50, SegmentGroup;
+var import_dedupe40, import_jsx_runtime50, SegmentGroup;
 var init_SegmentGroup = __esm({
   "src/components/Segment/SegmentGroup.tsx"() {
     "use strict";
-    import_dedupe39 = __toESM(require("classnames/dedupe"));
+    import_dedupe40 = __toESM(require("classnames/dedupe"));
     import_jsx_runtime50 = require("react/jsx-runtime");
     SegmentGroup = (props) => {
       const { children, horizontal, gap, className, ...rest } = props;
       const gapClass = gap ? `gap-${gap}` : "";
-      const classes = (0, import_dedupe39.default)(
+      const classes = (0, import_dedupe40.default)(
         "mobius",
         "mobius-segment-group",
         className,
@@ -3881,16 +3907,16 @@ var init_SegmentGroup = __esm({
 });
 
 // src/components/Segment/Segment.tsx
-var import_dedupe40, import_Segment, import_jsx_runtime51, Segment;
+var import_dedupe41, import_Segment, import_jsx_runtime51, Segment;
 var init_Segment = __esm({
   "src/components/Segment/Segment.tsx"() {
     "use strict";
-    import_dedupe40 = __toESM(require("classnames/dedupe"));
+    import_dedupe41 = __toESM(require("classnames/dedupe"));
     import_Segment = require("@simplybusiness/mobius/src/components/Segment/Segment.css");
     import_jsx_runtime51 = require("react/jsx-runtime");
     Segment = ({ ref, ...props }) => {
       const { heading, children, colour, inverted, className, ...rest } = props;
-      const classes = (0, import_dedupe40.default)(
+      const classes = (0, import_dedupe41.default)(
         "mobius",
         "mobius-segment",
         colour,
@@ -3916,13 +3942,13 @@ var init_Segment2 = __esm({
 });
 
 // src/components/Select/Select.tsx
-var import_icons12, import_dedupe41, import_react35, import_Select, import_jsx_runtime52, Select;
+var import_icons12, import_dedupe42, 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_dedupe42 = __toESM(require("classnames/dedupe"));
     import_react35 = require("react");
     init_hooks();
     init_useLabel2();
@@ -3953,23 +3979,23 @@ var init_Select = __esm({
         "--is-required": typeof isRequired === "boolean" && isRequired,
         "--is-optional": typeof isRequired === "boolean" && !isRequired
       };
-      const sharedClasses = (0, import_dedupe41.default)(validationClasses, stateClasses);
-      const wrapperClasses = (0, import_dedupe41.default)(
+      const sharedClasses = (0, import_dedupe42.default)(validationClasses, stateClasses);
+      const wrapperClasses = (0, import_dedupe42.default)(
         "mobius-select__wrapper",
         sharedClasses,
         otherProps.className
       );
-      const selectClasses = (0, import_dedupe41.default)(
+      const selectClasses = (0, import_dedupe42.default)(
         "mobius-select",
         sharedClasses,
         otherProps.className
       );
-      const labelClasses = (0, import_dedupe41.default)(
+      const labelClasses = (0, import_dedupe42.default)(
         "mobius-label",
         sharedClasses,
         otherProps.className
       );
-      const iconClasses = (0, import_dedupe41.default)("mobius-select__icon", sharedClasses);
+      const iconClasses = (0, import_dedupe42.default)("mobius-select__icon", sharedClasses);
       const errorMessageId = (0, import_react35.useId)();
       const shouldErrorMessageShow = errorMessage ? errorMessageId : void 0;
       const describedBy = spaceDelimitedList([
@@ -4018,12 +4044,12 @@ var init_Select2 = __esm({
 });
 
 // src/components/Slider/Slider.tsx
-var import_dedupe42, import_react36, import_Slider, import_jsx_runtime53;
+var import_dedupe43, 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_dedupe43 = __toESM(require("classnames/dedupe"));
     import_react36 = require("react");
     import_Slider = require("@simplybusiness/mobius/src/components/Slider/Slider.css");
     import_jsx_runtime53 = require("react/jsx-runtime");
@@ -4039,16 +4065,16 @@ var init_Slider2 = __esm({
 });
 
 // src/components/SVG/SVG.tsx
-var import_react37, import_dedupe43, import_jsx_runtime54, SVG;
+var import_react37, import_dedupe44, import_jsx_runtime54, SVG;
 var init_SVG = __esm({
   "src/components/SVG/SVG.tsx"() {
     "use strict";
     import_react37 = require("react");
-    import_dedupe43 = __toESM(require("classnames/dedupe"));
+    import_dedupe44 = __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 classes = (0, import_dedupe44.default)("mobius", "mobius-svg", className);
       const svgNode = import_react37.Children.only(children);
       const { children: svgChildren, viewBox, xmlns } = svgNode.props;
       return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
@@ -4076,13 +4102,13 @@ var init_SVG2 = __esm({
 });
 
 // src/components/Switch/Switch.tsx
-var import_react38, import_dedupe44, import_Switch, import_jsx_runtime55, Switch;
+var import_react38, import_dedupe45, import_Switch, import_jsx_runtime55, Switch;
 var init_Switch = __esm({
   "src/components/Switch/Switch.tsx"() {
     "use strict";
     "use client";
     import_react38 = require("react");
-    import_dedupe44 = __toESM(require("classnames/dedupe"));
+    import_dedupe45 = __toESM(require("classnames/dedupe"));
     init_VisuallyHidden2();
     import_Switch = require("@simplybusiness/mobius/src/components/Switch/Switch.css");
     import_jsx_runtime55 = require("react/jsx-runtime");
@@ -4098,7 +4124,7 @@ var init_Switch = __esm({
       (0, import_react38.useEffect)(() => {
         setEnabled(checked);
       }, [checked]);
-      const classes = (0, import_dedupe44.default)(
+      const classes = (0, import_dedupe45.default)(
         "mobius",
         "mobius-switch",
         {
@@ -4142,15 +4168,15 @@ var init_Switch2 = __esm({
 });
 
 // src/components/Table/Table.tsx
-var import_dedupe45, import_Table, import_jsx_runtime56, Table;
+var import_dedupe46, import_Table, import_jsx_runtime56, Table;
 var init_Table = __esm({
   "src/components/Table/Table.tsx"() {
     "use strict";
-    import_dedupe45 = __toESM(require("classnames/dedupe"));
+    import_dedupe46 = __toESM(require("classnames/dedupe"));
     import_Table = require("@simplybusiness/mobius/src/components/Table/Table.css");
     import_jsx_runtime56 = require("react/jsx-runtime");
     Table = ({ ref, ...props }) => {
-      const classes = (0, import_dedupe45.default)("mobius", "mobius-table", props.className);
+      const classes = (0, import_dedupe46.default)("mobius", "mobius-table", props.className);
       return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("table", { ref, ...props, className: classes });
     };
     Table.displayName = "Table";
@@ -4158,14 +4184,14 @@ var init_Table = __esm({
 });
 
 // src/components/Table/Head.tsx
-var import_dedupe46, import_jsx_runtime57, Head;
+var import_dedupe47, import_jsx_runtime57, Head;
 var init_Head = __esm({
   "src/components/Table/Head.tsx"() {
     "use strict";
-    import_dedupe46 = __toESM(require("classnames/dedupe"));
+    import_dedupe47 = __toESM(require("classnames/dedupe"));
     import_jsx_runtime57 = require("react/jsx-runtime");
     Head = ({ ref, ...props }) => {
-      const classes = (0, import_dedupe46.default)("mobius", "mobius-table__head", props.className);
+      const classes = (0, import_dedupe47.default)("mobius", "mobius-table__head", props.className);
       return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("thead", { ref, ...props, className: classes });
     };
     Head.displayName = "Table.Head";
@@ -4173,14 +4199,14 @@ var init_Head = __esm({
 });
 
 // src/components/Table/Body.tsx
-var import_dedupe47, import_jsx_runtime58, Body;
+var import_dedupe48, import_jsx_runtime58, Body;
 var init_Body = __esm({
   "src/components/Table/Body.tsx"() {
     "use strict";
-    import_dedupe47 = __toESM(require("classnames/dedupe"));
+    import_dedupe48 = __toESM(require("classnames/dedupe"));
     import_jsx_runtime58 = require("react/jsx-runtime");
     Body = ({ ref, ...props }) => {
-      const classes = (0, import_dedupe47.default)("mobius", "mobius-table__body", props.className);
+      const classes = (0, import_dedupe48.default)("mobius", "mobius-table__body", props.className);
       return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("tbody", { ref, ...props, className: classes });
     };
     Body.displayName = "Table.Body";
@@ -4188,14 +4214,14 @@ var init_Body = __esm({
 });
 
 // src/components/Table/Foot.tsx
-var import_dedupe48, import_jsx_runtime59, Foot;
+var import_dedupe49, import_jsx_runtime59, Foot;
 var init_Foot = __esm({
   "src/components/Table/Foot.tsx"() {
     "use strict";
-    import_dedupe48 = __toESM(require("classnames/dedupe"));
+    import_dedupe49 = __toESM(require("classnames/dedupe"));
     import_jsx_runtime59 = require("react/jsx-runtime");
     Foot = ({ ref, ...props }) => {
-      const classes = (0, import_dedupe48.default)("mobius", "mobius-table__foot", props.className);
+      const classes = (0, import_dedupe49.default)("mobius", "mobius-table__foot", props.className);
       return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("tfoot", { ref, ...props, className: classes });
     };
     Foot.displayName = "Table.Foot";
@@ -4203,14 +4229,14 @@ var init_Foot = __esm({
 });
 
 // src/components/Table/Row.tsx
-var import_dedupe49, import_jsx_runtime60, Row;
+var import_dedupe50, import_jsx_runtime60, Row;
 var init_Row = __esm({
   "src/components/Table/Row.tsx"() {
     "use strict";
-    import_dedupe49 = __toESM(require("classnames/dedupe"));
+    import_dedupe50 = __toESM(require("classnames/dedupe"));
     import_jsx_runtime60 = require("react/jsx-runtime");
     Row = ({ ref, ...props }) => {
-      const classes = (0, import_dedupe49.default)("mobius", "mobius-table__row", props.className);
+      const classes = (0, import_dedupe50.default)("mobius", "mobius-table__row", props.className);
       return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("tr", { ref, ...props, className: classes });
     };
     Row.displayName = "Table.Row";
@@ -4218,14 +4244,14 @@ var init_Row = __esm({
 });
 
 // src/components/Table/HeaderCell.tsx
-var import_dedupe50, import_jsx_runtime61, HeaderCell;
+var import_dedupe51, import_jsx_runtime61, HeaderCell;
 var init_HeaderCell = __esm({
   "src/components/Table/HeaderCell.tsx"() {
     "use strict";
-    import_dedupe50 = __toESM(require("classnames/dedupe"));
+    import_dedupe51 = __toESM(require("classnames/dedupe"));
     import_jsx_runtime61 = require("react/jsx-runtime");
     HeaderCell = ({ ref, scope = "col", ...props }) => {
-      const classes = (0, import_dedupe50.default)(
+      const classes = (0, import_dedupe51.default)(
         "mobius",
         "mobius-table__head-cell",
         props.className
@@ -4237,14 +4263,14 @@ var init_HeaderCell = __esm({
 });
 
 // src/components/Table/Cell.tsx
-var import_dedupe51, import_jsx_runtime62, Cell;
+var import_dedupe52, import_jsx_runtime62, Cell;
 var init_Cell = __esm({
   "src/components/Table/Cell.tsx"() {
     "use strict";
-    import_dedupe51 = __toESM(require("classnames/dedupe"));
+    import_dedupe52 = __toESM(require("classnames/dedupe"));
     import_jsx_runtime62 = require("react/jsx-runtime");
     Cell = ({ ref, ...props }) => {
-      const classes = (0, import_dedupe51.default)(
+      const classes = (0, import_dedupe52.default)(
         "mobius",
         "mobius-table__body-cell",
         props.className
@@ -4288,15 +4314,15 @@ var init_Text2 = __esm({
 });
 
 // src/components/TextAreaInput/TextAreaInput.tsx
-var import_dedupe52, import_jsx_runtime63, TextAreaInput;
+var import_dedupe53, import_jsx_runtime63, TextAreaInput;
 var init_TextAreaInput = __esm({
   "src/components/TextAreaInput/TextAreaInput.tsx"() {
     "use strict";
-    import_dedupe52 = __toESM(require("classnames/dedupe"));
+    import_dedupe53 = __toESM(require("classnames/dedupe"));
     import_jsx_runtime63 = require("react/jsx-runtime");
     TextAreaInput = ({ ref, ...props }) => {
       const { isSelected, isDisabled, isReadOnly, isRequired, ...otherProps } = props;
-      const classes = (0, import_dedupe52.default)(
+      const classes = (0, import_dedupe53.default)(
         "mobius",
         "mobius-text-area__input",
         {
@@ -4330,12 +4356,12 @@ var init_TextAreaInput2 = __esm({
 });
 
 // src/components/TextArea/TextArea.tsx
-var import_dedupe53, import_TextArea, import_jsx_runtime64, TextArea;
+var import_dedupe54, import_TextArea, import_jsx_runtime64, TextArea;
 var init_TextArea = __esm({
   "src/components/TextArea/TextArea.tsx"() {
     "use strict";
     "use client";
-    import_dedupe53 = __toESM(require("classnames/dedupe"));
+    import_dedupe54 = __toESM(require("classnames/dedupe"));
     init_hooks();
     init_ErrorMessage2();
     init_Label2();
@@ -4353,10 +4379,10 @@ var init_TextArea = __esm({
         ...otherProps
       } = props;
       const { inputProps, labelProps, errorMessageProps } = useTextField(props);
-      const classes = (0, import_dedupe53.default)("mobius", "mobius-text-area", className);
+      const classes = (0, import_dedupe54.default)("mobius", "mobius-text-area", className);
       const validationClasses = useValidationClasses({ isInvalid });
-      const inputClasses = (0, import_dedupe53.default)("mobius-text-area__input", validationClasses);
-      const labelClasses = (0, import_dedupe53.default)(
+      const inputClasses = (0, import_dedupe54.default)("mobius-text-area__input", validationClasses);
+      const labelClasses = (0, import_dedupe54.default)(
         {
           "--is-disabled": isDisabled
         },
@@ -4391,11 +4417,11 @@ var init_TextArea2 = __esm({
 });
 
 // src/components/Title/Title.tsx
-var import_dedupe54, import_Title, import_jsx_runtime65, Title;
+var import_dedupe55, import_Title, import_jsx_runtime65, Title;
 var init_Title = __esm({
   "src/components/Title/Title.tsx"() {
     "use strict";
-    import_dedupe54 = __toESM(require("classnames/dedupe"));
+    import_dedupe55 = __toESM(require("classnames/dedupe"));
     init_Flex2();
     import_Title = require("@simplybusiness/mobius/src/components/Title/Title.css");
     import_jsx_runtime65 = require("react/jsx-runtime");
@@ -4406,10 +4432,10 @@ var init_Title = __esm({
         description,
         ...otherProps
       } = props;
-      const classes = (0, import_dedupe54.default)("mobius", "mobius-title", otherProps.className);
-      const headerClasses = (0, import_dedupe54.default)("mobius", "mobius-title__header");
-      const contentClasses = (0, import_dedupe54.default)("mobius", "mobius-title__description");
-      const containerClasses = (0, import_dedupe54.default)("mobius", "mobius-title__container");
+      const classes = (0, import_dedupe55.default)("mobius", "mobius-title", otherProps.className);
+      const headerClasses = (0, import_dedupe55.default)("mobius", "mobius-title__header");
+      const contentClasses = (0, import_dedupe55.default)("mobius", "mobius-title__description");
+      const containerClasses = (0, import_dedupe55.default)("mobius", "mobius-title__container");
       return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Element, { ref, ...otherProps, className: classes, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(Flex, { flexDirection: "column", className: containerClasses, children: [
         /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("p", { className: headerClasses, children: title }),
         /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("p", { className: contentClasses, children: description })
@@ -4435,11 +4461,11 @@ var init_Toast = __esm({
 });
 
 // src/components/Trust/Trust.tsx
-var import_dedupe55, import_react39, import_jsx_runtime66;
+var import_dedupe56, import_react39, import_jsx_runtime66;
 var init_Trust = __esm({
   "src/components/Trust/Trust.tsx"() {
     "use strict";
-    import_dedupe55 = __toESM(require("classnames/dedupe"));
+    import_dedupe56 = __toESM(require("classnames/dedupe"));
     import_react39 = require("react");
     import_jsx_runtime66 = require("react/jsx-runtime");
   }
@@ -4462,12 +4488,12 @@ var init_Trust2 = __esm({
 });
 
 // src/components/ExpandableText/ExpandableText.tsx
-var import_dedupe56, import_react40, import_ExpandableText, import_jsx_runtime67, ExpandableText;
+var import_dedupe57, 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_dedupe57 = __toESM(require("classnames/dedupe"));
     import_react40 = require("react");
     init_src();
     import_ExpandableText = require("@simplybusiness/mobius/src/components/ExpandableText/ExpandableText.css");
@@ -4508,8 +4534,8 @@ var init_ExpandableText = __esm({
         setIsExpanded(expanded);
         onToggle?.(expanded);
       };
-      const classes = (0, import_dedupe56.default)("mobius-expandable-text", className);
-      const textContainerClasses = (0, import_dedupe56.default)("mobius-expandable-text__content", {
+      const classes = (0, import_dedupe57.default)("mobius-expandable-text", className);
+      const textContainerClasses = (0, import_dedupe57.default)("mobius-expandable-text__content", {
         "mobius-expandable-text__content--collapsed": !isExpanded
       });
       const textContainerStyle = {
@@ -4859,12 +4885,12 @@ var init_src = __esm({
 });
 
 // src/components/ErrorMessage/ErrorMessage.tsx
-var import_icons13, import_dedupe57, import_ErrorMessage7, import_jsx_runtime70, ErrorMessage;
+var import_icons13, import_dedupe58, import_ErrorMessage7, import_jsx_runtime70, ErrorMessage;
 var init_ErrorMessage = __esm({
   "src/components/ErrorMessage/ErrorMessage.tsx"() {
     "use strict";
     import_icons13 = require("@simplybusiness/icons");
-    import_dedupe57 = __toESM(require("classnames/dedupe"));
+    import_dedupe58 = __toESM(require("classnames/dedupe"));
     init_src();
     init_Icon2();
     import_ErrorMessage7 = require("@simplybusiness/mobius/src/components/ErrorMessage/ErrorMessage.css");
@@ -4874,7 +4900,7 @@ var init_ErrorMessage = __esm({
       errorMessage,
       className
     }) => {
-      const classes = (0, import_dedupe57.default)("mobius", "mobius-error-message", className);
+      const classes = (0, import_dedupe58.default)("mobius", "mobius-error-message", className);
       if (!errorMessage) return null;
       return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { id, className: classes, "data-testid": "ErrorMessage", role: "alert", children: [
         /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
@@ -4908,16 +4934,16 @@ var init_ErrorMessage2 = __esm({
 });
 
 // src/components/TextField/adornmentWithClassName.ts
-var import_dedupe58, import_react42, adornmentWithClassName;
+var import_dedupe59, import_react42, adornmentWithClassName;
 var init_adornmentWithClassName = __esm({
   "src/components/TextField/adornmentWithClassName.ts"() {
     "use strict";
-    import_dedupe58 = __toESM(require("classnames/dedupe"));
+    import_dedupe59 = __toESM(require("classnames/dedupe"));
     import_react42 = require("react");
     adornmentWithClassName = (component, validationClasses, className) => {
       if (!component) return null;
       return (0, import_react42.cloneElement)(component, {
-        className: (0, import_dedupe58.default)(
+        className: (0, import_dedupe59.default)(
           component.props.className,
           validationClasses,
           className
@@ -4928,12 +4954,12 @@ var init_adornmentWithClassName = __esm({
 });
 
 // src/components/TextField/TextField.tsx
-var import_dedupe59, import_TextField6, import_jsx_runtime71, TextField;
+var import_dedupe60, import_TextField6, import_jsx_runtime71, TextField;
 var init_TextField = __esm({
   "src/components/TextField/TextField.tsx"() {
     "use strict";
     "use client";
-    import_dedupe59 = __toESM(require("classnames/dedupe"));
+    import_dedupe60 = __toESM(require("classnames/dedupe"));
     init_hooks();
     init_ErrorMessage2();
     init_Label2();
@@ -4974,24 +5000,24 @@ var init_TextField = __esm({
         "--is-hidden": hidden,
         [className || ""]: true
       };
-      const sharedClasses = (0, import_dedupe59.default)(validationClasses, textfieldClasses);
-      const labelClasses = (0, import_dedupe59.default)(
+      const sharedClasses = (0, import_dedupe60.default)(validationClasses, textfieldClasses);
+      const labelClasses = (0, import_dedupe60.default)(
         {
           "--is-disabled": isDisabled
         },
         validationClasses
       );
-      const containerClasses = (0, import_dedupe59.default)(
+      const containerClasses = (0, import_dedupe60.default)(
         "mobius",
         "mobius-text-field",
         sharedClasses
       );
-      const inputClasses = (0, import_dedupe59.default)(
+      const inputClasses = (0, import_dedupe60.default)(
         "mobius",
         "mobius-text-field__input",
         sharedClasses
       );
-      const inputWrapperClasses = (0, import_dedupe59.default)(
+      const inputWrapperClasses = (0, import_dedupe60.default)(
         "mobius-text-field__input-wrapper",
         sharedClasses
       );
@@ -5048,12 +5074,12 @@ var init_TextField2 = __esm({
 });
 
 // src/components/Combobox/Option.tsx
-var import_react43, import_dedupe60, import_jsx_runtime72, Option2;
+var import_react43, import_dedupe61, import_jsx_runtime72, Option2;
 var init_Option3 = __esm({
   "src/components/Combobox/Option.tsx"() {
     "use strict";
     import_react43 = require("react");
-    import_dedupe60 = __toESM(require("classnames/dedupe"));
+    import_dedupe61 = __toESM(require("classnames/dedupe"));
     init_utils2();
     import_jsx_runtime72 = require("react/jsx-runtime");
     Option2 = ({
@@ -5084,7 +5110,7 @@ var init_Option3 = __esm({
           id,
           "aria-selected": isHighlighted,
           onMouseDown: () => onOptionSelect(option),
-          className: (0, import_dedupe60.default)("mobius-combobox__option", "has-pii", {
+          className: (0, import_dedupe61.default)("mobius-combobox__option", "has-pii", {
             "mobius-combobox__option--is-highlighted": isHighlighted
           }),
           children: OptionComponent ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(OptionComponent, { option, isHighlighted }) : getOptionLabel(option)
@@ -5096,11 +5122,11 @@ var init_Option3 = __esm({
 });
 
 // src/components/Combobox/Listbox.tsx
-var import_dedupe61, import_jsx_runtime73, getOptionKey, Listbox;
+var import_dedupe62, import_jsx_runtime73, getOptionKey, Listbox;
 var init_Listbox = __esm({
   "src/components/Combobox/Listbox.tsx"() {
     "use strict";
-    import_dedupe61 = __toESM(require("classnames/dedupe"));
+    import_dedupe62 = __toESM(require("classnames/dedupe"));
     init_Option3();
     init_utils2();
     import_jsx_runtime73 = require("react/jsx-runtime");
@@ -5122,7 +5148,7 @@ var init_Listbox = __esm({
       optionComponent,
       optionTestIdPrefix
     }) => {
-      const classes = (0, import_dedupe61.default)("mobius-combobox__list", {
+      const classes = (0, import_dedupe62.default)("mobius-combobox__list", {
         "mobius-combobox__list--hidden": !isOpen
       });
       function getOptionId(option, groupIndex, index) {
@@ -5370,11 +5396,11 @@ __export(Combobox_exports, {
   Combobox: () => Combobox
 });
 module.exports = __toCommonJS(Combobox_exports);
-var import_mobius_hooks6, import_dedupe62, import_react46, import_Combobox2, import_jsx_runtime74, ComboboxInner, Combobox;
+var import_mobius_hooks6, import_dedupe63, import_react46, import_Combobox2, import_jsx_runtime74, ComboboxInner, Combobox;
 var init_Combobox2 = __esm({
   "src/components/Combobox/Combobox.tsx"() {
     import_mobius_hooks6 = require("@simplybusiness/mobius-hooks");
-    import_dedupe62 = __toESM(require("classnames/dedupe"));
+    import_dedupe63 = __toESM(require("classnames/dedupe"));
     import_react46 = require("react");
     init_hooks();
     init_TextField2();
@@ -5635,7 +5661,7 @@ var init_Combobox2 = __esm({
           setIsOpen(!!filteredOptions && filteredOptions.length > 0);
         }
       }, [filteredOptions, asyncOptions, isChanging]);
-      const classes = (0, import_dedupe62.default)(
+      const classes = (0, import_dedupe63.default)(
         "mobius mobius-combobox",
         {
           "mobius-combobox--is-expanded": isOpen,