@simplybusiness/mobius 3.4.4 → 3.5.0

package/dist/mobius.d.ts

@@ -27,7 +27,6 @@ import { HoverProps } from '@react-aria/interactions';
 import { HTMLAttributeAnchorTarget } from 'react';
 import { HTMLInputTypeAttribute } from 'react';
 import { IconName } from '@simplybusiness/icons';
-import { JSX as JSX_2 } from '@emotion/react/jsx-runtime';
 import { LabelableProps } from '@react-types/shared';
 import { Link as Link_2 } from 'react-router-dom';
 import { parseDate } from '@internationalized/date';
@@ -318,7 +317,7 @@ export declare interface DataTableProps extends DOMProps, RefAttributes<DataTabl
 
 export declare type DataTableRef = Ref<DataTableElementType>;
 
-export declare function DatePicker(props: DatePickerProps): JSX_2.Element;
+export declare function DatePicker(props: DatePickerProps): JSX.Element;
 
 export declare interface DatePickerProps extends AriaDatePickerProps<DateValue>, DatePickerStateOptions<DateValue> {
     label: string;
@@ -329,7 +328,7 @@ export declare const DEFAULT_BREAKPOINT: Breakpoint;
 declare type DialogRef = HTMLDialogElement;
 
 export declare const Divider: {
-    (props: DividerProps): JSX_2.Element;
+    (props: DividerProps): JSX.Element;
     displayName: string;
 };
 
@@ -374,7 +373,7 @@ export declare type ElementType = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p"
 declare const ERROR_MESSAGE_SERVICE_UNAVAILABLE = "The service is currently unavailable. Please try again later";
 
 export declare const ErrorMessage: {
-    ({ id, errorMessage, className, }: ErrorMessageProps): JSX_2.Element | null;
+    ({ id, errorMessage, className, }: ErrorMessageProps): JSX.Element | null;
     displayName: string;
 };
 
@@ -596,7 +595,7 @@ export declare type LegendProps = {
 
 export declare const Link: ForwardedRefComponent<LinkProps, LinkElementType>;
 
-export declare function LinkButton({ href, children, className, elementType, ...rest }: LinkButtonProps): JSX_2.Element;
+export declare function LinkButton({ href, children, className, elementType, ...rest }: LinkButtonProps): JSX.Element;
 
 export declare interface LinkButtonProps extends Omit<ButtonProps, "elementType"> {
     href: string;
@@ -681,8 +680,18 @@ export declare type LoadingIndicatorRef = Ref<SVGSVGElement>;
 
 declare const LOGO_LINK = "https://www.simplybusiness.co.uk/";
 
+export declare const MaskedField: ForwardedRefComponent<MaskedFieldProps, TextFieldElementType>;
+
+export declare type MaskedFieldElementType = HTMLInputElement;
+
+export declare interface MaskedFieldProps extends TextFieldProps, DOMProps {
+    pattern: "ssn" | "fein";
+}
+
+export declare type MaskedFieldRef = Ref<MaskedFieldElementType>;
+
 export declare const Modal: {
-    ({ isOpen, onClose, children, className, closeLabel, size, appElement, preventCloseOnEsc, animation, shouldFocusAfterRender, parentSelector, }: ModalProps): JSX_2.Element;
+    ({ isOpen, onClose, children, className, closeLabel, size, appElement, preventCloseOnEsc, animation, shouldFocusAfterRender, parentSelector, }: ModalProps): JSX.Element;
     displayName: string;
 } & {
     Header: ForwardRefExoticComponent<Pick<ModalHeaderProps, "key" | "id" | "children" | "onClose" | "closeLabel"> & RefAttributes<HTMLElement>>;
@@ -761,7 +770,7 @@ export declare type OptionRef = Ref<HTMLOptionElement>;
 
 export { parseDate }
 
-export declare const PasswordField: ForwardRefExoticComponent<Pick<PasswordFieldProps, "type" | "key" | "id" | "name" | "value" | "label" | "pattern" | "className" | "children" | "inputMode" | "description" | "autoComplete" | "autoFocus" | "maxLength" | "minLength" | "defaultValue" | "placeholder" | "aria-activedescendant" | "aria-autocomplete" | "aria-describedby" | "aria-details" | "aria-errormessage" | "aria-haspopup" | "aria-label" | "aria-labelledby" | "onCopy" | "onCut" | "onPaste" | "onCompositionEnd" | "onCompositionStart" | "onCompositionUpdate" | "onFocus" | "onBlur" | "onChange" | "onBeforeInput" | "onInput" | "onKeyDown" | "onKeyUp" | "onSelect" | "excludeFromTabOrder" | "isDisabled" | "errorMessage" | "onFocusChange" | "isRequired" | "isReadOnly" | "validationState" | "onHoverStart" | "onHoverEnd" | "onHoverChange" | "inputElementType"> & RefAttributes<HTMLInputElement>>;
+export declare const PasswordField: ForwardRefExoticComponent<Pick<PasswordFieldProps, "label" | "pattern" | "key" | "autoComplete" | "autoFocus" | "maxLength" | "minLength" | "name" | "defaultValue" | "className" | "id" | "placeholder" | "inputMode" | "aria-activedescendant" | "aria-autocomplete" | "aria-describedby" | "aria-details" | "aria-errormessage" | "aria-haspopup" | "aria-label" | "aria-labelledby" | "type" | "value" | "children" | "onCopy" | "onCut" | "onPaste" | "onCompositionEnd" | "onCompositionStart" | "onCompositionUpdate" | "onFocus" | "onBlur" | "onChange" | "onBeforeInput" | "onInput" | "onKeyDown" | "onKeyUp" | "onSelect" | "excludeFromTabOrder" | "isDisabled" | "description" | "errorMessage" | "onFocusChange" | "isRequired" | "isReadOnly" | "validationState" | "onHoverStart" | "onHoverEnd" | "onHoverChange" | "inputElementType"> & RefAttributes<HTMLInputElement>>;
 
 export declare interface PasswordFieldProps extends TextFieldProps {
 }
@@ -769,7 +778,7 @@ export declare interface PasswordFieldProps extends TextFieldProps {
 export declare type PasswordFieldRef = TextFieldRef;
 
 declare const PercentageTotalsQuestion: {
-    (props: PercentageTotalsQuestionProps): JSX_2.Element;
+    (props: PercentageTotalsQuestionProps): JSX.Element;
     displayName: string;
 };
 
@@ -795,7 +804,7 @@ export declare interface ProgressProps extends AriaProgressBarProps, DOMProps, R
 
 export declare type ProgressRef = Ref<ProgressElementType>;
 
-declare function Question({ label, description, children, errorMessage, validationState, help, className, closeHelpOnOutsideClick, onChange, }: QuestionProps): JSX_2.Element;
+declare function Question({ label, description, children, errorMessage, validationState, help, className, closeHelpOnOutsideClick, onChange, }: QuestionProps): JSX.Element;
 
 declare const QuestionGroup: ForwardedRefComponent<QuestionGroupProps, QuestionGroupElementType>;
 
@@ -888,12 +897,12 @@ declare interface SectionProps extends DOMProps, RefAttributes<SectionElementTyp
 declare type SectionRef = Ref<SectionElementType>;
 
 export declare const Segment: {
-    (props: SegmentProps): JSX_2.Element;
+    (props: SegmentProps): JSX.Element;
     displayName: string;
 };
 
 export declare const SegmentGroup: {
-    (props: SegmentGroupProps): JSX_2.Element;
+    (props: SegmentGroupProps): JSX.Element;
     displayName: string;
 };
 
@@ -926,6 +935,7 @@ export declare interface SelectProps extends HoverProps, LabelableProps, Validat
     className?: string;
     errorMessage?: string;
     children?: ReactElement<OptionProps>[] | ReactElement<OptionProps>;
+    "aria-describedby"?: string;
 }
 
 export declare type SelectRef = Ref<SelectElementType>;
@@ -934,7 +944,7 @@ export declare type Size = "small" | "medium" | "large";
 
 export declare type SizeType = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
 
-export declare function Slider(props: SliderProps): JSX_2.Element;
+export declare function Slider(props: SliderProps): JSX.Element;
 
 export declare interface SliderProps extends SliderProps_2<number>, DOMProps {
     variant?: "primary" | "secondary";
@@ -996,6 +1006,7 @@ export declare const SVG: ForwardedRefComponent<SVGProps, SVGSVGElement>;
 export declare interface SVGProps extends DOMProps, RefAttributes<SVGSVGElement> {
     children: React.ReactElement<React.SVGProps<SVGSVGElement>>;
     className?: string;
+    style?: React.CSSProperties;
 }
 
 export declare type SVGRef = Ref<SVGSVGElement>;
@@ -1143,7 +1154,7 @@ export declare interface ThemeContextProps {
     setBreakpoints: (config: BreakpointsType) => void;
 }
 
-export declare const ThemeProvider: ({ children, icons }: ThemeProviderProps) => JSX_2.Element;
+export declare const ThemeProvider: ({ children, icons }: ThemeProviderProps) => JSX.Element;
 
 export declare interface ThemeProviderProps {
     children: React.ReactNode;
@@ -1198,6 +1209,7 @@ declare interface TradeSelectorProps extends Partial<TradeSelectorCommonProps>,
     labels?: LabelProps_2;
     hideLabel?: boolean;
     "data-cy"?: string;
+    "aria-describedby"?: string;
 }
 
 declare type TradeSelectorRef = Ref<TradeSelectorElementType>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius",
   "license": "UNLICENSED",
-  "version": "3.4.4",
+  "version": "3.5.0",
   "description": "Core library of Mobius react components",
   "repository": {
     "type": "git",
@@ -24,15 +24,15 @@
     }
   },
   "scripts": {
+    "build": "turbo run turbo:build",
     "build:cjs": "tsc",
     "build:esm": "tsc -p tsconfig.esm.json",
-    "build": "yarn clean-dist && yarn build:cjs && yarn build:esm && yarn extract-api",
+    "build:extract-api": "api-extractor run",
     "lint": "eslint --ext .tsx,.ts,.js,.jsx,.mjs .",
     "test": "NODE_OPTIONS=--experimental-vm-modules jest",
     "test:coverage": "NODE_OPTIONS=--experimental-vm-modules jest --collect-coverage",
-    "check-types": "tsc --noEmit --incremental --emitDeclarationOnly false --pretty",
-    "extract-api": "api-extractor run",
-    "clean-dist": "rm -rf dist/",
+    "check-types": "tsc --noEmit --emitDeclarationOnly false --pretty",
+    "clean-dist": "rm -rf dist",
     "release:major": "../../bin/version.sh major",
     "release:minor": "../../bin/version.sh minor",
     "release:patch": "../../bin/version.sh patch",

package/src/components/Accordion/Accordion.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef, Ref, RefAttributes, ReactNode, useState } from "react";
 import { DOMProps } from "@react-types/shared";
 import clsx from "clsx";

package/src/components/Alert/Alert.tsx

@@ -2,6 +2,7 @@ import { Ref, forwardRef, RefAttributes, ReactNode } from "react";
 import { DOMProps } from "@react-types/shared";
 import clsx from "clsx";
 import { info, success, warning, error } from "@simplybusiness/icons";
+import styled from "@emotion/styled";
 import { ForwardedRefComponent } from "../../types/components";
 import { Icon } from "../Icon";
 
@@ -19,6 +20,10 @@ export interface AlertProps extends DOMProps, RefAttributes<AlertElementType> {
 
 export type AlertRef = Ref<AlertElementType>;
 
+const StyledIcon = styled(Icon)`
+  height: 1.32em;
+`
+
 const Alert: ForwardedRefComponent<AlertProps, AlertElementType> = forwardRef(
   (props: AlertProps, ref: AlertRef) => {
     const {
@@ -58,7 +63,7 @@ const Alert: ForwardedRefComponent<AlertProps, AlertElementType> = forwardRef(
     return (
       <Element ref={ref} role="alert" {...otherProps} className={classes}>
         <span className={iconClasses}>
-          <Icon icon={icon[variant]} css={{ height: "1.32em" }} />
+          <StyledIcon icon={icon[variant]} />
         </span>
         <div>
           {header && <p className={headerClasses}>{header}</p>}

package/src/components/Breadcrumbs/BreadcrumbItem.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   Ref,
   forwardRef,

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   Ref,
   forwardRef,

package/src/components/Button/Button.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Ref, forwardRef, RefAttributes, useRef, ReactNode } from "react";
 import { useButton } from "@react-aria/button";
 import { useHover } from "@react-aria/interactions";

package/src/components/Checkbox/CheckboxContext.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { CheckboxGroupState } from "@react-stately/checkbox";
 import { createContext, Context, useContext } from "react";
 

package/src/components/Checkbox/CheckboxGroup.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   Children,
   forwardRef,

package/src/components/Checkbox/CheckboxGroupItem.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef, useRef } from "react";
 import { useCheckboxGroupItem } from "@react-aria/checkbox";
 import { useFocusRing } from "@react-aria/focus";

package/src/components/Checkbox/CheckboxItem.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef, useRef } from "react";
 import { useCheckbox } from "@react-aria/checkbox";
 import { useFocusRing } from "@react-aria/focus";

package/src/components/Chopin/PercentageTotalsQuestion/PercentageItem.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState, FormEventHandler } from "react";
 import { NumberField } from "../../NumberField";
 

package/src/components/Chopin/PercentageTotalsQuestion/PercentageTotalsQuestion.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import clsx from "clsx";
 import { Question, QuestionProps } from "../Question";

package/src/components/Chopin/Question/Question.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   Children,
   cloneElement,

package/src/components/Chopin/QuestionGroup/QuestionGroup.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   Ref,
   forwardRef,

package/src/components/Chopin/QuestionHelp/QuestionHelp.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useFocusRing } from "@react-aria/focus";
 import clsx from "clsx";
 import { ReactNode, useRef } from "react";

package/src/components/Chopin/Steps/StepItem.tsx

@@ -9,6 +9,7 @@ import { DOMProps } from "@react-types/shared";
 import clsx from "clsx";
 import { tick } from "@simplybusiness/icons";
 import { Link } from "react-router-dom";
+import styled from '@emotion/styled';
 import { ForwardedRefComponent } from "../../../types/components";
 import { Icon } from "../../Icon";
 
@@ -32,6 +33,10 @@ export interface StepItemProps
 
 export type StepItemRef = Ref<StepItemElementType>;
 
+const StyledIcon = styled(Icon)`
+  height: 100%;
+`;
+
 const StepItem: ForwardedRefComponent<StepItemProps, StepItemElementType> =
   forwardRef((props: StepItemProps, ref: StepItemRef) => {
     const {
@@ -74,7 +79,7 @@ const StepItem: ForwardedRefComponent<StepItemProps, StepItemElementType> =
         {completed ? (
           <LinkElement className={linkClasses} href={url} to={to}>
             <span className={iconClasses}>
-              <Icon icon={tick} css={{ height: "100%" }} />
+              <StyledIcon icon={tick} />
             </span>
             <span className={nameClasses}>{name}</span>
           </LinkElement>

package/src/components/Chopin/TradeSelector/Listing/ListingItem.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useFocusRing } from "@react-aria/focus";
 import { useHover } from "@react-aria/interactions";
 import clsx from "clsx";

package/src/components/Chopin/TradeSelector/SearchResults/SearchResults.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { RefObject, useCallback, useEffect, useRef, useState } from "react";
 import clsx from "clsx";
 import { Listing } from "../Listing";

package/src/components/Chopin/TradeSelector/TradeInput/TradeInput.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { RefObject, ChangeEvent, MouseEvent } from "react";
 import { AriaLabelingProps, DOMProps } from "@react-types/shared";
 import clsx from "clsx";

package/src/components/Chopin/TradeSelector/TradeSelector.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   forwardRef,
   useState,

package/src/components/Chopin/TradeSelector/types.ts

@@ -74,6 +74,7 @@ export interface TradeSelectorProps
   labels?: LabelProps;
   hideLabel?: boolean;
   "data-cy"?: string;
+  "aria-describedby"?: string;
 }
 
 export type TradeSelectorRef = Ref<TradeSelectorElementType>;

package/src/components/Chopin/TradeSelector/useFetchTrades/useFetchTrades.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import { useCallback, useEffect, useState } from "react";
 import debounce from "lodash.debounce";
 import { TradeProps } from "../types";

package/src/components/DatePicker/Calendar.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useCalendarState } from "@react-stately/calendar";
 import {
   CalendarProps as AriaCalendarProps,

package/src/components/DatePicker/CalendarButton.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Ref, forwardRef, RefAttributes, useRef, ReactNode } from "react";
 import { useButton } from "@react-aria/button";
 import { HoverProps, useHover } from "@react-aria/interactions";

package/src/components/DatePicker/CalendarCell.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { AriaCalendarCellProps, useCalendarCell } from "@react-aria/calendar";
 import { useFocusRing } from "@react-aria/focus";
 import { CalendarState } from "@react-stately/calendar";

package/src/components/DatePicker/CalendarGrid.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   AriaCalendarGridProps,
   CalendarProps,

package/src/components/DatePicker/DateField.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useLocale } from "@react-aria/i18n";
 import { useDateFieldState } from "@react-stately/datepicker";
 import { AriaDateFieldProps, useDateField } from "@react-aria/datepicker";

package/src/components/DatePicker/DatePicker.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   DatePickerStateOptions,
   useDatePickerState,
@@ -65,7 +67,7 @@ export function DatePicker(props: DatePickerProps) {
 
   return (
     <ModalProvider>
-      <div className={classes} css={{ position: "relative" }}>
+      <div className={classes} style={{ position: "relative" }}>
         <Label {...labelProps}>{label}</Label>
         <div
           {...groupProps}

package/src/components/DatePicker/DateSegment.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useDateSegment } from "@react-aria/datepicker";
 import { useFocusRing } from "@react-aria/focus";
 import {

package/src/components/DatePicker/Popover.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FocusScope } from "@react-aria/focus";
 import { useDialog } from "@react-aria/dialog";
 import {
@@ -45,7 +47,7 @@ export function Popover(props: PopoverProps) {
         {...mergeProps(overlayProps, modalProps, dialogProps)}
         /* @ts-expect-error */
         ref={popoverRef}
-        css={{
+        style={{
           position: "absolute",
           marginTop: 4,
           zIndex: 1,

package/src/components/Divider/Divider.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { DOMProps } from "@react-types/shared";
 import { useSeparator, SeparatorProps } from "@react-aria/separator";
 import clsx from "clsx";

package/src/components/DropdownMenu/DropdownMenu.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   Ref,
   forwardRef,

package/src/components/Fieldset/Fieldset.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   Ref,
   forwardRef,

package/src/components/Fieldset/stories/StyledLegend.tsx

@@ -1,12 +1,7 @@
-import { LegendProps } from "../Fieldset";
+import styled from '@emotion/styled';
 
-export const StyledLegend = (props: LegendProps) => (
-  <legend
-    css={{
-      marginBottom: "size-20",
-      paddingLeft: 0,
-      color: "primary",
-    }}
-    {...props}
-  />
-);
+export const StyledLegend = styled.legend`
+  margin-bottom: var(--size-20);
+  padding-left: 0;
+  color: var(--color-primary);
+`;

package/src/components/Flex/Flex.tsx

@@ -109,7 +109,7 @@ const Flex: ForwardedRefComponent<FlexProps, FlexElementType> = forwardRef(
     const flexStyles = buildFlexStyles(styleProps);
 
     return (
-      <Element ref={ref} css={flexStyles} {...restProps} className={classes} />
+      <Element ref={ref} style={flexStyles} {...restProps} className={classes} />
     );
   },
 );

package/src/components/Grid/Grid.tsx

@@ -1,6 +1,5 @@
-import { Ref, forwardRef, ReactNode, RefAttributes } from "react";
+import { Ref, forwardRef, ReactNode, RefAttributes, CSSProperties } from "react";
 import { DOMProps } from "@react-types/shared";
-import { CSSObject } from "@emotion/react";
 import { ForwardedRefComponent } from "../../types/components";
 
 export type GridElementType = HTMLDivElement;
@@ -52,7 +51,7 @@ const Grid: ForwardedRefComponent<GridProps, GridElementType> = forwardRef(
       ...rest
     } = props;
 
-    const styles: CSSObject = {
+    const styles: CSSProperties = {
       boxSizing: "border-box",
       display: "grid",
       gridTemplateColumns: `repeat(${columns}, 1fr)`,
@@ -65,7 +64,7 @@ const Grid: ForwardedRefComponent<GridProps, GridElementType> = forwardRef(
       justifyItems,
     };
 
-    return <div css={styles} {...rest} />;
+    return <div style={styles} {...rest} />;
   },
 );
 

package/src/components/Grid/Item.tsx

@@ -1,6 +1,7 @@
-import { Ref, forwardRef, RefAttributes, useEffect, useState } from "react";
+"use client";
+
+import { Ref, forwardRef, RefAttributes, useEffect, useState, CSSProperties } from "react";
 import { DOMProps } from "@react-types/shared";
-import { CSSObject } from "@emotion/react";
 import { useBreakpoint } from "../../hooks";
 import { ForwardedRefComponent } from "../../types/components";
 import { SizeType } from "../../types";
@@ -67,16 +68,17 @@ const GridItem: ForwardedRefComponent<GridItemProps, GridItemElementType> =
     const [responsiveSpan, setResponsiveSpan] = useState();
 
     useEffect(() => {
+      // @ts-expect-error
       setResponsiveSpan(breakpointMap[breakpointSize]);
     }, [breakpointSize, breakpointMap]);
 
-    const styles: CSSObject = {
+    const styles: CSSProperties = {
       gridColumn: responsiveSpan ? `span ${responsiveSpan}` : undefined,
       alignSelf,
       justifySelf,
     };
 
-    return <div css={{ ...styles }} {...rest} />;
+    return <div style={{ ...styles }} {...rest} />;
   });
 
 GridItem.displayName = "GridItem";

package/src/components/Icon/IconFromObject.tsx

@@ -63,7 +63,7 @@ const IconFromObject: ForwardedRefComponent<
       role="img"
       xmlns="http://www.w3.org/2000/svg"
       viewBox={`0 0 ${width} ${height}`}
-      css={styles}
+      style={styles}
       ref={ref}
       {...otherProps}
     >

package/src/components/Link/Link.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, {
   forwardRef,
   Ref,

package/src/components/MaskedField/MaskedField.story.mdx

@@ -0,0 +1,58 @@
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { MaskedField, MaskedFieldProps } from "./MaskedField";
+
+<Meta title="Components/MaskedField" component={MaskedField} />
+
+# MaskedField
+
+The `MaskedField` component is used for formatting user input based on available input formatters - SSN (Social Security Number) or FEIN (Federal Employer Identification Number).
+
+## Install
+
+```bash
+yarn add @simplybusiness/mobius
+```
+
+## Usage
+
+```js
+import { MaskedField } from "@simplybusiness/mobius";
+```
+
+## Normal
+
+<Canvas>
+  <Story name="Normal" args={{ label: "MaskedField", pattern: "ssn" }}>
+    {args => <MaskedField {...args} />}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={MaskedField} />
+
+## Component HTML Structure and Class names
+
+The following HTML is rendered for a MaskedField:
+
+```html
+<div class="mobius/MaskedField">
+  <label class="mobius/Label">{label}</label>
+  <input class="mobius/TextFieldInput" type="text" />
+  <div class="mobius/ErrorMessage">{errors}</div>
+</div>
+```
+
+Class names are augmented with the following flags if true:
+
+- --is-focused
+- --is-disabled
+- --is-hovered
+- --is-selected
+- --is-valid
+- --is-invalid
+- --is-optional
+
+---
+
+[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/MaskedField) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)