@transferwise/components 46.111.0 → 46.112.0

package/build/types/inputs/contexts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"contexts.d.ts","sourceRoot":"","sources":["../../../src/inputs/contexts.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,2BAA2B,8CAA+B,CAAC;AAGxE,eAAO,MAAM,sBAAsB,8CAA0B,CAAC;AAG9D,eAAO,MAAM,wBAAwB,8CAAmC,CAAC;AAGzE,eAAO,MAAM,oBAAoB,+CAA+B,CAAC;AAEjE,UAAU,sBAAsB;IAC9B,gLAAgL;IAChL,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,YAAY,EAAE,GAAE,sBAA2B;;;;;EAQ/E;AAED,MAAM,WAAW,wBAAwB;IACvC,eAAe,EAAE,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;CACxD;AAED,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,OAAO,CAAC,wBAAwB,CAAC,EAC7E,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,EACjC,IAAI,CAAC,EAAE,sBAAsB;YAEgB,IAAI,CAAC,CAAC,EAAE,MAAM,wBAAwB,CAAC;;EAOrF"}
+{"version":3,"file":"contexts.d.ts","sourceRoot":"","sources":["../../../src/inputs/contexts.tsx"],"names":[],"mappings":"AAEA,KAAK,qBAAqB,GAAG;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;CACzC,CAAC;AAGF,eAAO,MAAM,yBAAyB,6DAA6B,CAAC;AAGpE,eAAO,MAAM,sBAAsB,8CAA0B,CAAC;AAG9D,eAAO,MAAM,wBAAwB,8CAAmC,CAAC;AAGzE,eAAO,MAAM,oBAAoB,+CAA+B,CAAC;AAEjE,UAAU,sBAAsB;IAC9B,gLAAgL;IAChL,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,YAAY,EAAE,GAAE,sBAA2B;;;;;EAQ/E;AAED,wBAAgB,gBAAgB,4DAE/B;AAED,MAAM,WAAW,wBAAwB;IACvC,eAAe,EAAE,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;CACxD;AAED,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,OAAO,CAAC,wBAAwB,CAAC,EAC7E,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,EACjC,IAAI,CAAC,EAAE,sBAAsB;YAEgB,IAAI,CAAC,CAAC,EAAE,MAAM,wBAAwB,CAAC;;EAOrF"}

package/build/types/label/Label.d.ts

@@ -6,23 +6,13 @@ export type LabelProps = {
     className?: string;
     children?: React.ReactNode;
 };
-/**
- * Avoid using `<Label>` component directly
- * it's for edge cases when `<Field />` isn't suitable for some reasons.
- *
- * Example:
- * ```
- * <Field label={..} description={..} required={..}>..</Field>
- * ```
- */
-declare const Label: {
-    ({ className, children, htmlFor, id }: LabelProps): import("react").JSX.Element;
-    Optional({ children, className }: LabelOptionalProps): import("react").JSX.Element;
-    Description({ id, children, className }: LabelDescriptionProps): import("react").JSX.Element | null;
-};
 export type LabelOptionalProps = PropsWithChildren<CommonProps>;
 export type LabelDescriptionProps = PropsWithChildren<CommonProps> & {
     id?: string;
 };
-export { Label };
+declare const LabelNamespace: import("react").ForwardRefExoticComponent<LabelProps & import("react").RefAttributes<HTMLLabelElement>> & {
+    Optional: ({ children, className }: LabelOptionalProps) => import("react").JSX.Element;
+    Description: ({ id, children, className }: LabelDescriptionProps) => import("react").JSX.Element | null;
+};
+export { LabelNamespace as Label };
 //# sourceMappingURL=Label.d.ts.map

package/build/types/label/Label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../src/label/Label.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF;;;;;;;;GAQG;AACH,QAAA,MAAM,KAAK;2CAA0C,UAAU;sCAkBH,kBAAkB;6CAeR,qBAAqB;CApB1F,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,CAAC,WAAW,CAAC,CAAC;AAehE,MAAM,MAAM,qBAAqB,GAAG,iBAAiB,CAAC,WAAW,CAAC,GAAG;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAWrF,OAAO,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../src/label/Label.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEtD,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AA+BF,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,CAAC,WAAW,CAAC,CAAC;AAchE,MAAM,MAAM,qBAAqB,GAAG,iBAAiB,CAAC,WAAW,CAAC,GAAG;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAWrF,QAAA,MAAM,cAAc;wCAvBwC,kBAAkB;+CAcR,qBAAqB;CASrB,CAAC;AAEvE,OAAO,EAAE,cAAc,IAAI,KAAK,EAAE,CAAC"}

package/build/types/listItem/Prompt/ListItemPrompt.d.ts

@@ -1,4 +1,4 @@
-import { type InlinePromptProps } from './InlinePrompt';
+import { type InlinePromptProps } from '../../prompt';
 export type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentiment' | 'muted'>;
 /**
  * This component allows for rendering an Inline Prompt. <br />

package/build/types/listItem/Prompt/ListItemPrompt.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemPrompt.d.ts","sourceRoot":"","sources":["../../../../src/listItem/Prompt/ListItemPrompt.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEtE,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,WAAW,GAAG,OAAO,CAAC,CAAC;AAE9F;;;;;GAKG;AACH,eAAO,MAAM,MAAM;8BAAiD,mBAAmB;;CActF,CAAC;AAGF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"ListItemPrompt.d.ts","sourceRoot":"","sources":["../../../../src/listItem/Prompt/ListItemPrompt.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEpE,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,WAAW,GAAG,OAAO,CAAC,CAAC;AAE9F;;;;;GAKG;AACH,eAAO,MAAM,MAAM;8BAAiD,mBAAmB;;CActF,CAAC;AAGF,eAAe,MAAM,CAAC"}

package/build/types/moneyInput/MoneyInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MoneyInput.d.ts","sourceRoot":"","sources":["../../../src/moneyInput/MoneyInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAc,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAE/D,OAAO,EAAoB,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAC/E,OAAO,EAAuB,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAEnF,OAAO,EAKL,gBAAgB,EACjB,MAAM,uBAAuB,CAAC;AAO/B,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,YAAY,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AA0CnE,MAAM,WAAW,eAAgB,SAAQ,qBAAqB;IAC5D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,EAAE,SAAS,YAAY,EAAE,CAAC;IACpC,gBAAgB,EAAE,kBAAkB,CAAC;IACrC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,eAAe,EAAE,YAAY,EAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3F,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;CAC7D;AAED,MAAM,MAAM,kCAAkC,GAAG,eAAe,GAC9D,OAAO,CAAC,wBAAwB,CAAC,CAAC;;;;;;;;AAgZpC,wBAA2F"}
+{"version":3,"file":"MoneyInput.d.ts","sourceRoot":"","sources":["../../../src/moneyInput/MoneyInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAc,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAE/D,OAAO,EAAoB,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAC/E,OAAO,EAAuB,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAEnF,OAAO,EAKL,gBAAgB,EACjB,MAAM,uBAAuB,CAAC;AAO/B,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,YAAY,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AA0CnE,MAAM,WAAW,eAAgB,SAAQ,qBAAqB;IAC5D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,EAAE,SAAS,YAAY,EAAE,CAAC;IACpC,gBAAgB,EAAE,kBAAkB,CAAC;IACrC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,eAAe,EAAE,YAAY,EAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3F,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;CAC7D;AAED,MAAM,MAAM,kCAAkC,GAAG,eAAe,GAC9D,OAAO,CAAC,wBAAwB,CAAC,CAAC;;;;;;;;AAiZpC,wBAA2F"}

package/build/types/phoneNumberInput/PhoneNumberInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneNumberInput.d.ts","sourceRoot":"","sources":["../../../src/phoneNumberInput/PhoneNumberInput.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAQ,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAEnE,OAAO,EAAyC,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAkBhG,MAAM,WAAW,qBAAqB;IACpC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACpD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;IACvD,8DAA8D;IAC9D,iBAAiB,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CACvC;AAKD,QAAA,MAAM,gBAAgB,GAAI,gMAevB,qBAAqB,gCA4LvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"PhoneNumberInput.d.ts","sourceRoot":"","sources":["../../../src/phoneNumberInput/PhoneNumberInput.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAQ,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAEnE,OAAO,EAAyC,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAkBhG,MAAM,WAAW,qBAAqB;IACpC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACpD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;IACvD,8DAA8D;IAC9D,iBAAiB,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CACvC;AAKD,QAAA,MAAM,gBAAgB,GAAI,gMAevB,qBAAqB,gCAiNvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/build/types/{listItem/Prompt → prompt}/InlinePrompt/InlinePrompt.d.ts

@@ -1,4 +1,4 @@
-import { Sentiment } from '../../../common';
+import { Sentiment } from '../../common';
 export type InlinePromptProps = {
     sentiment?: `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`;
     loading?: boolean;

package/build/types/prompt/InlinePrompt/InlinePrompt.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlinePrompt.d.ts","sourceRoot":"","sources":["../../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAOzC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,CAAC,EAAE,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO,EAAE,CAAC;IACjG,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,6DAO1B,iBAAiB,gCA4BnB,CAAC"}

package/build/types/prompt/InlinePrompt/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/prompt/InlinePrompt/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/build/types/prompt/index.d.ts

@@ -0,0 +1,3 @@
+export type { InlinePromptProps } from './InlinePrompt';
+export { InlinePrompt } from './InlinePrompt';
+//# sourceMappingURL=index.d.ts.map

package/build/types/prompt/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/prompt/index.ts"],"names":[],"mappings":"AAIA,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.111.0",
+  "version": "46.112.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/DisabledComponents.story.tsx

@@ -0,0 +1,156 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { Cross } from '@transferwise/icons';
+import { useState } from 'react';
+
+import Button from './button';
+import { Input } from './inputs/Input';
+import { SelectInput, SelectInputOptionContent } from './inputs/SelectInput';
+import DateInput from './dateInput';
+import PhoneNumberInput from './phoneNumberInput';
+import { Field } from './field/Field';
+import Checkbox from './checkbox';
+import Body from './body';
+import Header from './header';
+
+export default {
+  title: 'Forms/Disabled Forms',
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta;
+
+type Story = StoryObj;
+
+export const Disabled: Story = {
+  render: () => <DisabledFormShowcaseComponent />,
+  tags: ['!autodocs'],
+};
+
+function DisabledFormShowcaseComponent() {
+  const [selectValue, setSelectValue] = useState<string | undefined>('United Kingdom');
+  const [dateValue, setDateValue] = useState<string | null>('11/09/1990');
+  const [checkboxValue, setCheckboxValue] = useState(false);
+
+  const countryOptions = [{ value: 'United Kingdom', label: 'United Kingdom' }];
+
+  return (
+    <div>
+      {/* Country of residence */}
+      <div style={{ marginBottom: '32px' }}>
+        <Field label="Country of residence">
+          <SelectInput
+            disabled
+            value={selectValue}
+            placeholder="Select country"
+            items={countryOptions.map((option) => ({
+              type: 'option' as const,
+              value: option.value,
+            }))}
+            renderValue={(value) => <SelectInputOptionContent title={value} />}
+            onChange={setSelectValue}
+          />
+        </Field>
+      </div>
+
+      {/* Personal details section */}
+      <Body style={{ marginBottom: '16px', fontWeight: '600', fontSize: '18px' }}>
+        Personal details
+      </Body>
+
+      {/* Full legal first and middle name(s) */}
+      <div style={{ marginBottom: '24px' }}>
+        <Field label="Full legal first and middle name(s)">
+          <Input disabled defaultValue="Mickey" placeholder="Enter your first and middle names" />
+        </Field>
+      </div>
+
+      {/* Full legal last name(s) */}
+      <div style={{ marginBottom: '24px' }}>
+        <Field label="Full legal last name(s)">
+          <Input disabled defaultValue="Mantle" placeholder="Enter your last name" />
+        </Field>
+      </div>
+
+      {/* Preferred name (optional) */}
+      <div style={{ marginBottom: '24px' }}>
+        <Field
+          label="Preferred name (optional)"
+          description="This is how we'll address you in emails and notifications"
+        >
+          <Input disabled placeholder="Enter your preferred name" />
+        </Field>
+      </div>
+
+      {/* Date of birth */}
+      <div style={{ marginBottom: '24px' }}>
+        <Field label="Date of birth">
+          <DateInput
+            disabled
+            value={dateValue || undefined}
+            placeholders={{
+              day: '11',
+              // month: 'September',
+              // year: '1990',
+            }}
+            onChange={setDateValue}
+          />
+        </Field>
+      </div>
+
+      {/* Dynamic flow input */}
+      <div className="np-field-control" style={{ marginBottom: '32px' }}>
+        <fieldset className="np-input-group">
+          <Input disabled value="Fercus" />
+        </fieldset>
+      </div>
+
+      {/* Phone number */}
+      <div style={{ marginBottom: '32px' }}>
+        <Field label="Phone number">
+          <PhoneNumberInput
+            disabled
+            initialValue="+4407891300098"
+            countryCode="GB"
+            onChange={() => {}}
+          />
+        </Field>
+      </div>
+
+      {/* Additional components */}
+      <div
+        style={{
+          borderTop: '1px solid #e5e7eb',
+          paddingTop: '32px',
+          marginTop: '32px',
+        }}
+      >
+        <Body style={{ marginBottom: '16px', fontWeight: '600', fontSize: '18px' }}>
+          Additional Components
+        </Body>
+
+        {/* Naked Inputs (without Field wrapper) */}
+        <div style={{ marginBottom: '24px' }}>
+          <Body style={{ marginBottom: '12px', fontWeight: '500', fontSize: '16px' }}>
+            Naked Inputs (without Field wrapper)
+          </Body>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+            <Input disabled placeholder="Disabled input with placeholder" />
+            <Input disabled defaultValue="Disabled input with default value" />
+            <Input disabled type="email" placeholder="email@example.com" />
+            <Input disabled type="password" placeholder="Password input" />
+          </div>
+        </div>
+
+        {/* Checkbox */}
+        <div style={{ marginBottom: '24px' }}>
+          <Checkbox
+            disabled
+            checked={checkboxValue}
+            label="I agree to the terms and conditions"
+            onChange={(checked) => setCheckboxValue(checked)}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/avatarLayout/AvatarLayout.tsx

@@ -4,7 +4,7 @@ import { useDirection } from '../common/hooks';
 
 type SingleAvatarType = { asset?: AvatarViewProps['children'] } & Omit<
   AvatarViewProps,
-  'notification' | 'selected' | 'size' | 'badge' | 'children' | 'interactive'
+  'selected' | 'size' | 'badge' | 'children' | 'interactive'
 >;
 
 export type Props = {

package/src/avatarView/AvatarView.css

@@ -1,23 +1,29 @@
-.np-notification-dot {
-  --np-notification-dot-size: 14px;
+.np-dot {
+  --np-dot-size: 14px;
   position: relative;
   display: inline-block;
 }
-.np-notification-dot-mask {
-  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-notification-dot-size) / 2)) left calc(100% - (var(--np-notification-dot-size) / 2)), transparent 0, transparent calc(var(--np-notification-dot-size) / 2 + var(--np-notification-dot-offset)), black 0);
-          mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-notification-dot-size) / 2)) left calc(100% - (var(--np-notification-dot-size) / 2)), transparent 0, transparent calc(var(--np-notification-dot-size) / 2 + var(--np-notification-dot-offset)), black 0);
-  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-notification-dot-size) / 2)) left calc(100% - calc(var(--np-notification-dot-size) / 2)), transparent 0, transparent calc(var(--np-notification-dot-size) / 2 + var(--np-notification-dot-offset)), black 0);
-          mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-notification-dot-size) / 2)) left calc(100% - calc(var(--np-notification-dot-size) / 2)), transparent 0, transparent calc(var(--np-notification-dot-size) / 2 + var(--np-notification-dot-offset)), black 0);
+.np-dot-mask {
+  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
+          mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
+  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
+          mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
 }
-.np-notification-dot-badge {
+.np-dot-badge {
   position: absolute;
-  width: var(--np-notification-dot-size);
-  height: var(--np-notification-dot-size);
-  background-color: var(--color-sentiment-negative);
+  width: var(--np-dot-size);
+  height: var(--np-dot-size);
   border-radius: 9999px;
   border-radius: var(--radius-full);
   right: 0;
 }
+.np-dot-badge-notification {
+  background-color: var(--color-sentiment-negative);
+}
+.np-dot-badge-online {
+  background-color: #00a2dd;
+  background-color: var(--color-interactive-accent);
+}
 .np-avatar-view .np-avatar-view-content {
   color: #37517e;
   color: var(--color-content-primary);

package/src/avatarView/AvatarView.less

@@ -1,4 +1,4 @@
-@import './NotificationDot.less';
+@import './Dot.less';
 
 .np-avatar-view {
   .np-avatar-view-content {

package/src/avatarView/AvatarView.story.tsx

@@ -67,42 +67,6 @@ export const Selected: Story = {
   },
 };
 
-export const Notification: Story = {
-  render: () => (
-    <div
-      style={{
-        gap: '1em',
-        display: 'grid',
-        justifyContent: 'space-between',
-        gridTemplate: `auto auto / repeat(${sizes.length}, min-content)`,
-      }}
-    >
-      {sizes.map((size) => (
-        <Body type="body-large-bold">{size}</Body>
-      ))}
-      {sizes.map((size) => (
-        <AvatarView key={size} size={size} notification>
-          <Freeze />
-        </AvatarView>
-      ))}
-      {sizes.map((size) => (
-        <AvatarView key={size} size={size} notification interactive>
-          <Freeze />
-        </AvatarView>
-      ))}
-      {sizes.map((size) => (
-        <AvatarView
-          key={size}
-          size={size}
-          imgSrc="../avatar-rectangle-fox.webp"
-          notification
-          interactive
-        />
-      ))}
-    </div>
-  ),
-};
-
 export const Badge: Story = {
   render: () => {
     const currencies = ['USD', 'EUR', 'GBP', 'AUD', 'CAD', 'JPY', 'CNY'];
@@ -219,6 +183,7 @@ export const Badge: Story = {
             badge={{ icon: <Convert /> }}
           />
         ))}
+
         {sizes.map((size) => (
           <AvatarView
             key={size}
@@ -241,11 +206,102 @@ export const Badge: Story = {
             }}
           />
         ))}
+
+        {sizes.map((size) => (
+          <AvatarView
+            key={size}
+            size={size}
+            imgSrc="../avatar-square-dude.webp"
+            badge={{ type: 'notification' }}
+          />
+        ))}
+
+        {sizes.map((size) => (
+          <AvatarView
+            key={size}
+            size={size}
+            imgSrc="../avatar-square-dude.webp"
+            badge={{ type: 'online' }}
+          />
+        ))}
       </div>
     );
   },
 };
 
+export const Notification: Story = {
+  render: () => (
+    <div
+      style={{
+        gap: '1em',
+        display: 'grid',
+        justifyContent: 'space-between',
+        gridTemplate: `auto auto / repeat(${sizes.length}, min-content)`,
+      }}
+    >
+      {sizes.map((size) => (
+        <Body type="body-large-bold">{size}</Body>
+      ))}
+      {sizes.map((size) => (
+        <AvatarView key={size} size={size} badge={{ type: 'notification' }}>
+          <Freeze />
+        </AvatarView>
+      ))}
+      {sizes.map((size) => (
+        <AvatarView key={size} size={size} badge={{ type: 'notification' }} interactive>
+          <Freeze />
+        </AvatarView>
+      ))}
+      {sizes.map((size) => (
+        <AvatarView
+          key={size}
+          size={size}
+          imgSrc="../avatar-rectangle-fox.webp"
+          badge={{ type: 'notification' }}
+          interactive
+        />
+      ))}
+    </div>
+  ),
+};
+
+export const Online: Story = {
+  tags: ['new'],
+  render: () => (
+    <div
+      style={{
+        gap: '1em',
+        display: 'grid',
+        justifyContent: 'space-between',
+        gridTemplate: `auto auto / repeat(${sizes.length}, min-content)`,
+      }}
+    >
+      {sizes.map((size) => (
+        <Body type="body-large-bold">{size}</Body>
+      ))}
+      {sizes.map((size) => (
+        <AvatarView key={size} size={size} badge={{ type: 'online' }}>
+          <Freeze />
+        </AvatarView>
+      ))}
+      {sizes.map((size) => (
+        <AvatarView key={size} size={size} badge={{ type: 'online' }} interactive>
+          <Freeze />
+        </AvatarView>
+      ))}
+      {sizes.map((size) => (
+        <AvatarView
+          key={size}
+          size={size}
+          imgSrc="../avatar-rectangle-fox.webp"
+          badge={{ type: 'online' }}
+          interactive
+        />
+      ))}
+    </div>
+  ),
+};
+
 export const Images: Story = {
   render: () => {
     return (

package/src/avatarView/AvatarView.tsx

@@ -1,5 +1,5 @@
 import Badge, { BadgeAssets, BadgeProps, BadgeAssetsProps } from '../badge';
-import NotificationDot from './NotificationDot';
+import Dot, { DotProps } from './Dot';
 import Circle from '../common/circle';
 import Image from '../image';
 import { HTMLAttributes, PropsWithChildren, useState } from 'react';
@@ -26,7 +26,6 @@ export type Props = {
   profileName?: string | null;
   profileType?: ProfileTypeBusiness | ProfileTypePersonal;
   size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;
-  notification?: boolean;
   badge?: AvatarViewBadgeProps;
   interactive?: boolean;
   selected?: boolean;
@@ -40,7 +39,6 @@ function AvatarView({
   children = undefined,
   size = 48,
   selected,
-  notification,
   badge,
   interactive = false,
   className,
@@ -62,7 +60,7 @@ function AvatarView({
       )}
       {...restProps}
     >
-      <Badges avatar={{ size, notification, selected }} {...badge}>
+      <Badges avatar={{ size, selected }} {...badge}>
         <Circle
           size={size}
           fixedSize
@@ -115,7 +113,7 @@ const MAP_BADGE_POSITION = {
 
 type BadgesProps = AvatarViewBadgeProps &
   PropsWithChildren<{
-    avatar: Pick<Props, 'selected' | 'size' | 'notification'>;
+    avatar: Pick<Props, 'selected' | 'size'>;
   }>;
 
 /**
@@ -128,36 +126,43 @@ function Badges({
   asset: customBadge,
   ...badgeAssets
 }: BadgesProps) {
-  const { size = 48, selected, notification } = avatar;
+  const { size = 48, selected } = avatar;
   const anyBadge = Object.values({ customBadge, ...badgeAssets }).filter(Boolean).length > 0;
-  if ((anyBadge || selected) && size > 16) {
-    const badgeSize: BadgeAssetsProps['size'] = MAP_BADGE_ASSET_SIZE[size];
+
+  if ((!anyBadge && !selected) || size <= 16) {
+    return children;
+  }
+
+  if (badgeAssets.type === 'notification' || badgeAssets.type === 'online') {
     return (
-      <Badge
-        aria-label={ariaLabel}
-        size={badgeSize}
-        badge={
-          customBadge ? (
-            <Circle fixedSize size={badgeSize}>
-              {customBadge}
-            </Circle>
-          ) : (
-            <BadgeAssets {...(selected ? { status: 'positive' } : badgeAssets)} size={badgeSize} />
-          )
-        }
-        style={{
-          // @ts-expect-error CSS custom props allowed
-          '--badge-content-position': `${MAP_BADGE_POSITION[size] ?? 0}px`,
-        }}
-      >
+      <Dot avatarSize={size} variant={badgeAssets.type === 'online' ? 'online' : 'notification'}>
         {children}
-      </Badge>
+      </Dot>
     );
   }
-  if (notification) {
-    return <NotificationDot avatarSize={size}>{children}</NotificationDot>;
-  }
-  return children;
+
+  const badgeSize: BadgeAssetsProps['size'] = MAP_BADGE_ASSET_SIZE[size];
+  return (
+    <Badge
+      aria-label={ariaLabel}
+      size={badgeSize}
+      badge={
+        customBadge ? (
+          <Circle fixedSize size={badgeSize}>
+            {customBadge}
+          </Circle>
+        ) : (
+          <BadgeAssets {...(selected ? { status: 'positive' } : badgeAssets)} size={badgeSize} />
+        )
+      }
+      style={{
+        // @ts-expect-error CSS custom props allowed
+        '--badge-content-position': `${MAP_BADGE_POSITION[size] ?? 0}px`,
+      }}
+    >
+      {children}
+    </Badge>
+  );
 }
 
 function AvatarViewContent({

package/src/avatarView/Dot.css

@@ -0,0 +1,26 @@
+.np-dot {
+  --np-dot-size: 14px;
+  position: relative;
+  display: inline-block;
+}
+.np-dot-mask {
+  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
+          mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
+  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
+          mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
+}
+.np-dot-badge {
+  position: absolute;
+  width: var(--np-dot-size);
+  height: var(--np-dot-size);
+  border-radius: 9999px;
+  border-radius: var(--radius-full);
+  right: 0;
+}
+.np-dot-badge-notification {
+  background-color: var(--color-sentiment-negative);
+}
+.np-dot-badge-online {
+  background-color: #00a2dd;
+  background-color: var(--color-interactive-accent);
+}

package/src/avatarView/Dot.less

@@ -0,0 +1,31 @@
+.np-dot {
+  --np-dot-size: 14px;
+  position: relative;
+  display: inline-block;
+
+  &-mask {
+    mask-image: radial-gradient(
+        circle at bottom calc(100% - calc(var(--np-dot-size) / 2))
+                  left calc(100% - calc(var(--np-dot-size) / 2)),
+        transparent 0,
+        transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)),
+        black 0
+    );
+  }
+
+  &-badge {
+    position: absolute;
+    width: var(--np-dot-size);
+    height: var(--np-dot-size);
+    border-radius: var(--radius-full);
+    right: 0;
+    
+    &-notification {
+      background-color: var(--color-sentiment-negative);
+    }
+
+    &-online {
+      background-color: var(--color-interactive-accent);
+    }
+  }
+}