@transferwise/components 46.97.4 → 46.97.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.97.4",
+  "version": "46.97.5",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -38,95 +38,95 @@
     "!**/*.tsbuildinfo"
   ],
   "devDependencies": {
-    "@babel/core": "^7.24.8",
-    "@babel/plugin-transform-runtime": "^7.24.7",
-    "@babel/preset-env": "^7.24.8",
-    "@babel/preset-react": "^7.24.7",
-    "@babel/preset-typescript": "^7.24.7",
+    "@babel/core": "^7.27.3",
+    "@babel/plugin-transform-runtime": "^7.27.3",
+    "@babel/preset-env": "^7.27.2",
+    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-typescript": "^7.27.1",
     "@cfaester/enzyme-adapter-react-18": "0.8.0",
-    "@formatjs/cli": "^6.2.12",
+    "@formatjs/cli": "^6.7.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-typescript": "^11.1.6",
+    "@rollup/plugin-typescript": "^12.1.2",
     "@rollup/plugin-url": "^8.0.2",
-    "@storybook/addon-a11y": "^8.2.2",
-    "@storybook/addon-actions": "^8.2.2",
-    "@storybook/addon-essentials": "^8.2.2",
-    "@storybook/addon-interactions": "^8.2.2",
+    "@storybook/addon-a11y": "^8.6.14",
+    "@storybook/addon-actions": "^8.6.14",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-interactions": "^8.6.14",
     "@storybook/addon-knobs": "^8.0.1",
-    "@storybook/addon-viewport": "^8.2.2",
-    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/components": "^8.2.2",
-    "@storybook/core-events": "^8.2.2",
-    "@storybook/manager-api": "^8.2.2",
-    "@storybook/react": "^8.2.2",
-    "@storybook/react-webpack5": "^8.2.2",
-    "@storybook/test": "^8.2.2",
-    "@storybook/theming": "^8.2.2",
-    "@testing-library/dom": "^10.3.1",
-    "@testing-library/jest-dom": "^6.4.6",
-    "@testing-library/react": "^16.0.0",
-    "@testing-library/user-event": "^14.5.2",
-    "@transferwise/icons": "^3.21.0",
-    "@tsconfig/recommended": "^1.0.7",
+    "@storybook/addon-viewport": "^8.6.14",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
+    "@storybook/components": "^8.6.14",
+    "@storybook/core-events": "^8.6.14",
+    "@storybook/manager-api": "^8.6.14",
+    "@storybook/react": "^8.6.14",
+    "@storybook/react-webpack5": "^8.6.14",
+    "@storybook/test": "^8.6.14",
+    "@storybook/theming": "^8.6.14",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@transferwise/icons": "^3.22.0",
+    "@tsconfig/recommended": "^1.0.8",
     "@types/babel__core": "^7.20.5",
     "@types/commonmark": "^0.27.9",
-    "@types/enzyme": "^3.10.18",
-    "@types/jest": "^29.5.12",
-    "@types/lodash": "4.17.6",
+    "@types/enzyme": "^3.10.19",
+    "@types/jest": "^29.5.14",
+    "@types/lodash": "4.17.17",
     "@types/lodash.clamp": "^4.0.9",
     "@types/lodash.debounce": "^4.0.9",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
-    "@types/react-transition-group": "4.4.10",
-    "@wise/art": "^2.20.1",
+    "@types/react-transition-group": "4.4.12",
+    "@wise/art": "^2.21.1",
     "@wise/eslint-config": "^12.3.0",
-    "babel-plugin-formatjs": "^10.5.16",
+    "babel-plugin-formatjs": "^10.5.38",
     "enzyme": "^3.11.0",
-    "eslint": "^9.26.0",
+    "eslint": "^9.27.0",
     "gulp": "^5.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-fetch-mock": "^3.0.3",
     "lodash.times": "^4.3.2",
-    "react-intl": "^6.6.8",
-    "rollup": "^4.18.1",
-    "rollup-preserve-directives": "^1.1.1",
-    "storybook": "^8.2.2",
-    "@transferwise/less-config": "3.1.1",
+    "react-intl": "^7.1.11",
+    "rollup": "^4.41.1",
+    "rollup-preserve-directives": "^1.1.3",
+    "storybook": "^8.6.14",
+    "@transferwise/less-config": "3.1.2",
     "@transferwise/neptune-css": "14.24.4",
-    "@wise/components-theming": "1.6.2",
+    "@wise/components-theming": "1.6.3",
     "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {
-    "@transferwise/icons": "^3.21.0",
+    "@transferwise/icons": "^3.22.0",
     "@transferwise/neptune-css": "^14.24",
-    "@wise/art": "^2.16",
-    "@wise/components-theming": "^1.0.0",
+    "@wise/art": "^2.21",
+    "@wise/components-theming": "^1.6.2",
     "react": ">=18",
     "react-dom": ">=18",
     "react-intl": "^5.10.0 || ^6"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.8",
-    "@floating-ui/react": "^0.25.4",
+    "@babel/runtime": "^7.27.3",
+    "@floating-ui/react": "^0.27.9",
     "@headlessui/react": "^1.7.19",
     "@popperjs/core": "^2.11.8",
-    "@react-aria/focus": "^3.17.1",
-    "@react-aria/overlays": "^3.22.1",
-    "@react-spring/web": "~9.7.3",
-    "@transferwise/formatting": "^2.13.0",
+    "@react-aria/focus": "^3.20.3",
+    "@react-aria/overlays": "^3.27.1",
+    "@react-spring/web": "~10.0.1",
+    "@transferwise/formatting": "^2.13.1",
     "@transferwise/neptune-validation": "^3.3.0",
     "clsx": "^2.1.1",
-    "commonmark": "0.29.1",
-    "core-js": "^3.37.1",
+    "commonmark": "^0.31.2",
+    "core-js": "^3.42.0",
     "lodash.clamp": "^4.0.3",
     "lodash.debounce": "^4.0.8",
     "merge-props": "^6.0.0",
     "react-popper": "^2.3.0",
     "react-transition-group": "^4.4.5",
-    "virtua": "^0.33.3"
+    "virtua": "^0.41.2"
   },
   "publishConfig": {
     "access": "public"

package/src/alert/Alert.spec.tsx

@@ -328,6 +328,7 @@ describe('Alert', () => {
       jest.spyOn(window, 'open').mockImplementation();
       // @ts-expect-error value gets set right after its deletion
       delete window.location;
+      // @ts-expect-error TypeScript doesn't allow assigning a plain object to window.location
       window.location = {
         ...window.location,
         assign: jest.fn(),
@@ -335,6 +336,7 @@ describe('Alert', () => {
     });
 
     afterAll(() => {
+      // @ts-expect-error TypeScript doesn't allow assigning a plain object to window.location
       window.location = location;
     });
 
@@ -356,10 +358,6 @@ describe('Alert', () => {
         });
       });
 
-      afterEach(() => {
-        cleanup();
-      });
-
       it('loads action on tap', () => {
         fireEvent.touchStart(alert);
         expect(window.location.assign).not.toHaveBeenCalled();

package/src/card/Card.story.tsx

@@ -12,7 +12,7 @@ type Story = StoryObj<typeof Card>;
  *
  * @see https://transferwise.atlassian.net/wiki/spaces/DS/pages/2387314550/Instructions+for+killing+expanding+cards+on+web+design+pattern
  */
-export default {
+const meta: Meta<typeof Card> = {
   component: Card,
   title: 'Layouts/Card (Deprecated)',
   args: {
@@ -23,7 +23,9 @@ export default {
     as: 'div',
   },
   tags: ['autodocs'],
-} satisfies Meta<typeof Card>;
+};
+
+export default meta;
 
 export const Basic: Story = {
   render: function Render(args) {

package/src/checkbox/Checkbox.story.tsx

@@ -6,7 +6,7 @@ import { lorem10, storyConfig } from '../test-utils';
 
 import Checkbox from './Checkbox';
 
-export default {
+const meta: Meta<typeof Checkbox> = {
   component: Checkbox,
   title: 'Forms/Checkbox',
   args: {
@@ -14,7 +14,8 @@ export default {
     onChange: fn(),
   },
   tags: ['autodocs'],
-} satisfies Meta<typeof Checkbox>;
+};
+export default meta;
 
 type Story = StoryObj<typeof Checkbox>;
 

package/src/common/initials.spec.tsx

@@ -0,0 +1,42 @@
+import { getInitials } from './initials';
+
+describe('getInitials', () => {
+  it('returns both letters if input is exactly two uppercase letters', () => {
+    expect(getInitials('ML')).toBe('ML');
+    expect(getInitials('JS')).toBe('JS');
+  });
+
+  it('returns one letter if input is exactly two letters and either letter is lowercase', () => {
+    expect(getInitials('Na')).toBe('N');
+    expect(getInitials('aa')).toBe('A');
+  });
+
+  it('returns first letter if only one word is given', () => {
+    expect(getInitials('Anton')).toBe('A');
+    expect(getInitials('richard')).toBe('R');
+  });
+
+  it('returns first and last initials for multi-word names', () => {
+    expect(getInitials('Ness Grixti')).toBe('NG');
+    expect(getInitials('João Goão Cevada')).toBe('JC');
+    expect(getInitials('Caio Kaio Erio Orio')).toBe('CO');
+  });
+
+  it('handles lowercase and mixed case names', () => {
+    expect(getInitials('ilya puchka')).toBe('IP');
+    expect(getInitials('ilYa pUchka')).toBe('IP');
+  });
+
+  it('ignores extra spaces', () => {
+    expect(getInitials('  Deji     Ajetomobi  ')).toBe('DA');
+    expect(getInitials(' Gusso   ')).toBe('G');
+  });
+
+  it('returns first and last letter if name is two words with single letters', () => {
+    expect(getInitials('S L')).toBe('SL');
+  });
+
+  it('handles single character', () => {
+    expect(getInitials('Q')).toBe('Q');
+  });
+});

package/src/common/initials.ts

@@ -1,4 +1,8 @@
 export function getInitials(name: string) {
+  if (name.length === 2 && /^[A-Z]{2}$/.test(name)) {
+    return name;
+  }
+
   const allInitials = name
     .split(' ')
     .map((part) => part[0])

package/src/dateInput/DateInput.story.tsx

@@ -3,7 +3,7 @@ import { fn } from '@storybook/test';
 
 import { DateInput } from '..';
 
-const meta = {
+const meta: Meta<typeof DateInput> = {
   component: DateInput,
   title: 'Forms/DateInput',
   tags: ['autodocs'],
@@ -13,7 +13,7 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Basic = {
+export const Basic: Story = {
   args: {
     onChange: fn(),
   },

package/src/dateInput/DateInput.tests.story.tsx

@@ -7,7 +7,7 @@ import { lorem10, storyConfig } from '../test-utils';
 import Provider from '../provider/Provider';
 import translations from '../i18n';
 
-const meta = {
+const meta: Meta<typeof DateInput> = {
   component: DateInput,
   title: 'Forms/DateInput/Tests',
   args: {
@@ -16,14 +16,15 @@ const meta = {
     monthLabel: 'Month select',
     yearLabel: 'Year input',
     yearAutoComplete: 'bday-year',
+    onChange: fn(),
   },
-} satisfies Meta<typeof DateInput>;
+};
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof DateInput>;
 
-const Basic = {
+const Basic: Story = {
   args: {
     onChange: fn(),
   },
@@ -31,9 +32,9 @@ const Basic = {
     const canvas = within(canvasElement);
     await userEvent.click(canvas.getByRole('combobox'));
   },
-} satisfies Story;
+};
 
-export const WithLabel = {
+export const WithLabel: Story = {
   args: {
     onChange: fn(),
   },
@@ -44,18 +45,18 @@ export const WithLabel = {
       </Field>
     );
   },
-} satisfies Story;
+};
 
-export const InputError = {
+export const InputError: Story = {
   ...Basic,
   render: (args) => (
     <Field sentiment="negative" message={lorem10}>
       <DateInput {...args} value={new Date('2010-04-05')} />
     </Field>
   ),
-} satisfies Story;
+};
 
-export const CustomPlaceholders = {
+export const CustomPlaceholders: Story = {
   ...Basic,
   args: {
     placeholders: {

package/src/i18n/cs.json

@@ -1,7 +1,7 @@
 {
   "neptune.Button.loadingAriaLabel": "načítání",
-  "neptune.Chips.ariaLabel": "Vyčistit {choice}",
-  "neptune.ClearButton.ariaLabel": "Vyčistit",
+  "neptune.Chips.ariaLabel": "Vymazat {choice}",
+  "neptune.ClearButton.ariaLabel": "Vymazat",
   "neptune.CloseButton.ariaLabel": "Zavřít",
   "neptune.DateInput.day.label": "Den",
   "neptune.DateInput.day.placeholder": "DD",
@@ -47,25 +47,25 @@
   "neptune.Upload.csWrongTypeMessage": "Tento formát souboru není podporován. Zkuste to znovu s jiným souborem",
   "neptune.Upload.psButtonText": "Zrušit",
   "neptune.Upload.psProcessingText": "Načítání...",
-  "neptune.Upload.retry": "Opakovat",
+  "neptune.Upload.retry": "Zkusit znovu",
   "neptune.Upload.usButtonText": "Nebo vyberte soubor",
-  "neptune.Upload.usDropMessage": "Pusťte sem soubor pro jeho nahrání",
+  "neptune.Upload.usDropMessage": "Přetáhněte soubor a zahajte nahrávání",
   "neptune.Upload.usPlaceholder": "Přetáhněte soubor menší než {maxSize} MB",
   "neptune.UploadButton.allFileTypes": "Všechny typy souborů",
-  "neptune.UploadButton.dropFiles": "Pusťte sem soubor pro jeho nahrání",
-  "neptune.UploadButton.instructions": "{fileTypes}, menší než {size}MB",
+  "neptune.UploadButton.dropFiles": "Přetáhněte soubor a zahajte nahrávání",
+  "neptune.UploadButton.instructions": "{fileTypes}, menší než {size} MB",
   "neptune.UploadButton.maximumFiles": "Max. počet souborů: {maxFiles}.",
   "neptune.UploadButton.uploadFile": "Nahrát soubor",
   "neptune.UploadButton.uploadFiles": "Nahrát soubory",
   "neptune.UploadInput.deleteModalBody": "Odstraněním tohoto souboru jej smažete z našeho systému.",
   "neptune.UploadInput.deleteModalCancelButtonText": "Zrušit",
   "neptune.UploadInput.deleteModalConfirmButtonText": "Odstranit",
-  "neptune.UploadInput.deleteModalTitle": "Jistě chcete odstranit tento soubor?",
+  "neptune.UploadInput.deleteModalTitle": "Opravdu chcete odstranit tento soubor?",
   "neptune.UploadInput.fileIsTooLarge": "Soubor je příliš velký",
   "neptune.UploadInput.fileTypeNotSupported": "Typ souboru není podporován",
   "neptune.UploadInput.maximumFilesAlreadyUploaded": "Je nám líto, ale toto nahrání se nezdařilo, protože můžeme přijmout pouze {maxFilesAllowed} souborů najednou.",
-  "neptune.UploadItem.deleting": "Mažeme...",
-  "neptune.UploadItem.removeFile": "Odstranit soubor {filename}",
+  "neptune.UploadItem.deleting": "Odstraňování...",
+  "neptune.UploadItem.removeFile": "Odebrat soubor {filename}",
   "neptune.UploadItem.uploaded": "Nahráno",
   "neptune.UploadItem.uploadedFile": "Nahraný soubor",
   "neptune.UploadItem.uploading": "Nahrávání...",

package/src/inputWithDisplayFormat/InputWithDisplayFormat.story.tsx

@@ -6,7 +6,7 @@ import { Meta, type StoryObj } from '@storybook/react';
 
 type Story = StoryObj<InputWithDisplayFormatProps & { label: string }>;
 
-const meta = {
+const meta: Meta<typeof InputWithDisplayFormat> = {
   title: 'Forms/InputWithDisplayFormat',
   component: InputWithDisplayFormat,
   render: function Render({ label, ...args }: InputWithDisplayFormatProps & FieldProps) {

package/src/inputs/Input.css

@@ -55,6 +55,11 @@
   font-weight: var(--font-weight-regular);
   height: 32px !important;
   height: var(--size-32) !important;
+}@media (max-width: 320px) {
+  .np-form-control--size-sm {
+    height: 64px !important;
+    height: var(--size-64) !important;
+  }
 }.np-form-control--size-md {
   font-weight: 400;
   font-weight: var(--font-weight-regular);
@@ -64,6 +69,11 @@
   letter-spacing: -0.011em;
   height: 48px !important;
   height: var(--size-48) !important;
+}@media (max-width: 320px) {
+  .np-form-control--size-md {
+    height: 72px !important;
+    height: var(--size-72) !important;
+  }
 }.np-form-control--size-lg {
   margin: 0;
   color: #37517e;

package/src/inputs/SelectInput.tsx

@@ -14,7 +14,7 @@ import {
   useState,
 } from 'react';
 import { useIntl } from 'react-intl';
-import { Virtualizer } from 'virtua';
+import { Virtualizer, type VirtualizerHandle } from 'virtua';
 
 import { useEffectEvent } from '../common/hooks/useEffectEvent';
 import { useScreenSize } from '../common/hooks/useScreenSize';
@@ -553,6 +553,7 @@ function SelectInputOptions<T = string>({
   listBoxLabelledBy,
 }: SelectInputOptionsProps<T>) {
   const intl = useIntl();
+  const virtualiserHandlerRef = useRef<VirtualizerHandle>(null);
   const controllerRef = filterable ? searchInputRef : listboxRef;
   const [initialRender, setInitialRender] = useState(true);
 
@@ -711,16 +712,24 @@ function SelectInputOptions<T = string>({
             filteredItems.map((_, index) => getItemNode(index))
           ) : (
             <Virtualizer
+              ref={virtualiserHandlerRef}
               key={needle}
               count={filteredItems.length}
               keepMounted={mountedIndexes}
               scrollRef={listboxRef} // `VList` doesn't expose this
-              onRangeChange={(startIndex, endIndex) => {
+              onScroll={async () => {
+                if (!virtualiserHandlerRef.current) return;
+
+                const startIndex = virtualiserHandlerRef.current.findStartIndex();
+                const endIndex = virtualiserHandlerRef.current.findStartIndex();
+
                 setMountedIndexes((prevMountedIndexes) => {
                   const indexes = new Set(prevMountedIndexes);
+
                   for (let index = startIndex; index <= endIndex; index += 1) {
                     indexes.add(index);
                   }
+
                   return [...indexes].sort((a, b) => a - b);
                 });
               }}

package/src/inputs/TextArea.css

@@ -55,6 +55,11 @@
   font-weight: var(--font-weight-regular);
   height: 32px !important;
   height: var(--size-32) !important;
+}@media (max-width: 320px) {
+  .np-form-control--size-sm {
+    height: 64px !important;
+    height: var(--size-64) !important;
+  }
 }.np-form-control--size-md {
   font-weight: 400;
   font-weight: var(--font-weight-regular);
@@ -64,6 +69,11 @@
   letter-spacing: -0.011em;
   height: 48px !important;
   height: var(--size-48) !important;
+}@media (max-width: 320px) {
+  .np-form-control--size-md {
+    height: 72px !important;
+    height: var(--size-72) !important;
+  }
 }.np-form-control--size-lg {
   margin: 0;
   color: #37517e;

package/src/inputs/_common.less

@@ -51,11 +51,17 @@
   &--size-sm {
     .np-text-body-default;
     height: var(--size-32) !important;
+    @media (--screen-400-zoom) {
+      height: var(--size-64) !important;
+    }
   }
 
   &--size-md {
     .np-text-body-large;
     height: var(--size-48) !important;
+    @media (--screen-400-zoom) {
+      height: var(--size-72) !important;
+    }
   }
 
   &--size-lg {

package/src/main.css

@@ -2568,6 +2568,12 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   height: 32px !important;
   height: var(--size-32) !important;
 }
+@media (max-width: 320px) {
+  .np-form-control--size-sm {
+    height: 64px !important;
+    height: var(--size-64) !important;
+  }
+}
 .np-form-control--size-md {
   font-weight: 400;
   font-weight: var(--font-weight-regular);
@@ -2578,6 +2584,12 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   height: 48px !important;
   height: var(--size-48) !important;
 }
+@media (max-width: 320px) {
+  .np-form-control--size-md {
+    height: 72px !important;
+    height: var(--size-72) !important;
+  }
+}
 .np-form-control--size-lg {
   margin: 0;
   color: #37517e;
@@ -5966,6 +5978,9 @@ html:not([dir="rtl"]) .np-navigation-option {
 .upload-error-message .alert {
   min-width: 100px;
 }
+.np-theme-personal .droppable-dropping .droppable-complete-card {
+  display: none;
+}
 .np-upload-input__upload-button {
   position: relative;
   padding: 16px;

package/src/markdown/Markdown.tsx

@@ -1,4 +1,5 @@
-import commonmark, { Node as MarkdownNode } from 'commonmark';
+import * as commonmark from 'commonmark';
+import type { Node as MarkdownNode } from 'commonmark';
 
 import { MarkdownNodeType } from '../common';
 import { logActionRequired } from '../utilities';

package/src/phoneNumberInput/PhoneNumberInput.tsx

@@ -18,6 +18,7 @@ import {
   findCountryByPrefix,
 } from './utils';
 import { PhoneNumber } from './utils/explodeNumberModel';
+import { Input } from '../inputs/Input';
 
 const ALLOWED_PHONE_CHARS = /^$|^[\d-\s]+$/;
 
@@ -194,13 +195,12 @@ const PhoneNumberInput = ({
       </div>
       <div className="tw-telephone__number-input">
         <div className={`input-group input-group-${size}`}>
-          <input
+          <Input
             id={id}
             autoComplete="tel-national"
             name="phoneNumber"
             inputMode="numeric"
             value={internalValue.suffix}
-            className="form-control"
             disabled={disabled}
             required={required}
             placeholder={placeholder}

package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.story.tsx

@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 import PrimitiveAnchor from '..';
 
-export default {
+const meta: Meta<typeof PrimitiveAnchor> = {
   component: PrimitiveAnchor,
   title: 'Primitives/Anchor',
   args: {
@@ -16,7 +16,8 @@ export default {
     onMouseLeave: fn(),
   },
   tags: ['autodocs'],
-} satisfies Meta<typeof PrimitiveAnchor>;
+};
+export default meta;
 
 type Story = StoryObj<typeof PrimitiveAnchor>;
 

package/src/primitives/PrimitiveButton/stories/PrimitiveButton.story.tsx

@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 import PrimitiveButton from '..';
 
-export default {
+const meta: Meta<typeof PrimitiveButton> = {
   component: PrimitiveButton,
   title: 'Primitives/Button',
   args: {
@@ -15,7 +15,8 @@ export default {
     onMouseLeave: fn(),
   },
   tags: ['autodocs'],
-} satisfies Meta<typeof PrimitiveButton>;
+};
+export default meta;
 
 type Story = StoryObj<typeof PrimitiveButton>;
 

package/src/radioGroup/RadioGroup.story.tsx

@@ -14,7 +14,7 @@ const meta = {
 export default meta;
 type Story<T extends string | number = string> = StoryObj<RadioGroupProps<T>>;
 
-export const Basic = {
+export const Basic: Story = {
   args: {
     selectedValue: 'radio-2',
     name: 'radio-group',
@@ -45,7 +45,7 @@ export const WithAvatars = {
   ...Basic,
   args: {
     ...Basic.args,
-    radios: Basic.args.radios.map(
+    radios: Basic?.args?.radios?.map(
       (radio) =>
         ({
           ...radio,