@transferwise/components 0.0.0-experimental-11c630d → 0.0.0-experimental-50dbef7

package/src/common/card/Card.tsx

@@ -42,7 +42,7 @@ export interface CardProps {
  * @param {boolean} isSmall - Whether the card is small or not.
  * @param {(event_: MouseEvent<HTMLButtonElement>) => void} onDismiss - Optional function to call when the card is dismissed.
  * @param {string} testId - Optional ID to add to the card container for testing purposes.
- * @returns {JSX.Element} - The card component.
+ * @returns {React.JSX.Element} - The card component.
  * @example
  * <Card>
  *   <p>Hello World!</p>

package/src/field/Field.spec.tsx

@@ -73,7 +73,7 @@ describe('Field', () => {
 
   it('should show or hide (Optional) suffix depending on required prop', () => {
     render(
-      <Field label="Phone number" description="This is help text">
+      <Field label="Phone number" required={false} description="This is help text">
         <Input />
       </Field>,
     );

package/src/field/Field.story.tsx

@@ -21,16 +21,21 @@ export const Basic = () => {
   return (
     <div className="row">
       <div className="col-md-8 col-md-offset-2">
-        <Field label="Required Text Input" required>
+        <Field label="Required Text Input">
           <Input value={value} onChange={({ target }) => setValue(target.value)} />
         </Field>
-        <Field label="Text Input">
+        <Field label="Text Input" required={false}>
           <Input value={value} onChange={({ target }) => setValue(target.value)} />
         </Field>
-        <Field label="Text Input with Description" description="This a field Description">
+        <Field
+          label="Text Input with Description"
+          required={false}
+          description="This a field Description"
+        >
           <Input value={value} onChange={({ target }) => setValue(target.value)} />
         </Field>
         <Field
+          required={false}
           label="Text Input with Validation Error"
           description="This a field Description"
           sentiment={Sentiment.NEGATIVE}
@@ -39,27 +44,32 @@ export const Basic = () => {
           <Input value={value} onChange={({ target }) => setValue(target.value)} />
         </Field>
 
-        <Field label="Date Of Birth">
+        <Field label="Date Of Birth" required={false}>
           <DateInput onChange={fn} />
         </Field>
 
-        <Field label="Date Of Birth with Description" description={lorem10}>
+        <Field label="Date Of Birth with Description" required={false} description={lorem10}>
           <DateInput onChange={fn} />
         </Field>
 
-        <Field label="Search business">
+        <Field label="Search business" required={false}>
           <SearchInput />
         </Field>
 
-        <Field label="Textarea">
+        <Field label="Textarea" required={false}>
           <TextArea />
         </Field>
 
-        <Field label="Textarea with Description" description="This a TextArea Description">
+        <Field
+          label="Textarea with Description"
+          required={false}
+          description="This a TextArea Description"
+        >
           <TextArea />
         </Field>
 
         <Field
+          required={false}
           label="Textarea with Validation Error"
           description="This a TextArea Description"
           message={lorem10}
@@ -69,6 +79,7 @@ export const Basic = () => {
         </Field>
 
         <Field
+          required={false}
           label={
             <>
               Label with Suffix <Info content={lorem40} />

package/src/field/Field.tsx

@@ -31,7 +31,7 @@ export type FieldProps = {
 export const Field = ({
   id,
   label,
-  required = false,
+  required = true,
   message: propMessage,
   hint,
   description = hint,

package/src/index.ts

@@ -1,3 +1,5 @@
+'use client';
+
 /**
  * Types
  */
@@ -242,8 +244,3 @@ export {
  * Translations
  */
 export { default as translations } from './i18n';
-
-/**
- * HoCs
- */
-export { default as withId } from './withId';

package/src/moneyInput/MoneyInput.spec.js

@@ -1,5 +1,4 @@
 import { shallow } from 'enzyme';
-import { render, screen } from '@testing-library/react';
 
 import { MoneyInput, Title, Input, SelectInput } from '..';
 import { mockMatchMedia, mockResizeObserver } from '../test-utils';
@@ -88,9 +87,7 @@ describe('Money Input', () => {
       onAmountChange: jest.fn(),
       onCurrencyChange: jest.fn(),
     };
-    component = shallow(<MoneyInput {...props} />)
-      .dive()
-      .dive();
+    component = shallow(<MoneyInput {...props} />).dive();
     jest.clearAllMocks();
   });
 
@@ -210,10 +207,10 @@ describe('Money Input', () => {
     ]);
   });
 
-  it('renders Select component with generated id when id is not provided', () => {
+  it('renders Select component with undefined id when id is not provided', () => {
     const select = component.find('SelectInput');
 
-    expect(select.prop('id')).toBeTruthy();
+    expect(select.prop('id')).toBeUndefined();
   });
 
   it('shows the currently active currency as active and hides its note', () => {
@@ -573,7 +570,9 @@ 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');
   });
 
@@ -805,9 +804,7 @@ describe('Money Input', () => {
           }}
           {...props}
         />,
-      )
-        .dive()
-        .dive();
+      ).dive();
     });
 
     it('renders Select component with expected props', () => {
@@ -818,14 +815,4 @@ 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 { within, userEvent } from '@storybook/test';
+import { expect, within, userEvent } from '@storybook/test';
 import { Lock } from '@transferwise/icons';
 import { useState } from 'react';
 
@@ -9,13 +9,14 @@ import { Field } from '../field/Field';
 export default {
   component: MoneyInput,
   title: 'Forms/MoneyInput',
-  render: function Render(args) {
+  render: (args) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const [selectedCurrency, setSelectedCurrency] = useState(args.selectedCurrency);
 
     const handleOnCurrencyChange = (value: CurrencyOptionItem) => setSelectedCurrency(value);
 
     return (
-      <Field label="Editable money input label" required>
+      <Field id={args.id} label="Editable money input label" required>
         <MoneyInput
           {...args}
           selectedCurrency={selectedCurrency}
@@ -25,6 +26,7 @@ export default {
     );
   },
   args: {
+    id: 'money-input',
     amount: 1000,
     onAmountChange: () => {},
     onCurrencyChange: () => {},
@@ -59,28 +61,28 @@ const exampleCurrency = {
   hkd: {
     value: 'HKD',
     label: 'HKD',
-    note: 'Hong Kong dollar',
+    note: 'Hong Kong',
     currency: 'hkd',
     searchable: 'Hong Kong, Saudi Arabia',
   },
   aud: {
     value: 'AUD',
     label: 'AUD',
-    note: 'Australian dollar',
+    note: 'Australia',
     currency: 'aud',
     searchable: 'Kenguru',
   },
   cny: {
     value: 'CNY',
     label: 'CNY',
-    note: 'Chinese yuan',
+    note: 'China',
     currency: 'cny',
     searchable: 'China',
   },
   jpy: {
     value: 'JPY',
     label: 'JPY',
-    note: 'Japanese yen',
+    note: 'Japan',
     currency: 'jpy',
     searchable: 'Japan',
   },

package/src/moneyInput/MoneyInput.tsx

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

package/src/promoCard/PromoCardGroup.tsx

@@ -56,7 +56,7 @@ export interface PromoCardGroupProps {
  * @param {string} label - Optional label to display above the group.
  * @param {Function} onChange - Optional function to call when the group value changes.
  * @param {string} testId - Optional ID to add to the group container for testing purposes.
- * @returns {JSX.Element} - The PromoCardGroup component.
+ * @returns {React.JSX.Element} - The PromoCardGroup component.
  */
 const PromoCardGroup: FunctionComponent<PromoCardGroupProps> = ({
   children,

package/src/promoCard/PromoCardIndicator.tsx

@@ -38,7 +38,7 @@ export type PromoCardIndicatorProps = {
  * @param {string | ReactElement} icon - Optional icon to display in the indicator.
  * @param {string} testid - Optional ID to add to the indicator container for testing purposes.
  * @param {ReactNode} children - Optional children to display inside the indicator.
- * @returns {JSX.Element} - The PromoCardIndicator component.
+ * @returns {React.JSX.Element} - The PromoCardIndicator component.
  * @example
  * <PromoCardIndicator label="Download" icon="download" />
  */

package/src/sticky/Sticky.tsx

@@ -29,7 +29,7 @@ export interface StickyProps {
  * @param {boolean} open - Determines if the Sticky component is open or closed.
  * @param {('top'|'bottom')} position - Specifies the position.
  * @param {string} testId - ID used for testing.
- * @returns {JSX.Element} The `SlidingPanel` component with applied props.
+ * @returns {React.JSX.Element} The `SlidingPanel` component with applied props.
  * @example
  * <Button onClick={() => setOpen(!open)}>Open Sticky</Button>
  * <Sticky open={open} position={'bottom'}>

package/src/uploadInput/uploadItem/UploadItem.tsx

@@ -11,7 +11,7 @@ import { UploadedFile, UploadError } from '../types';
 import MESSAGES from './UploadItem.messages';
 import { UploadItemLink } from './UploadItemLink';
 
-export type UploadItemProps = JSX.IntrinsicAttributes & {
+export type UploadItemProps = React.JSX.IntrinsicAttributes & {
   file: UploadedFile;
   /**
    * Is this Item part of a multiple- or single-file UploadInput

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

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

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

@@ -1 +0,0 @@
-{"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

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

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

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

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

@@ -1,17 +0,0 @@
-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

@@ -1 +0,0 @@
-{"version":3,"file":"withId.d.ts","sourceRoot":"","sources":["../../../src/withId/withId.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,aAAa,EAAE,MAAM,OAAO,CAAC;AAG7C,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;AAGF;;;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

@@ -1,19 +0,0 @@
-'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

@@ -1 +0,0 @@
-{"version":3,"file":"withId.js","sources":["../../src/withId/withId.tsx"],"sourcesContent":["import { useId, ComponentType } from 'react';\n\n\ntype ChildProps<Props> = Props & {\n  id?: string;\n};\n\nexport type WithIdProps<Props> = Props & {\n  id: string;\n};\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":";;;;;AAgBwB,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

@@ -1,17 +0,0 @@
-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

@@ -1 +0,0 @@
-{"version":3,"file":"withId.mjs","sources":["../../src/withId/withId.tsx"],"sourcesContent":["import { useId, ComponentType } from 'react';\n\n\ntype ChildProps<Props> = Props & {\n  id?: string;\n};\n\nexport type WithIdProps<Props> = Props & {\n  id: string;\n};\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":";;;AAgBwB,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/src/withId/index.ts

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

package/src/withId/story/source.tsx

@@ -1,22 +0,0 @@
-export const withIdSource = `
-import { withId, Button } from '@transferwise/components';
-
-type DescribedButtonProps = {
-  id?: string;
-}
-
-const DescribedButton: DescribedButtonProps = ({id}) => (
-  <>
-    <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 \`{id}\`
-    </p>
-  </>
-);
-
-export default withId(DescribedButton);
-`;

package/src/withId/withId.docs.mdx

@@ -1,24 +0,0 @@
-import { Meta, Canvas, Source } from '@storybook/blocks';
-import { WithoutId, WithCustomId } 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" />

package/src/withId/withId.spec.tsx

@@ -1,26 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import withId from '.';
-
-
-describe('withId', () => {
-  type ButtonProps = {
-    id?: string;
-  }
-  const Button = withId<ButtonProps>(
-    (props) => <button id={props.id} type="button">click me</button>
-  );
-
-
-  it('should provide id', () => {
-    render(<Button />);
-    expect(
-      screen.getByRole('button').getAttribute('id')
-    ).toBeTruthy();
-  });
-
-
-  it('should respect existing id', () => {
-    render(<Button id="myId" />);
-    expect(screen.getByRole('button')).toHaveAttribute('id', 'myId');
-  });
-});

package/src/withId/withId.story.tsx

@@ -1,38 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Button, withId } from '..';
-
-type Story = StoryObj<typeof withId>;
-
-
-
-type ButtonProps = {
-  id?: string;
-}
-
-const DescribedButton = withId<ButtonProps>(
-  ({ id }) =>   <>
-    <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>
-  </>
-);
-DescribedButton.displayName = 'DescribedButton';
-
-export default {
-  component: DescribedButton
-} satisfies Meta<typeof withId>;
-
-
-export const WithoutId: Story = {};
-
-
-export const WithCustomId: Story = {
-  args: {
-    id: 'myId',
-  },
-};

package/src/withId/withId.tsx

@@ -1,29 +0,0 @@
-import { useId, 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>>
-) {
-  function WithIdComponent(props: ChildProps<Props>) {
-    const id = useId();
-
-    return <WrappedComponent {...props} id={props.id || id} />;
-  }
-
-  WithIdComponent.displayName = `withId(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;
-
-  return WithIdComponent;
-}