@transferwise/components 46.119.3 → 46.119.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/build/chips/Chip.js +3 -11
  2. package/build/chips/Chip.js.map +1 -1
  3. package/build/chips/Chip.mjs +3 -11
  4. package/build/chips/Chip.mjs.map +1 -1
  5. package/build/inputs/SelectInput.js +5 -1
  6. package/build/inputs/SelectInput.js.map +1 -1
  7. package/build/inputs/SelectInput.mjs +5 -1
  8. package/build/inputs/SelectInput.mjs.map +1 -1
  9. package/build/listItem/Prompt/ListItemPrompt.js +2 -2
  10. package/build/listItem/Prompt/ListItemPrompt.js.map +1 -1
  11. package/build/listItem/Prompt/ListItemPrompt.mjs +2 -2
  12. package/build/listItem/Prompt/ListItemPrompt.mjs.map +1 -1
  13. package/build/progressBar/ProgressBar.js +1 -5
  14. package/build/progressBar/ProgressBar.js.map +1 -1
  15. package/build/progressBar/ProgressBar.mjs +1 -5
  16. package/build/progressBar/ProgressBar.mjs.map +1 -1
  17. package/build/prompt/InlinePrompt/InlinePrompt.js +4 -4
  18. package/build/prompt/InlinePrompt/InlinePrompt.js.map +1 -1
  19. package/build/prompt/InlinePrompt/InlinePrompt.mjs +4 -4
  20. package/build/prompt/InlinePrompt/InlinePrompt.mjs.map +1 -1
  21. package/build/select/Select.js +1 -7
  22. package/build/select/Select.js.map +1 -1
  23. package/build/select/Select.mjs +1 -7
  24. package/build/select/Select.mjs.map +1 -1
  25. package/build/types/chips/Chip.d.ts.map +1 -1
  26. package/build/types/inputs/SelectInput.d.ts.map +1 -1
  27. package/build/types/listItem/ListItem.d.ts +1 -1
  28. package/build/types/listItem/Prompt/ListItemPrompt.d.ts +2 -2
  29. package/build/types/listItem/Prompt/ListItemPrompt.d.ts.map +1 -1
  30. package/build/types/progressBar/ProgressBar.d.ts.map +1 -1
  31. package/build/types/prompt/InlinePrompt/InlinePrompt.d.ts +2 -2
  32. package/build/types/prompt/InlinePrompt/InlinePrompt.d.ts.map +1 -1
  33. package/build/types/select/Select.d.ts.map +1 -1
  34. package/package.json +2 -2
  35. package/src/chips/Chip.tsx +5 -14
  36. package/src/chips/__snapshots__/Chips.spec.tsx.snap +31 -29
  37. package/src/inputs/SelectInput.spec.tsx +40 -0
  38. package/src/inputs/SelectInput.story.tsx +8 -2
  39. package/src/inputs/SelectInput.tsx +10 -1
  40. package/src/listItem/Prompt/ListItemPrompt.spec.tsx +9 -9
  41. package/src/listItem/Prompt/ListItemPrompt.story.tsx +1 -1
  42. package/src/listItem/Prompt/ListItemPrompt.tsx +3 -4
  43. package/src/progressBar/ProgressBar.tsx +1 -6
  44. package/src/prompt/InlinePrompt/InlinePrompt.spec.tsx +6 -6
  45. package/src/prompt/InlinePrompt/InlinePrompt.story.tsx +2 -2
  46. package/src/prompt/InlinePrompt/InlinePrompt.tsx +5 -5
  47. package/src/select/Select.tsx +1 -2
package/src/chips/Chip.tsx CHANGED
@@ -1,4 +1,3 @@
1
- import { useTheme } from '@wise/components-theming';
2
1
  import { clsx } from 'clsx';
3
2
  import { useEffect, useRef } from 'react';
4
3
 
@@ -36,8 +35,6 @@ const Chip = ({
36
35
  const defaultRole = isActionable ? 'button' : undefined;
37
36
  const tabIndex = isActionable ? 0 : -1;
38
37
 
39
- const { isModern } = useTheme();
40
-
41
38
  const closeButtonReference = useRef<HTMLButtonElement>(null);
42
39
  const previousCloseButtonShown = useRef<boolean | undefined>(undefined);
43
40
  useEffect(() => {
@@ -64,22 +61,16 @@ const Chip = ({
64
61
  )}
65
62
  {...(isActionable && { onClick, onKeyPress })}
66
63
  >
67
- {isModern ? (
68
- <Body aria-hidden={!!onRemove} type={Typography.BODY_DEFAULT_BOLD}>
69
- {label}
70
- </Body>
71
- ) : (
72
- <span aria-hidden="false" className="np-chip-label">
73
- {label}
74
- </span>
75
- )}
64
+ <Body aria-hidden={!!onRemove} type={Typography.BODY_DEFAULT_BOLD}>
65
+ {label}
66
+ </Body>
76
67
  {onRemove ? (
77
68
  <CloseButton
78
69
  ref={closeButtonReference}
79
- className={isModern ? `btn-unstyled` : `btn-unstyled m-l-1`}
70
+ className="btn-unstyled"
80
71
  aria-label={closeButton?.['aria-label']}
81
72
  size="sm"
82
- filled={isModern}
73
+ filled
83
74
  onClick={onRemove}
84
75
  />
85
76
  ) : null}
package/src/chips/__snapshots__/Chips.spec.tsx.snap CHANGED
@@ -13,12 +13,12 @@ exports[`Chips Choice Chips renders as expected 1`] = `
13
13
  role="radio"
14
14
  tabindex="0"
15
15
  >
16
- <span
16
+ <div
17
17
  aria-hidden="false"
18
- class="np-chip-label"
18
+ class="np-text-body-default-bold"
19
19
  >
20
20
  Accounting
21
- </span>
21
+ </div>
22
22
  </div>
23
23
  <div
24
24
  aria-checked="true"
@@ -26,12 +26,12 @@ exports[`Chips Choice Chips renders as expected 1`] = `
26
26
  role="radio"
27
27
  tabindex="0"
28
28
  >
29
- <span
29
+ <div
30
30
  aria-hidden="false"
31
- class="np-chip-label"
31
+ class="np-text-body-default-bold"
32
32
  >
33
33
  Payroll
34
- </span>
34
+ </div>
35
35
  </div>
36
36
  <div
37
37
  aria-checked="false"
@@ -39,12 +39,12 @@ exports[`Chips Choice Chips renders as expected 1`] = `
39
39
  role="radio"
40
40
  tabindex="0"
41
41
  >
42
- <span
42
+ <div
43
43
  aria-hidden="false"
44
- class="np-chip-label"
44
+ class="np-text-body-default-bold"
45
45
  >
46
46
  Reporting
47
- </span>
47
+ </div>
48
48
  </div>
49
49
  <div
50
50
  aria-checked="false"
@@ -52,12 +52,12 @@ exports[`Chips Choice Chips renders as expected 1`] = `
52
52
  role="radio"
53
53
  tabindex="0"
54
54
  >
55
- <span
55
+ <div
56
56
  aria-hidden="false"
57
- class="np-chip-label"
57
+ class="np-text-body-default-bold"
58
58
  >
59
59
  Payments
60
- </span>
60
+ </div>
61
61
  </div>
62
62
  </div>
63
63
  </div>
@@ -76,12 +76,12 @@ exports[`Chips Filter Chips renders as expected 1`] = `
76
76
  role="checkbox"
77
77
  tabindex="0"
78
78
  >
79
- <span
79
+ <div
80
80
  aria-hidden="false"
81
- class="np-chip-label"
81
+ class="np-text-body-default-bold"
82
82
  >
83
83
  Accounting
84
- </span>
84
+ </div>
85
85
  </div>
86
86
  <div
87
87
  aria-checked="false"
@@ -89,12 +89,12 @@ exports[`Chips Filter Chips renders as expected 1`] = `
89
89
  role="checkbox"
90
90
  tabindex="0"
91
91
  >
92
- <span
92
+ <div
93
93
  aria-hidden="false"
94
- class="np-chip-label"
94
+ class="np-text-body-default-bold"
95
95
  >
96
96
  Payroll
97
- </span>
97
+ </div>
98
98
  </div>
99
99
  <div
100
100
  aria-checked="false"
@@ -102,12 +102,12 @@ exports[`Chips Filter Chips renders as expected 1`] = `
102
102
  role="checkbox"
103
103
  tabindex="0"
104
104
  >
105
- <span
105
+ <div
106
106
  aria-hidden="false"
107
- class="np-chip-label"
107
+ class="np-text-body-default-bold"
108
108
  >
109
109
  Reporting
110
- </span>
110
+ </div>
111
111
  </div>
112
112
  <div
113
113
  aria-checked="true"
@@ -115,20 +115,20 @@ exports[`Chips Filter Chips renders as expected 1`] = `
115
115
  role="checkbox"
116
116
  tabindex="-1"
117
117
  >
118
- <span
119
- aria-hidden="false"
120
- class="np-chip-label"
118
+ <div
119
+ aria-hidden="true"
120
+ class="np-text-body-default-bold"
121
121
  >
122
122
  Payments
123
- </span>
123
+ </div>
124
124
  <button
125
125
  aria-label="Clear Payments"
126
- class="np-close-button close btn-link text-no-decoration btn-unstyled m-l-1"
126
+ class="np-close-button close btn-link text-no-decoration btn-unstyled"
127
127
  type="button"
128
128
  >
129
129
  <span
130
- class="tw-icon tw-icon-cross "
131
- data-testid="cross-icon"
130
+ class="tw-icon tw-icon-cross-circle-fill "
131
+ data-testid="cross-circle-fill-icon"
132
132
  >
133
133
  <svg
134
134
  aria-hidden="true"
@@ -140,7 +140,9 @@ exports[`Chips Filter Chips renders as expected 1`] = `
140
140
  width="16"
141
141
  >
142
142
  <path
143
- d="m12 13.414-7.293 7.293-1.414-1.414L10.586 12 3.293 4.707l1.414-1.414L12 10.586l7.293-7.293 1.414 1.414L13.414 12l7.293 7.293-1.414 1.414z"
143
+ clip-rule="evenodd"
144
+ d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10m-4.707-6.707L10.586 12 7.293 8.707l1.414-1.414L12 10.586l3.293-3.293 1.414 1.414L13.414 12l3.293 3.293-1.414 1.414L12 13.414l-3.293 3.293z"
145
+ fill-rule="evenodd"
144
146
  />
145
147
  </svg>
146
148
  </span>
package/src/inputs/SelectInput.spec.tsx CHANGED
@@ -184,6 +184,46 @@ describe('SelectInput', () => {
184
184
  expect(within(listbox).getAllByRole('option')).toHaveLength(2);
185
185
  });
186
186
 
187
+ it('filters items ignoring diacritics/accents', async () => {
188
+ render(
189
+ <SelectInput
190
+ items={[
191
+ { type: 'option', value: 'AX', filterMatchers: ['Åland Islands'] },
192
+ { type: 'option', value: 'AL', filterMatchers: ['Albania'] },
193
+ { type: 'option', value: 'DZ', filterMatchers: ['Algeria'] },
194
+ { type: 'option', value: 'RE', filterMatchers: ['Réunion'] },
195
+ ]}
196
+ filterable
197
+ />,
198
+ );
199
+
200
+ await userEvent.tab();
201
+ await userEvent.keyboard(' ');
202
+
203
+ const listbox = screen.getByRole('listbox');
204
+ expect(within(listbox).getAllByRole('option')).toHaveLength(4);
205
+
206
+ await userEvent.keyboard('aland');
207
+ expect(within(listbox).getAllByRole('option')).toHaveLength(1);
208
+ expect(within(listbox).getByRole('option')).toHaveTextContent('AX');
209
+
210
+ const searchInput = screen.getByRole('combobox', { expanded: true });
211
+ await userEvent.clear(searchInput);
212
+ await userEvent.keyboard('reunion');
213
+ expect(within(listbox).getAllByRole('option')).toHaveLength(1);
214
+ expect(within(listbox).getByRole('option')).toHaveTextContent('RE');
215
+
216
+ await userEvent.clear(searchInput);
217
+ await userEvent.keyboard('Åland');
218
+ expect(within(listbox).getAllByRole('option')).toHaveLength(1);
219
+ expect(within(listbox).getByRole('option')).toHaveTextContent('AX');
220
+
221
+ await userEvent.clear(searchInput);
222
+ await userEvent.keyboard('Rèunion');
223
+ expect(within(listbox).getAllByRole('option')).toHaveLength(1);
224
+ expect(within(listbox).getByRole('option')).toHaveTextContent('RE');
225
+ });
226
+
187
227
  it('selects multiple options', async () => {
188
228
  render(
189
229
  <SelectInput
package/src/inputs/SelectInput.story.tsx CHANGED
@@ -111,7 +111,7 @@ interface Currency {
111
111
  const popularCurrencies: Currency[] = [
112
112
  {
113
113
  code: 'USD',
114
- name: 'United States dollar',
114
+ name: 'United States Dollar',
115
115
  countries: ['Hong Kong', 'Saudi Arabia'],
116
116
  },
117
117
  {
@@ -136,6 +136,11 @@ const otherCurrencies: Currency[] = [
136
136
  code: 'AUD',
137
137
  name: 'Australian dollar',
138
138
  },
139
+ {
140
+ code: 'ÅLD',
141
+ name: 'Ålandian peso',
142
+ countries: ['Ålandia'],
143
+ },
139
144
  ];
140
145
 
141
146
  const allCurrencies: Currency[] = [...popularCurrencies, ...otherCurrencies].sort((a, b) =>
@@ -205,7 +210,7 @@ export const Currencies: Story<Currency> = {
205
210
  });
206
211
 
207
212
  await step('Check if options are displayed', async () => {
208
- await waitFor(async () => expect(await screen.findAllByRole('option')).toHaveLength(8));
213
+ await waitFor(async () => expect(await screen.findAllByRole('option')).toHaveLength(9));
209
214
  await waitFor(async () => expect(screen.getByText(/^Can’t find it?/u)).toBeInTheDocument());
210
215
  });
211
216
 
@@ -538,6 +543,7 @@ const countries: Country[] = [
538
543
  { code: 'NL', name: 'Netherlands' },
539
544
  { code: 'CH', name: 'Switzerland' },
540
545
  { code: 'SE', name: 'Sweden' },
546
+ { code: 'AL', name: 'Ålandia' },
541
547
  ];
542
548
 
543
549
  function countryOption(country: Country) {
package/src/inputs/SelectInput.tsx CHANGED
@@ -38,7 +38,16 @@ import { ButtonProps } from '../button/Button.types';
38
38
  const MAX_ITEMS_WITHOUT_VIRTUALIZATION = 50;
39
39
 
40
40
  function searchableString(value: string) {
41
- return value.trim().replace(/\s+/gu, ' ').normalize('NFKC').toLowerCase();
41
+ return (
42
+ value
43
+ .trim()
44
+ .replace(/\s+/gu, ' ')
45
+ // NFD converts an Å to A + ̊ (and other special characters)
46
+ .normalize('NFD')
47
+ // and then this replaces the ̊ with nothing (and other special characters)
48
+ .replace(/[\u0300-\u036f]/g, '')
49
+ .toLowerCase()
50
+ );
42
51
  }
43
52
 
44
53
  function inferSearchableStrings(value: unknown) {
package/src/listItem/Prompt/ListItemPrompt.spec.tsx CHANGED
@@ -71,16 +71,16 @@ describe('ListItem.Prompt', () => {
71
71
  });
72
72
 
73
73
  [
74
- { sentiment: Sentiment.NEGATIVE as const, iconLabel: 'Error:' },
75
- { sentiment: Sentiment.WARNING as const, iconLabel: 'Warning:' },
76
- { sentiment: Sentiment.NEUTRAL as const, iconLabel: 'Information:' },
77
- { sentiment: Sentiment.POSITIVE as const, iconLabel: 'Success:' },
78
- { sentiment: 'proposition' as const, iconLabel: '' },
79
- ].forEach(({ sentiment, iconLabel }) => {
74
+ { sentiment: Sentiment.NEGATIVE as const, mediaLabel: 'Error:' },
75
+ { sentiment: Sentiment.WARNING as const, mediaLabel: 'Warning:' },
76
+ { sentiment: Sentiment.NEUTRAL as const, mediaLabel: 'Information:' },
77
+ { sentiment: Sentiment.POSITIVE as const, mediaLabel: 'Success:' },
78
+ { sentiment: 'proposition' as const, mediaLabel: '' },
79
+ ].forEach(({ sentiment, mediaLabel }) => {
80
80
  describe(sentiment, () => {
81
81
  const customLabel = 'Custom icon label';
82
82
 
83
- if (!iconLabel) {
83
+ if (!mediaLabel) {
84
84
  it('should not have accessible name for the icon', () => {
85
85
  const { container } = render(
86
86
  <ListItem
@@ -98,7 +98,7 @@ describe('ListItem.Prompt', () => {
98
98
  prompt={<ListItem.Prompt sentiment={sentiment}>Message</ListItem.Prompt>}
99
99
  />,
100
100
  );
101
- expect(screen.getByLabelText(iconLabel)).toBeInTheDocument();
101
+ expect(screen.getByLabelText(mediaLabel)).toBeInTheDocument();
102
102
  });
103
103
  }
104
104
 
@@ -107,7 +107,7 @@ describe('ListItem.Prompt', () => {
107
107
  <ListItem
108
108
  title="Test Title"
109
109
  prompt={
110
- <ListItem.Prompt sentiment={sentiment} iconLabel={customLabel}>
110
+ <ListItem.Prompt sentiment={sentiment} mediaLabel={customLabel}>
111
111
  Message
112
112
  </ListItem.Prompt>
113
113
  }
package/src/listItem/Prompt/ListItemPrompt.story.tsx CHANGED
@@ -23,7 +23,7 @@ const meta: Meta<ListItemPromptProps> = {
23
23
  decorators: [withoutKey],
24
24
  args: {
25
25
  sentiment: undefined,
26
- iconLabel: undefined,
26
+ mediaLabel: undefined,
27
27
  children: 'You have done a terrible thing',
28
28
  },
29
29
  argTypes: {
package/src/listItem/Prompt/ListItemPrompt.tsx CHANGED
@@ -1,10 +1,9 @@
1
1
  import { useContext } from 'react';
2
- import { clsx } from 'clsx';
3
2
  import { Sentiment } from '../../common';
4
3
  import { ListItemContext, type ListItemContextData } from '../ListItemContext';
5
4
  import { InlinePrompt, type InlinePromptProps } from '../../prompt';
6
5
 
7
- export type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentiment' | 'iconLabel'>;
6
+ export type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentiment' | 'mediaLabel'>;
8
7
 
9
8
  /**
10
9
  * This component allows for rendering an Inline Prompt. <br />
@@ -14,7 +13,7 @@ export type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentimen
14
13
  */
15
14
  export const Prompt = ({
16
15
  sentiment = Sentiment.NEUTRAL,
17
- iconLabel,
16
+ mediaLabel,
18
17
  children,
19
18
  }: ListItemPromptProps) => {
20
19
  const { ids, props } = useContext<ListItemContextData>(ListItemContext);
@@ -24,7 +23,7 @@ export const Prompt = ({
24
23
  <InlinePrompt
25
24
  id={ids.prompt}
26
25
  sentiment={sentiment}
27
- iconLabel={iconLabel}
26
+ mediaLabel={mediaLabel}
28
27
  muted={isLongLivedMuted}
29
28
  className="wds-list-item-prompt"
30
29
  >
package/src/progressBar/ProgressBar.tsx CHANGED
@@ -1,4 +1,3 @@
1
- import { useTheme } from '@wise/components-theming';
2
1
  import { clsx } from 'clsx';
3
2
 
4
3
  import Body from '../body';
@@ -23,14 +22,10 @@ const ProgressBar = ({
23
22
  progress,
24
23
  textEnd,
25
24
  }: ProgressBarProps) => {
26
- const { isModern } = useTheme();
27
25
  return (
28
26
  <div className={clsx('np-progress-bar', className)}>
29
27
  <label className="np-progress-bar__title m-b-1" htmlFor={id}>
30
- <Title
31
- type={Typography.TITLE_BODY}
32
- className={isModern ? `m-b-1 text-primary` : `text-primary`}
33
- >
28
+ <Title type={Typography.TITLE_BODY} className="m-b-1 text-primary">
34
29
  {title}
35
30
  </Title>
36
31
  {description && <Body>{description}</Body>}
package/src/prompt/InlinePrompt/InlinePrompt.spec.tsx CHANGED
@@ -91,8 +91,8 @@ describe('InlinePrompt', () => {
91
91
  }
92
92
  });
93
93
 
94
- describe('iconLabel', () => {
95
- const iconLabel = 'Custom icon label';
94
+ describe('mediaLabel', () => {
95
+ const mediaLabel = 'Custom icon label';
96
96
 
97
97
  if (!statusIconLabel) {
98
98
  it('should not have accessible name for the icon', () => {
@@ -107,15 +107,15 @@ describe('InlinePrompt', () => {
107
107
  }
108
108
 
109
109
  it('should allow for customisation of aria label', () => {
110
- render(<InlinePrompt {...defaultProps} sentiment={sentiment} iconLabel={iconLabel} />);
111
- expect(screen.getByLabelText(iconLabel)).toBeInTheDocument();
110
+ render(<InlinePrompt {...defaultProps} sentiment={sentiment} mediaLabel={mediaLabel} />);
111
+ expect(screen.getByLabelText(mediaLabel)).toBeInTheDocument();
112
112
  });
113
113
 
114
114
  it('should retain custom label while muted', () => {
115
115
  render(
116
- <InlinePrompt {...defaultProps} sentiment={sentiment} iconLabel={iconLabel} muted />,
116
+ <InlinePrompt {...defaultProps} sentiment={sentiment} mediaLabel={mediaLabel} muted />,
117
117
  );
118
- expect(screen.getByLabelText(iconLabel)).toBeInTheDocument();
118
+ expect(screen.getByLabelText(mediaLabel)).toBeInTheDocument();
119
119
  });
120
120
  });
121
121
  });
package/src/prompt/InlinePrompt/InlinePrompt.story.tsx CHANGED
@@ -222,7 +222,7 @@ export const Muted: StoryObj<PreviewStoryArgs> = {
222
222
  * `StatusIcons`, the `positive` and `proposition` ones allow for Icon overrides to bring it
223
223
  * closer to the prompt's content. <br /><br />
224
224
  * It's also possible to override the default icon's accessible name announced by screen readers
225
- * via `iconLabel` prop, which is especially useful for the `proposition` sentiment.
225
+ * via `mediaLabel` prop, which is especially useful for the `proposition` sentiment.
226
226
  */
227
227
  export const IconOverrides: StoryObj<PreviewStoryArgs> = {
228
228
  render: (args: PreviewStoryArgs) => {
@@ -231,7 +231,7 @@ export const IconOverrides: StoryObj<PreviewStoryArgs> = {
231
231
  <InlinePrompt {...args} media={<Travel />} sentiment="positive">
232
232
  Your travel account is set up and ready to use.
233
233
  </InlinePrompt>
234
- <InlinePrompt {...args} media={<Taxi />} sentiment="proposition" iconLabel="Taxi addon: ">
234
+ <InlinePrompt {...args} media={<Taxi />} sentiment="proposition" mediaLabel="Taxi addon: ">
235
235
  Connect Wise with your taxi app to get exclusive discounts.
236
236
  </InlinePrompt>
237
237
  <InlinePrompt {...args} media={<Taxi />} sentiment="negative">
package/src/prompt/InlinePrompt/InlinePrompt.tsx CHANGED
@@ -32,7 +32,7 @@ export type InlinePromptProps = {
32
32
  * Override for the sentiment's-derived, default, accessible name announced by the screen readers.
33
33
  * To be used primarily for `proposition` sentiment.
34
34
  */
35
- iconLabel?: string;
35
+ mediaLabel?: string;
36
36
  id?: string;
37
37
  className?: string;
38
38
  'data-testid'?: string;
@@ -52,7 +52,7 @@ export const InlinePrompt = ({
52
52
  className,
53
53
  children,
54
54
  media = null,
55
- iconLabel,
55
+ mediaLabel,
56
56
  'data-testid': dataTestId,
57
57
  ...rest
58
58
  }: InlinePromptProps) => {
@@ -60,7 +60,7 @@ export const InlinePrompt = ({
60
60
 
61
61
  const renderMedia = () => {
62
62
  if (muted) {
63
- return <BackslashCircle size={16} data-testid="InlinePrompt_Muted" title={iconLabel} />;
63
+ return <BackslashCircle size={16} data-testid="InlinePrompt_Muted" title={mediaLabel} />;
64
64
  }
65
65
  if (loading) {
66
66
  return (
@@ -77,10 +77,10 @@ export const InlinePrompt = ({
77
77
  }
78
78
 
79
79
  if (sentiment === 'proposition') {
80
- return media || <GiftBox title={iconLabel} />;
80
+ return media || <GiftBox title={mediaLabel} />;
81
81
  }
82
82
 
83
- return <StatusIcon size={16} sentiment={sentiment} iconLabel={iconLabel} />;
83
+ return <StatusIcon size={16} sentiment={sentiment} iconLabel={mediaLabel} />;
84
84
  };
85
85
 
86
86
  return (
package/src/select/Select.tsx CHANGED
@@ -163,7 +163,6 @@ export default function Select({
163
163
  const inputAttributes = useInputAttributes();
164
164
 
165
165
  const { formatMessage } = useIntl();
166
- const { isModern } = useTheme();
167
166
  const s = (className: string) => classNamesProp[className] || className;
168
167
  const [open, setOpen] = useState(false);
169
168
  const [searchValue, setSearchValue] = useState(DEFAULT_SEARCH_VALUE);
@@ -599,7 +598,7 @@ export default function Select({
599
598
  </Drawer>
600
599
  ) : (
601
600
  <BottomSheet open={open} onClose={handleCloseOptions}>
602
- {renderOptionsList({ className: isModern ? '' : 'p-a-1' })}
601
+ {renderOptionsList()}
603
602
  </BottomSheet>
604
603
  )
605
604
  ) : (