@simplybusiness/mobius 10.4.3 → 10.5.0

package/dist/types/components/Segment/Segment.d.ts

@@ -11,8 +11,8 @@ export interface SegmentProps extends DOMProps, RefAttributes<SegmentElementType
     inverted?: boolean;
     children?: ReactNode;
 }
-declare const Segment: {
-    ({ ref, ...props }: SegmentProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare function Segment({ ref, ...props }: SegmentProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Segment {
+    var displayName: string;
+}
 export { Segment };

package/dist/types/components/Segment/SegmentGroup.d.ts

@@ -6,8 +6,8 @@ export interface SegmentGroupProps extends DOMProps {
     gap?: "size-xs" | "size-s" | "size-m" | "size-l" | "size-xl" | "size-xxl";
     children?: ReactNode;
 }
-declare const SegmentGroup: {
-    (props: SegmentGroupProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare function SegmentGroup(props: SegmentGroupProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SegmentGroup {
+    var displayName: string;
+}
 export { SegmentGroup };

package/dist/types/components/Select/Select.d.ts

@@ -15,8 +15,8 @@ export interface SelectProps extends UseLabelProps, Validation, DOMProps, RefAtt
     "aria-describedby"?: string;
     isDisabled?: boolean;
 }
-declare const Select: {
-    ({ ref, ...props }: SelectProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare function Select({ ref, ...props }: SelectProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Select {
+    var displayName: string;
+}
 export { Select };

package/dist/types/components/Stack/Stack.d.ts

@@ -13,7 +13,7 @@ export interface StackProps extends DOMProps, RefAttributes<StackElementType> {
     elementType?: React.ElementType;
 }
 export type StackRef = Ref<StackElementType>;
-export declare const Stack: {
-    ({ ref, ...props }: StackProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare function Stack({ ref, ...props }: StackProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Stack {
+    var displayName: string;
+}

package/dist/types/components/StickyOnMobile/StickyOnMobile.d.ts

@@ -0,0 +1,15 @@
+import type { RefAttributes, ReactNode, ElementType, CSSProperties, HTMLAttributes } from "react";
+import "./StickyOnMobile.css";
+export type StickyOnMobileElementType = HTMLElement;
+export interface StickyOnMobileProps extends HTMLAttributes<StickyOnMobileElementType>, RefAttributes<StickyOnMobileElementType> {
+    children?: ReactNode;
+    /** HTML element to render. Defaults to `div`. */
+    elementType?: ElementType;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function StickyOnMobile({ ref, ...props }: StickyOnMobileProps): import("react/jsx-runtime").JSX.Element;
+declare namespace StickyOnMobile {
+    var displayName: string;
+}
+export { StickyOnMobile };

package/dist/types/components/StickyOnMobile/index.d.ts

@@ -0,0 +1 @@
+export * from "./StickyOnMobile";

package/dist/types/components/Switch/Switch.d.ts

@@ -9,8 +9,8 @@ export interface SwitchProps extends DOMProps, RefAttributes<SwitchElementType>
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
     isDisabled?: boolean;
 }
-declare const Switch: {
-    ({ ref, ...props }: SwitchProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare function Switch({ ref, ...props }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Switch {
+    var displayName: string;
+}
 export { Switch };

package/dist/types/components/Table/Body.d.ts

@@ -4,8 +4,8 @@ export interface BodyProps extends RefAttributes<HTMLTableSectionElement> {
     className?: string;
 }
 export type BodyRef = Ref<HTMLTableSectionElement>;
-declare const Body: {
-    ({ ref, ...props }: BodyProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare function Body({ ref, ...props }: BodyProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Body {
+    var displayName: string;
+}
 export { Body };

package/dist/types/components/Table/Cell.d.ts

@@ -6,8 +6,8 @@ export interface CellProps extends RefAttributes<HTMLTableCellElement> {
     rowSpan?: number;
 }
 export type CellRef = Ref<HTMLTableCellElement>;
-declare const Cell: {
-    ({ ref, ...props }: CellProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare function Cell({ ref, ...props }: CellProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Cell {
+    var displayName: string;
+}
 export { Cell };

package/dist/types/components/Table/Foot.d.ts

@@ -4,8 +4,8 @@ export interface FootProps extends RefAttributes<HTMLTableSectionElement> {
     className?: string;
 }
 export type FootRef = Ref<HTMLTableSectionElement>;
-declare const Foot: {
-    ({ ref, ...props }: FootProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare function Foot({ ref, ...props }: FootProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Foot {
+    var displayName: string;
+}
 export { Foot };

package/dist/types/components/Table/Head.d.ts

@@ -4,8 +4,8 @@ export interface HeadProps extends RefAttributes<HTMLTableSectionElement> {
     className?: string;
 }
 export type HeadRef = Ref<HTMLTableSectionElement>;
-declare const Head: {
-    ({ ref, ...props }: HeadProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare function Head({ ref, ...props }: HeadProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Head {
+    var displayName: string;
+}
 export { Head };

package/dist/types/components/Table/HeaderCell.d.ts

@@ -7,8 +7,8 @@ export interface HeaderCellProps extends RefAttributes<HTMLTableCellElement> {
     scope?: "col" | "row" | "colgroup" | "rowgroup";
 }
 export type HeaderCellRef = Ref<HTMLTableCellElement>;
-declare const HeaderCell: {
-    ({ ref, scope, ...props }: HeaderCellProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare function HeaderCell({ ref, scope, ...props }: HeaderCellProps): import("react/jsx-runtime").JSX.Element;
+declare namespace HeaderCell {
+    var displayName: string;
+}
 export { HeaderCell };

package/dist/types/components/Table/Row.d.ts

@@ -4,8 +4,8 @@ export interface RowProps extends RefAttributes<HTMLTableRowElement> {
     className?: string;
 }
 export type RowRef = Ref<HTMLTableRowElement>;
-declare const Row: {
-    ({ ref, ...props }: RowProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare function Row({ ref, ...props }: RowProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Row {
+    var displayName: string;
+}
 export { Row };

package/dist/types/components/Table/Table.d.ts

@@ -7,8 +7,8 @@ export interface TableProps extends DOMProps, RefAttributes<TableElementType> {
     className?: string;
 }
 export type TableRef = Ref<TableElementType>;
-declare const Table: {
-    ({ ref, ...props }: TableProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare function Table({ ref, ...props }: TableProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Table {
+    var displayName: string;
+}
 export { Table };

package/dist/types/components/Text/Text.d.ts

@@ -17,8 +17,8 @@ export interface TextProps extends DOMProps, RefAttributes<TextElementType> {
     style?: React.CSSProperties;
 }
 export declare const getElementType: (variant: TextVariantType | undefined, elementType: ElementType | undefined) => ElementType;
-declare const Text: {
-    ({ ref, elementType, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare function Text({ ref, elementType, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Text {
+    var displayName: string;
+}
 export { Text };

package/dist/types/components/TextArea/TextArea.d.ts

@@ -7,8 +7,8 @@ export interface TextAreaProps extends UseTextFieldProps, DOMProps, RefAttribute
     className?: string;
     errorMessage?: string;
 }
-declare const TextArea: {
-    ({ ref, ...props }: TextAreaProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare function TextArea({ ref, ...props }: TextAreaProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TextArea {
+    var displayName: string;
+}
 export { TextArea };

package/dist/types/components/TextAreaInput/TextAreaInput.d.ts

@@ -10,8 +10,8 @@ export interface TextAreaInputProps extends DOMProps, InteractionStateProps, Ref
     isReadOnly?: boolean;
     isRequired?: boolean;
 }
-declare const TextAreaInput: {
-    ({ ref, ...props }: TextAreaInputProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare function TextAreaInput({ ref, ...props }: TextAreaInputProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TextAreaInput {
+    var displayName: string;
+}
 export { TextAreaInput };

package/dist/types/components/TextField/TextField.d.ts

@@ -15,8 +15,5 @@ export interface TextFieldProps extends DOMProps, FocusEvents, UseTextFieldProps
     suffixOutside?: ReactElement;
 }
 export type TextFieldRef = Ref<TextFieldElementType>;
-declare const TextField: {
-    ({ ref, ...props }: TextFieldProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare const TextField: import("react").MemoExoticComponent<({ ref, ...props }: TextFieldProps) => import("react/jsx-runtime").JSX.Element>;
 export { TextField };

package/dist/types/components/TextField/adornmentWithClassName.d.ts

@@ -1,2 +1,4 @@
 import type { ReactElement } from "react";
-export declare const adornmentWithClassName: (component?: ReactElement, validationClasses?: string, className?: string) => ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+export declare const adornmentWithClassName: (component?: ReactElement, validationClasses?: string, className?: string) => ReactElement<{
+    className?: string;
+}, string | import("react").JSXElementConstructor<any>> | null;

package/dist/types/components/TextOrHTML/TextOrHTML.d.ts

@@ -13,8 +13,8 @@ export interface TextOrHTMLProps extends Omit<TextProps, "children">, RefAttribu
     /** If true, auto-detects whether text is HTML or plain text to determine wrapping and element type */
     autoDetect?: boolean;
 }
-declare const TextOrHTML: {
-    ({ ref, text, htmlClassName, htmlElementType, textWrapper, autoDetect, ...textProps }: TextOrHTMLProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare function TextOrHTML({ ref, text, htmlClassName, htmlElementType, textWrapper, autoDetect, ...textProps }: TextOrHTMLProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TextOrHTML {
+    var displayName: string;
+}
 export { TextOrHTML };

package/dist/types/components/Title/Title.d.ts

@@ -10,8 +10,8 @@ export interface TitleProps extends DOMProps, RefAttributes<TitleElementType> {
     title: string;
     description: string;
 }
-declare const Title: {
-    ({ ref, ...props }: TitleProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare function Title({ ref, ...props }: TitleProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Title {
+    var displayName: string;
+}
 export { Title };

package/dist/types/components/Toast/ToastOptionsDoc.d.ts

@@ -1,9 +1,5 @@
 import type { ToastOptions } from "./types";
-/**
- * Documentation-only component for ToastOptions.
- * Exists solely to provide ArgTypes for the toast() function options.
- */
-export declare const ToastOptionsDoc: {
-    (_props: ToastOptions): null;
-    displayName: string;
-};
+export declare function ToastOptionsDoc(_props: ToastOptions): null;
+export declare namespace ToastOptionsDoc {
+    var displayName: string;
+}

package/dist/types/components/Toast/Toaster.d.ts

@@ -13,7 +13,7 @@ export interface ToasterProps {
     /** Gap between toasts in pixels */
     gap?: number;
 }
-export declare const Toaster: {
-    ({ position, closeButton, expand, duration, visibleToasts, gap, }: ToasterProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare function Toaster({ position, closeButton, expand, duration, visibleToasts, gap }: ToasterProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Toaster {
+    var displayName: string;
+}

package/dist/types/components/index.d.ts

@@ -34,6 +34,7 @@ export * from "./Segment";
 export * from "./Select";
 export * from "./Slider";
 export * from "./Stack";
+export * from "./StickyOnMobile";
 export * from "./SVG";
 export * from "./Switch";
 export * from "./Table";

package/dist/types/hooks/useButton/useButton.d.ts

@@ -12,10 +12,9 @@ export interface UseButtonProps {
     name?: string | undefined;
     value?: string | undefined;
 }
-export declare function useButton({ elementType, type, isDisabled, href, target, rel, role, name, value, onClick, onPress, }: UseButtonProps): {
+export declare function useButton({ elementType, type, isDisabled, href, target, rel, role, name, value, onClick, onPress }: UseButtonProps): {
     buttonProps: {
-        onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
-        type: "reset" | "submit" | "button";
+        type: "button" | "reset" | "submit";
         role?: undefined;
         href: string | undefined;
         target: string | undefined;
@@ -25,10 +24,10 @@ export declare function useButton({ elementType, type, isDisabled, href, target,
         "aria-disabled": true | undefined;
         name: string | undefined;
         value: string | undefined;
-    } | {
         onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
-        role: string | undefined;
+    } | {
         type?: undefined;
+        role: string | undefined;
         href: string | undefined;
         target: string | undefined;
         rel: string | undefined;
@@ -37,5 +36,6 @@ export declare function useButton({ elementType, type, isDisabled, href, target,
         "aria-disabled": true | undefined;
         name: string | undefined;
         value: string | undefined;
+        onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
     };
 };

package/dist/types/hooks/useLabel/useLabel.d.ts

@@ -19,7 +19,7 @@ export type LabellingProps = {
     "aria-describedby"?: string | undefined;
     "aria-details"?: string | undefined;
 };
-export declare function useLabel({ id: providedId, label, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, labelElementType, }: UseLabelProps): {
+export declare function useLabel({ id: providedId, label, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, labelElementType }: UseLabelProps): {
     labelProps: {
         id?: string | undefined;
     } & LabelHTMLAttributes<HTMLLabelElement>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius",
   "license": "UNLICENSED",
-  "version": "10.4.3",
+  "version": "10.5.0",
   "description": "Core library of Mobius react components",
   "repository": {
     "type": "git",
@@ -47,12 +47,12 @@
     "turbo:build": "yarn build:esm && yarn build:cjs && yarn build:types",
     "build:esm": "build-package esm",
     "build:cjs": "build-package cjs",
-    "build:types": "tsc --emitDeclarationOnly --project tsconfig.build.json",
+    "build:types": "tsgo --emitDeclarationOnly --project tsconfig.build.json",
     "lint": "eslint . --cache",
     "lint:fix": "eslint . --fix",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
-    "check-types": "tsc --noEmit --pretty",
+    "check-types": "tsgo --pretty",
     "size": "turbo run turbo:size --",
     "turbo:size": "yarn workspace @simplybusiness/bundle-checker start",
     "lint:css": "lint-css",
@@ -63,33 +63,34 @@
     "dist/**/*.css"
   ],
   "devDependencies": {
-    "@eslint/compat": "^2.0.2",
-    "@eslint/eslintrc": "^3.3.4",
-    "@eslint/js": "^9.39.3",
-    "@react-types/progress": "^3.5.18",
+    "@eslint/compat": "^2.0.5",
+    "@eslint/eslintrc": "^3.3.5",
+    "@eslint/js": "^9.39.4",
+    "@react-types/progress": "^3.6.0",
     "@simplybusiness/build-scripts": "^3.0.0",
-    "@simplybusiness/eslint-config": "^2.0.5",
-    "@simplybusiness/eslint-plugin": "^1.3.1",
+    "@simplybusiness/eslint-config": "^2.0.7",
+    "@simplybusiness/eslint-plugin": "^1.3.2",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@total-typescript/shoehorn": "^0.1.2",
-    "@types/node": "^25.3.3",
+    "@types/node": "^25.6.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@typescript-eslint/eslint-plugin": "^8.56.1",
-    "@typescript-eslint/parser": "^8.56.1",
-    "@vitest/coverage-v8": "^4.0.18",
+    "@typescript-eslint/eslint-plugin": "^8.59.0",
+    "@typescript-eslint/parser": "^8.59.0",
+    "@typescript/native-preview": "7.0.0-dev.20260421.2",
+    "@vitest/coverage-v8": "^4.1.4",
     "csstype": "^3.2.3",
-    "eslint": "^9.39.3",
+    "eslint": "^9.39.4",
     "eslint-plugin-ssr-friendly": "^1.3.0",
-    "prettier": "^3.8.1",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
+    "prettier": "^3.8.3",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
     "tslib": "^2.8.1",
-    "typescript": "^5.9.3",
-    "vitest": "^4.0.18"
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.4"
   },
   "peerDependencies": {
     "react": "^19.2.0",
@@ -97,8 +98,8 @@
   },
   "dependencies": {
     "@loadable/component": "^5.16.7",
-    "@simplybusiness/icons": "^5.1.0",
-    "@simplybusiness/mobius-hooks": "^0.2.0",
+    "@simplybusiness/icons": "^5.1.1",
+    "@simplybusiness/mobius-hooks": "^0.2.1",
     "classnames": "^2.5.1",
     "dialog-polyfill": "^0.5.6",
     "react-accessible-dropdown-menu-hook": "^4.0.1",

package/src/components/Box/Box.test.tsx

@@ -1,6 +1,5 @@
 import { createRef } from "react";
 import { render } from "@testing-library/react";
-import type { CSSProperties } from "react";
 import { Box } from ".";
 
 const CLASS_NAME = "mobius-box";
@@ -221,7 +220,7 @@ describe("Box", () => {
 
     it("does not remove prop padding when style padding is undefined", () => {
       const { container } = render(
-        <Box padding={50} style={{ padding: undefined } as CSSProperties} />,
+        <Box padding={50} style={{ padding: undefined }} />,
       );
 
       expect(container.firstChild).toHaveStyle({ padding: "50px" });

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -31,13 +31,9 @@ const Breadcrumbs = ({ ref, ...props }: BreadcrumbsProps) => {
     <nav ref={ref} {...otherProps} {...navProps} className={classes}>
       <ul>
         {childArray.map((child, i) =>
-          cloneElement(
-            child as ReactElement,
-            {
-              key: i,
-              isCurrent: i === childArray.length - 1,
-            } as { key: number; isCurrent: boolean },
-          ),
+          cloneElement(child as ReactElement<{ isCurrent?: boolean }>, {
+            isCurrent: i === childArray.length - 1,
+          }),
         )}
       </ul>
     </nav>

package/src/components/Button/Button.stories.tsx

@@ -5,7 +5,7 @@ import type { ButtonProps } from "./Button";
 import { Button } from "./Button";
 import { Icon } from "../Icon";
 import { excludeControls } from "../../utils";
-// eslint-disable-next-line no-restricted-imports -- story-only styles
+
 import "./Button.story.styles.css";
 
 type StoryType = StoryObj<typeof Button>;

package/src/components/Combobox/Combobox.tsx

@@ -7,7 +7,7 @@ import { useBreakpoint } from "../../hooks";
 import { TextField } from "../TextField";
 import { VisuallyHidden } from "../VisuallyHidden";
 import { Listbox } from "./Listbox"; // Import Listbox component
-import type { ComboboxOption, ComboboxProps, ComboboxRef } from "./types";
+import type { ComboboxOption, ComboboxProps } from "./types";
 import { useComboboxHighlight } from "./useComboboxHighlight";
 import { useComboboxOptions } from "./useComboboxOptions";
 import { getOptionLabel, getOptionValue, isOptionGroup } from "./utils";
@@ -406,6 +406,4 @@ const ComboboxInner = <T extends ComboboxOption>({
   );
 };
 
-export const Combobox = ComboboxInner as <T extends ComboboxOption>(
-  props: ComboboxProps<T> & { ref?: ComboboxRef },
-) => React.JSX.Element;
+export const Combobox = ComboboxInner;

package/src/components/DropdownMenu/DropdownMenu.stories.tsx

@@ -7,7 +7,7 @@ import { DropdownMenu } from ".";
 import { excludeControls } from "../../utils";
 import { StoryContainer } from "../../utils/StoryContainer";
 import { Icon } from "../Icon";
-// eslint-disable-next-line no-restricted-imports -- story-only styles
+
 import "./DropdownMenu.story.styles.css";
 
 type StoryType = StoryObj<typeof DropdownMenu>;

package/src/components/DropdownMenu/Item.tsx

@@ -39,12 +39,9 @@ const Item = ({ ref, ...props }: ItemProps) => {
             (child.props as { className?: string }).className,
             classes,
           );
-          return cloneElement(
-            child as ReactElement,
-            {
-              className: childClasses,
-            } as { className: string },
-          );
+          return cloneElement(child as ReactElement<{ className?: string }>, {
+            className: childClasses,
+          });
         }
 
         return <span className={classes}>{child}</span>;

package/src/components/Grid/Grid.stories.tsx

@@ -6,7 +6,7 @@ import { Box } from "../Box";
 import { Flex } from "../Flex";
 import type { GridItem } from "./Item";
 import { sizeOptions } from "../../utils";
-// eslint-disable-next-line no-restricted-imports -- story-only styles
+
 import "./Grid.story.styles.css";
 
 type StoryType = StoryObj<typeof Grid>;

package/src/components/StickyOnMobile/StickyOnMobile.css

@@ -0,0 +1,19 @@
+@layer atoms {
+  @media (max-width: 768px) {
+    .mobius-sticky-on-mobile {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      box-sizing: border-box;
+      padding: var(--size-sm);
+      padding-bottom: max(var(--size-sm), env(safe-area-inset-bottom));
+      background-color: var(--color-background);
+      /* Second shadow paints a 1px background-coloured band below the bar so sub-pixel rounding can't reveal a hairline gap. */
+      box-shadow: var(--shadow-card),
+      0 1px 0 var(--color-background);
+      /* Sit above Zendesk's launcher (z-index: 999999). */
+      z-index: 999999;
+    }
+  }
+}

package/src/components/StickyOnMobile/StickyOnMobile.mdx

@@ -0,0 +1,52 @@
+import { Meta, ArgTypes, Canvas } from "@storybook/addon-docs/blocks";
+import * as StickyOnMobileStories from "./StickyOnMobile.stories";
+import { StickyOnMobile } from "./StickyOnMobile";
+
+<Meta of={StickyOnMobileStories} />
+
+# StickyOnMobile
+
+`StickyOnMobile` is a thin layout wrapper that pins a single child to the bottom of the viewport on mobile (`max-width: 768px`) and renders in document flow on desktop. Use it for primary CTAs such as the Combined Payments checkout button.
+
+## Install
+
+```bash
+yarn add @simplybusiness/mobius
+```
+
+## Usage
+
+```js
+import { StickyOnMobile } from "@simplybusiness/mobius";
+```
+
+### Default
+
+<Canvas of={StickyOnMobileStories.Default} />
+
+### As a `footer` element
+
+<Canvas of={StickyOnMobileStories.AsFooterElement} />
+
+## Behaviour
+
+- **≥ 769px** — renders as a plain block element with no margin or padding. The wrapper has no material impact on layout.
+- **≤ 768px** — clamped to the bottom of the viewport with `position: fixed; bottom: 0; left: 0; right: 0;`. White background (`var(--color-background)`) and a soft upward shadow visually layer the bar above the scrolling content. Padding of `var(--size-sm)` is applied, with `env(safe-area-inset-bottom)` honoured for iOS home-indicator safe area.
+
+## Composition
+
+`StickyOnMobile` accepts a single child. For complex content, compose it into its own component first.
+
+The breakpoint is fixed at 768px and is **not** dynamic. To override it, pass a `className` and rely on consumer-side CSS — `StickyOnMobile`'s rules sit inside `@layer atoms`, so any unlayered consumer rule wins.
+
+## Props
+
+<ArgTypes of={StickyOnMobile} />
+
+## Component HTML Structure and Class names
+
+The following HTML is rendered for a StickyOnMobile:
+
+```html
+<div class="mobius mobius-sticky-on-mobile">{children}</div>
+```