@transferwise/components 46.57.1 → 46.58.1

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

@@ -1,5 +1,5 @@
 import { WrappedComponentProps } from 'react-intl';
-import { SizeLarge, SizeMedium, SizeSmall } from '../common/propsValues/size';
+import { SizeLarge, SizeMedium, SizeSmall } from '../common';
 import { WithInputAttributesProps } from '../inputs/contexts';
 import { SelectInputProps } from '../inputs/SelectInput';
 export interface CurrencyOptionItem {
@@ -39,8 +39,12 @@ export interface MoneyInputProps extends WrappedComponentProps {
     selectProps?: Partial<SelectInputProps<CurrencyOptionItem>>;
 }
 type MoneyInputPropsWithInputAttributes = MoneyInputProps & Partial<WithInputAttributesProps>;
-declare const _default: import("react").FC<import("react-intl").WithIntlProps<Omit<MoneyInputPropsWithInputAttributes, "inputAttributes">>> & {
-    WrappedComponent: import("react").ComponentType<Omit<MoneyInputPropsWithInputAttributes, "inputAttributes">>;
+declare const _default: import("react").FC<import("react-intl").WithIntlProps<Omit<MoneyInputPropsWithInputAttributes, "inputAttributes"> & {
+    id?: string;
+}>> & {
+    WrappedComponent: import("react").ComponentType<Omit<MoneyInputPropsWithInputAttributes, "inputAttributes"> & {
+        id?: string;
+    }>;
 };
 export default _default;
 //# sourceMappingURL=MoneyInput.d.ts.map

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;AAG/D,OAAO,EAAQ,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACpF,OAAO,EAAuB,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAEnF,OAAO,EAKL,gBAAgB,EACjB,MAAM,uBAAuB,CAAC;AAM/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,KAAK,kCAAkC,GAAG,eAAe,GAAG,OAAO,CAAC,wBAAwB,CAAC,CAAC;;;;AAuY9F,wBAAmF"}
+{"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,KAAK,kCAAkC,GAAG,eAAe,GAAG,OAAO,CAAC,wBAAwB,CAAC,CAAC;;;;;;;;AA0Y9F,wBAA2F"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/withId/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACnC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC"}

package/build/types/withId/story/source.d.ts

@@ -0,0 +1,2 @@
+export declare const withIdSource = "\nimport { withId, Button, type WithIdProps } from '@transferwise/components';\n\ntype DescribedButtonProps = { id?: string };\ntype DescribedButtonWithIdProps = WithIdProps<DescribedButtonProps>;\n\nfunction DescribedButton({ id }: DescribedButtonWithIdProps) {\n  return (\n    <>\n      <Button aria-describedby={id}>Continue</Button>\n\n      <p id={id} className=\"text-xs-center m-t-2\">\n        Enter an amount in either GBP or PLN\n        <br />\n        This paragraph has id of <code>{id}</code>\n      </p>\n    </>\n  );\n}\n\nexport default withId<DescribedButtonProps>(DescribedButton);\n";
+//# sourceMappingURL=source.d.ts.map

package/build/types/withId/story/source.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"source.d.ts","sourceRoot":"","sources":["../../../../src/withId/story/source.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,imBAqBxB,CAAC"}

package/build/types/withId/withId.d.ts

@@ -0,0 +1,17 @@
+import { ComponentType } from 'react';
+type ChildProps<Props> = Props & {
+    id?: string;
+};
+export type WithIdProps<Props> = Props & {
+    id: string;
+};
+/**
+ * @internal
+ * @param {ReactNode} WrappedComponent
+ */
+export default function withId<Props extends object>(WrappedComponent: ComponentType<WithIdProps<Props>>): {
+    (props: ChildProps<Props>): import("react").JSX.Element;
+    displayName: string;
+};
+export {};
+//# sourceMappingURL=withId.d.ts.map

package/build/types/withId/withId.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"withId.d.ts","sourceRoot":"","sources":["../../../src/withId/withId.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,aAAa,EAAE,MAAM,OAAO,CAAC;AAE7C,KAAK,UAAU,CAAC,KAAK,IAAI,KAAK,GAAG;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,WAAW,CAAC,KAAK,IAAI,KAAK,GAAG;IACvC,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,SAAS,MAAM,EACjD,gBAAgB,EAAE,aAAa,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;YAEnB,UAAU,CAAC,KAAK,CAAC;;EASlD"}

package/build/withId/withId.js

@@ -0,0 +1,19 @@
+'use strict';
+
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function withId(WrappedComponent) {
+  function WithIdComponent(props) {
+    const id = React.useId();
+    return /*#__PURE__*/jsxRuntime.jsx(WrappedComponent, {
+      ...props,
+      id: props.id || id
+    });
+  }
+  WithIdComponent.displayName = `withId(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;
+  return WithIdComponent;
+}
+
+module.exports = withId;
+//# sourceMappingURL=withId.js.map

package/build/withId/withId.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"withId.js","sources":["../../src/withId/withId.tsx"],"sourcesContent":["import { useId, ComponentType } from 'react';\n\ntype ChildProps<Props> = Props & {\n  id?: string;\n};\n\nexport type WithIdProps<Props> = Props & {\n  id: string;\n};\n\n/**\n * @internal\n * @param {ReactNode} WrappedComponent\n */\nexport default function withId<Props extends object>(\n  WrappedComponent: ComponentType<WithIdProps<Props>>,\n) {\n  function WithIdComponent(props: ChildProps<Props>) {\n    const id = useId();\n\n    return <WrappedComponent {...props} id={props.id || id} />;\n  }\n\n  WithIdComponent.displayName = `withId(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;\n\n  return WithIdComponent;\n}\n"],"names":["withId","WrappedComponent","WithIdComponent","props","id","useId","_jsx","displayName","name"],"mappings":";;;;;AAcwB,SAAAA,MAAMA,CAC5BC,gBAAmD,EAAA;EAEnD,SAASC,eAAeA,CAACC,KAAwB,EAAA;AAC/C,IAAA,MAAMC,EAAE,GAAGC,WAAK,EAAE,CAAA;IAElB,oBAAOC,cAAA,CAACL,gBAAgB,EAAA;AAAA,MAAA,GAAKE,KAAK;AAAEC,MAAAA,EAAE,EAAED,KAAK,CAACC,EAAE,IAAIA,EAAAA;AAAG,MAAG,CAAA;AAC5D,GAAA;AAEAF,EAAAA,eAAe,CAACK,WAAW,GAAG,CAAA,OAAA,EAAUN,gBAAgB,CAACM,WAAW,IAAIN,gBAAgB,CAACO,IAAI,IAAI,WAAW,CAAG,CAAA,CAAA,CAAA;AAE/G,EAAA,OAAON,eAAe,CAAA;AACxB;;;;"}

package/build/withId/withId.mjs

@@ -0,0 +1,17 @@
+import { useId } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+function withId(WrappedComponent) {
+  function WithIdComponent(props) {
+    const id = useId();
+    return /*#__PURE__*/jsx(WrappedComponent, {
+      ...props,
+      id: props.id || id
+    });
+  }
+  WithIdComponent.displayName = `withId(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;
+  return WithIdComponent;
+}
+
+export { withId as default };
+//# sourceMappingURL=withId.mjs.map

package/build/withId/withId.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"withId.mjs","sources":["../../src/withId/withId.tsx"],"sourcesContent":["import { useId, ComponentType } from 'react';\n\ntype ChildProps<Props> = Props & {\n  id?: string;\n};\n\nexport type WithIdProps<Props> = Props & {\n  id: string;\n};\n\n/**\n * @internal\n * @param {ReactNode} WrappedComponent\n */\nexport default function withId<Props extends object>(\n  WrappedComponent: ComponentType<WithIdProps<Props>>,\n) {\n  function WithIdComponent(props: ChildProps<Props>) {\n    const id = useId();\n\n    return <WrappedComponent {...props} id={props.id || id} />;\n  }\n\n  WithIdComponent.displayName = `withId(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;\n\n  return WithIdComponent;\n}\n"],"names":["withId","WrappedComponent","WithIdComponent","props","id","useId","_jsx","displayName","name"],"mappings":";;;AAcwB,SAAAA,MAAMA,CAC5BC,gBAAmD,EAAA;EAEnD,SAASC,eAAeA,CAACC,KAAwB,EAAA;AAC/C,IAAA,MAAMC,EAAE,GAAGC,KAAK,EAAE,CAAA;IAElB,oBAAOC,GAAA,CAACL,gBAAgB,EAAA;AAAA,MAAA,GAAKE,KAAK;AAAEC,MAAAA,EAAE,EAAED,KAAK,CAACC,EAAE,IAAIA,EAAAA;AAAG,MAAG,CAAA;AAC5D,GAAA;AAEAF,EAAAA,eAAe,CAACK,WAAW,GAAG,CAAA,OAAA,EAAUN,gBAAgB,CAACM,WAAW,IAAIN,gBAAgB,CAACO,IAAI,IAAI,WAAW,CAAG,CAAA,CAAA,CAAA;AAE/G,EAAA,OAAON,eAAe,CAAA;AACxB;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.57.1",
+  "version": "46.58.1",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -93,8 +93,8 @@
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
     "@transferwise/less-config": "3.1.0",
-    "@wise/components-theming": "1.6.0",
-    "@transferwise/neptune-css": "14.13.2"
+    "@transferwise/neptune-css": "14.13.4",
+    "@wise/components-theming": "1.6.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",

package/src/i18n/tr.json

@@ -18,7 +18,7 @@
   "neptune.DateLookup.year": "yıl",
   "neptune.FlowNavigation.back": "önceki adıma dön",
   "neptune.Info.ariaLabel": "Daha fazla bilgi",
-  "neptune.Label.optional": "(Isteğe bağlı)",
+  "neptune.Label.optional": "(İsteğe bağlı)",
   "neptune.Link.opensInNewTab": "(yeni sekmede açılır)",
   "neptune.MoneyInput.Select.placeholder": "Bir seçenek seçin...",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Bir seçenek seçin...",

package/src/index.ts

@@ -89,6 +89,7 @@ export type { TooltipProps } from './tooltip';
 export type { TypeaheadOption, TypeaheadProps } from './typeahead';
 export type { UploadProps } from './upload';
 export type { UploadError, UploadResponse, UploadedFile } from './uploadInput/types';
+export type { WithIdProps } from './withId';
 
 /**
  * Components
@@ -244,3 +245,8 @@ export {
  * Translations
  */
 export { default as translations } from './i18n';
+
+/**
+ * HoCs
+ */
+export { default as withId } from './withId';

package/src/inlineAlert/InlineAlert.story.tsx

@@ -1,10 +1,8 @@
-import { select, text } from '@storybook/addon-knobs';
 import { Meta } from '@storybook/react';
 
-import { Sentiment } from '../common';
-
 import InlineAlert, { InlineAlertProps } from './InlineAlert';
-import { lorem40 } from '../test-utils';
+import { lorem10, lorem40 } from '../test-utils';
+import Link from '../link';
 
 export default {
   component: InlineAlert,
@@ -12,23 +10,6 @@ export default {
 } as Meta<InlineAlertProps>;
 
 export const Basic = () => {
-  const type = select(
-    'type',
-    [
-      Sentiment.POSITIVE,
-      Sentiment.NEGATIVE,
-      Sentiment.NEUTRAL,
-      Sentiment.WARNING,
-      Sentiment.PENDING,
-      Sentiment.ERROR,
-      Sentiment.INFO,
-      Sentiment.SUCCESS,
-    ],
-    Sentiment.WARNING,
-  );
-
-  const message = text('message', 'Please enter a password over 5 characters');
-
   return (
     <>
       <p>
@@ -36,8 +17,14 @@ export const Basic = () => {
         control validation, info messaging please use <code>Field</code> component
         <pre>{'<Field sentiment={..} message={..}>'}</pre>
       </p>
-      <InlineAlert type={type}>{message}</InlineAlert>
-      <InlineAlert type="negative">{message}</InlineAlert>
+      <InlineAlert type="neutral">
+        You have <Link href="#">20.22 EUR</Link> available in <strong>My savings</strong>
+      </InlineAlert>
+      <InlineAlert type="warning">
+        You have <Link href="#">20.22 EUR</Link> available in <strong>My savings</strong>
+      </InlineAlert>
+      <InlineAlert type="warning">{lorem10}</InlineAlert>
+      <InlineAlert type="negative">{lorem10}</InlineAlert>
       <InlineAlert type="positive">{lorem40}</InlineAlert>
     </>
   );

package/src/inlineAlert/InlineAlert.tsx

@@ -47,7 +47,7 @@ export default function InlineAlert({
       )}
     >
       {iconTypes.has(type) && <StatusIcon sentiment={type} size={Size.SMALL} />}
-      {children}
+      <div>{children}</div>
     </Body>
   );
 }

package/src/moneyInput/MoneyInput.spec.js

@@ -1,4 +1,5 @@
 import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 import { MoneyInput, Title, Input, SelectInput } from '..';
 import { mockMatchMedia, mockResizeObserver } from '../test-utils';
@@ -87,7 +88,9 @@ describe('Money Input', () => {
       onAmountChange: jest.fn(),
       onCurrencyChange: jest.fn(),
     };
-    component = shallow(<MoneyInput {...props} />).dive();
+    component = shallow(<MoneyInput {...props} />)
+      .dive()
+      .dive();
     jest.clearAllMocks();
   });
 
@@ -207,10 +210,10 @@ describe('Money Input', () => {
     ]);
   });
 
-  it('renders Select component with undefined id when id is not provided', () => {
+  it('renders Select component with generated id when id is not provided', () => {
     const select = component.find('SelectInput');
 
-    expect(select.prop('id')).toBeUndefined();
+    expect(select.prop('id')).toBeTruthy();
   });
 
   it('shows the currently active currency as active and hides its note', () => {
@@ -570,9 +573,7 @@ describe('Money Input', () => {
   );
 
   it('passes the id given to the input element', () => {
-    expect(amountInput().prop('id')).toBeUndefined();
     component.setProps({ id: 'some-id' });
-
     expect(amountInput().prop('id')).toBe('some-id');
   });
 
@@ -804,7 +805,9 @@ describe('Money Input', () => {
           }}
           {...props}
         />,
-      ).dive();
+      )
+        .dive()
+        .dive();
     });
 
     it('renders Select component with expected props', () => {
@@ -815,4 +818,14 @@ describe('Money Input', () => {
       });
     });
   });
+
+  describe('withId', () => {
+    it('should guarantee id and connect the input with the selected currency', () => {
+      render(<MoneyInput {...props} />);
+      const input = screen.getByRole('textbox');
+      const button = screen.getByRole('combobox');
+      expect(input.getAttribute('id')).toBeTruthy();
+      expect(input).toHaveAttribute('aria-describedby', button.getAttribute('id'));
+    });
+  });
 });

package/src/moneyInput/MoneyInput.story.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { expect, within, userEvent } from '@storybook/test';
+import { within, userEvent } from '@storybook/test';
 import { Lock } from '@transferwise/icons';
 import { useState } from 'react';
 
@@ -9,14 +9,13 @@ import { Field } from '../field/Field';
 export default {
   component: MoneyInput,
   title: 'Forms/MoneyInput',
-  render: (args) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
+  render: function Render(args) {
     const [selectedCurrency, setSelectedCurrency] = useState(args.selectedCurrency);
 
     const handleOnCurrencyChange = (value: CurrencyOptionItem) => setSelectedCurrency(value);
 
     return (
-      <Field id={args.id} label="Editable money input label" required>
+      <Field label="Editable money input label" required>
         <MoneyInput
           {...args}
           selectedCurrency={selectedCurrency}
@@ -26,8 +25,8 @@ export default {
     );
   },
   args: {
-    id: 'money-input',
     amount: 1000,
+    id: 'moneyInput',
     onAmountChange: () => {},
     onCurrencyChange: () => {},
   },
@@ -61,28 +60,28 @@ const exampleCurrency = {
   hkd: {
     value: 'HKD',
     label: 'HKD',
-    note: 'Hong Kong',
+    note: 'Hong Kong dollar',
     currency: 'hkd',
     searchable: 'Hong Kong, Saudi Arabia',
   },
   aud: {
     value: 'AUD',
     label: 'AUD',
-    note: 'Australia',
+    note: 'Australian dollar',
     currency: 'aud',
     searchable: 'Kenguru',
   },
   cny: {
     value: 'CNY',
     label: 'CNY',
-    note: 'China',
+    note: 'Chinese yuan',
     currency: 'cny',
     searchable: 'China',
   },
   jpy: {
     value: 'JPY',
     label: 'JPY',
-    note: 'Japan',
+    note: 'Japanese yen',
     currency: 'jpy',
     searchable: 'Japan',
   },

package/src/moneyInput/MoneyInput.tsx

@@ -4,8 +4,7 @@ import { clsx } from 'clsx';
 import { Component } from 'react';
 import { injectIntl, WrappedComponentProps } from 'react-intl';
 
-import { Typography } from '../common';
-import { Size, SizeLarge, SizeMedium, SizeSmall } from '../common/propsValues/size';
+import { Typography, Size, SizeLarge, SizeMedium, SizeSmall } from '../common';
 import { withInputAttributes, WithInputAttributesProps } from '../inputs/contexts';
 import { Input } from '../inputs/Input';
 import {
@@ -19,6 +18,7 @@ import Title from '../title';
 
 import messages from './MoneyInput.messages';
 import { formatAmount, parseAmount } from './currencyFormatting';
+import withId from '../withId';
 
 export interface CurrencyOptionItem {
   header?: never;
@@ -288,7 +288,6 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
       selectProps,
     } = this.props;
     const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes?.['aria-labelledby'];
-
     const selectOptions = this.getSelectOptions();
 
     const hasSingleCurrency = () => {
@@ -314,8 +313,9 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
     };
 
     const isFixedCurrency = (!this.state.searchQuery && hasSingleCurrency()) || !onCurrencyChange;
-
     const disabled = !this.props.onAmountChange;
+    const selectedCurrencyElementId = `${amountInputId}SelectedCurrency`;
+
     return (
       <div
         role="group"
@@ -338,6 +338,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
             locale: this.state.locale,
           })}
           autoComplete="off"
+          aria-describedby={selectedCurrencyElementId}
           onKeyDown={this.handleKeyDown}
           onChange={this.onAmountChange}
           onFocus={this.onAmountFocus}
@@ -363,6 +364,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
               this.style('tw-money-input__fixed-currency'),
               disabled ? this.style('disabled') : '',
             )}
+            id={selectedCurrencyElementId}
           >
             {(size === 'lg' || size === 'md') && (
               <span className={clsx(this.style('money-input-currency-flag'), this.style('m-r-2'))}>
@@ -385,6 +387,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
             )}
           >
             <SelectInput
+              id={selectedCurrencyElementId}
               items={selectOptions}
               value={selectedCurrency}
               compareValues="currency"
@@ -488,4 +491,4 @@ function sortOptionsLabelsToFirst(options: readonly CurrencyOptionItem[], query:
   });
 }
 
-export default injectIntl(withInputAttributes(MoneyInput, { nonLabelable: true }));
+export default injectIntl(withId(withInputAttributes(MoneyInput, { nonLabelable: true })));

package/src/radioGroup/RadioGroup.story.tsx

@@ -1,81 +1,82 @@
-import { action } from '@storybook/addon-actions';
-import { boolean } from '@storybook/addon-knobs';
 import { Flag } from '@wise/art';
 
 import Avatar, { AvatarType } from '../avatar';
 
-import RadioGroup from './RadioGroup';
+import RadioGroup, { RadioGroupProps, RadioGroupRadio } from './RadioGroup';
 import { Field } from '../field/Field';
+import { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { useState } from 'react';
 
-export default {
+const meta = {
   component: RadioGroup,
   title: 'Forms/RadioGroup',
-};
+} satisfies Meta<typeof RadioGroup>;
 
-export const Basic = () => {
-  const showAvatars = boolean('avatar', false);
-  const hasError = boolean('hasError', false);
+export default meta;
+type Story<T extends string | number = string> = StoryObj<RadioGroupProps<T>>;
 
-  const avatar = showAvatars ? (
-    <Avatar type={AvatarType.THUMBNAIL}>
-      <Flag code="NZD" />
-    </Avatar>
-  ) : undefined;
+export const Basic = {
+  args: {
+    selectedValue: 'radio-2',
+    name: 'radio-group',
+    radios: [
+      {
+        value: 'radio-1',
+        label: 'Radio1',
+        secondary: 'Secondary line 1',
+        disabled: false,
+      },
+      {
+        value: 'radio-2',
+        label: 'Radio2',
+        disabled: false,
+      },
+      {
+        value: 'radio-3',
+        label: 'Radio3',
+        secondary: 'Secondary line 3',
+        disabled: true,
+      },
+    ],
+    onChange: fn(),
+  },
+} satisfies Story;
 
-  return (
-    <div className={`form-group  ${hasError ? 'has-error' : ''}`}>
-      <RadioGroup
-        selectedValue="radio-2"
-        name="radio-group"
-        radios={[
-          {
-            value: 'radio-1',
-            label: 'Radio1',
-            secondary: 'Secondary line 1',
-            disabled: false,
-            avatar,
-          },
-          {
-            value: 'radio-2',
-            label: 'Radio2',
-            disabled: false,
-            avatar,
-          },
-          {
-            value: 'radio-3',
-            label: 'Radio3',
-            secondary: 'Secondary line 3',
-            disabled: true,
-            avatar,
-          },
-        ]}
-        onChange={(v) => action(v)}
-      />
-    </div>
-  );
-};
+export const WithAvatars = {
+  ...Basic,
+  args: {
+    ...Basic.args,
+    radios: Basic.args.radios.map(
+      (radio) =>
+        ({
+          ...radio,
+          avatar: (
+            <Avatar type={AvatarType.THUMBNAIL}>
+              <Flag code="NZD" />
+            </Avatar>
+          ),
+        }) satisfies RadioGroupRadio,
+    ),
+  },
+} satisfies Story;
 
-export const Labeled = () => {
-  return (
-    <Field label="Do you like our product?">
-      <RadioGroup
-        name="radio-group"
-        radios={[
-          {
-            value: 'yes',
-            label: 'Yes',
-          },
-          {
-            value: 'definitely',
-            label: 'Definitely',
-          },
-          {
-            value: 'absolutely',
-            label: 'Absolutely',
-          },
-        ]}
-        onChange={(v) => action(v)}
-      />
-    </Field>
-  );
-};
+export const WithinField = {
+  ...Basic,
+  render: function Render(args) {
+    const [selectedValue, setSelectedValue] = useState('radio-2');
+    const hasError = selectedValue === 'radio-2';
+    return (
+      <Field
+        {...(hasError
+          ? {
+              message: 'Something went wrong',
+              sentiment: 'negative',
+            }
+          : undefined)}
+      >
+        <RadioGroup {...args} selectedValue={selectedValue} onChange={setSelectedValue} />
+      </Field>
+    );
+  },
+} satisfies Story;

package/src/withId/index.ts

@@ -0,0 +1,2 @@
+export { default } from './withId';
+export type { WithIdProps } from './withId';

package/src/withId/story/source.tsx

@@ -0,0 +1,22 @@
+export const withIdSource = `
+import { withId, Button, type WithIdProps } from '@transferwise/components';
+
+type DescribedButtonProps = { id?: string };
+type DescribedButtonWithIdProps = WithIdProps<DescribedButtonProps>;
+
+function DescribedButton({ id }: DescribedButtonWithIdProps) {
+  return (
+    <>
+      <Button aria-describedby={id}>Continue</Button>
+
+      <p id={id} className="text-xs-center m-t-2">
+        Enter an amount in either GBP or PLN
+        <br />
+        This paragraph has id of <code>{id}</code>
+      </p>
+    </>
+  );
+}
+
+export default withId<DescribedButtonProps>(DescribedButton);
+`;

package/src/withId/withId.docs.mdx

@@ -0,0 +1,33 @@
+import { Meta, Canvas, Source } from '@storybook/blocks';
+import { WithoutId, WithCustomId, WithEmptyId } from './withId.story';
+import { withIdSource } from './story/source';
+
+<Meta title="HoCs/withId" />
+
+# withId
+
+This Higher Order Component injects an SSR-friendly `id` prop to any given component. It's especially useful for class-based components where you need to connect a number of elements via aria attributes, yet `useId` hook is unavailable.
+
+> **Please note:** this component will be eventually deprecated as we move away from the class components to function components, so use with care.
+
+## Usage
+
+Given a dummy `DescribedButtonProps` component, when wrapped in the `widthId` HoC…
+
+<Source code={withIdSource} dark />
+
+…it will be automatically provided with a generated `id` prop…
+
+<Canvas of={WithoutId} language="tsx" />
+
+…but it will also respect a custom `id`, if provided.
+
+<Canvas of={WithCustomId} language="tsx" />
+
+### Empty strings
+
+The HTML spec considers [empty 'id' attributes as invalid](https://html.spec.whatwg.org/multipage/dom.html#the-id-attribute), and given that the main purpose of this HoC is to offer cross-element connectivity for accessibility purposes, any falsy value provided to the `id` prop for the wrapped component would most likely cause a fault.
+
+Because of that, all falsy `id` prop values will be overridden by this HoC.
+
+<Canvas of={WithEmptyId} language="tsx" />