@acusti/css-value-input 1.0.0-rc.14 → 1.0.0-rc.16

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 (4) hide show
  1. package/dist/CSSValueInput.d.ts +3 -1
  2. package/dist/CSSValueInput.js +224 -151
  3. package/dist/CSSValueInput.test.js +58 -11
  4. package/package.json +2 -2
package/dist/CSSValueInput.d.ts CHANGED
@@ -39,5 +39,7 @@ export type Props = {
39
39
  validator?: RegExp | ((value: string) => boolean);
40
40
  value?: string;
41
41
  };
42
- declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
42
+ declare const _default: React.ForwardRefExoticComponent<
43
+ Props & React.RefAttributes<HTMLInputElement>
44
+ >;
43
45
  export default _default;
package/dist/CSSValueInput.js CHANGED
@@ -1,10 +1,44 @@
1
- import { DEFAULT_CSS_VALUE_TYPE, DEFAULT_UNIT_BY_CSS_VALUE_TYPE, getCSSValueAsNumber, getCSSValueWithUnit, getUnitFromCSSValue, roundToPrecision, } from '@acusti/css-values';
1
+ import {
2
+ DEFAULT_CSS_VALUE_TYPE,
3
+ DEFAULT_UNIT_BY_CSS_VALUE_TYPE,
4
+ getCSSValueAsNumber,
5
+ getCSSValueWithUnit,
6
+ getUnitFromCSSValue,
7
+ roundToPrecision,
8
+ } from '@acusti/css-values';
2
9
  import InputText from '@acusti/input-text';
3
10
  import clsx from 'clsx';
4
11
  import * as React from 'react';
5
12
  const { useCallback, useEffect, useImperativeHandle, useRef } = React;
6
13
  const ROOT_CLASS_NAME = 'cssvalueinput';
7
- export default React.forwardRef(function CSSValueInput({ allowEmpty = true, className, cssValueType = DEFAULT_CSS_VALUE_TYPE, disabled, getValueAsNumber = getCSSValueAsNumber, icon, label, max, min, name, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onSubmitValue, placeholder, step = 1, tabIndex, title, unit = DEFAULT_UNIT_BY_CSS_VALUE_TYPE[cssValueType], validator, value, }, ref) {
14
+ export default React.forwardRef(function CSSValueInput(
15
+ {
16
+ allowEmpty = true,
17
+ className,
18
+ cssValueType = DEFAULT_CSS_VALUE_TYPE,
19
+ disabled,
20
+ getValueAsNumber = getCSSValueAsNumber,
21
+ icon,
22
+ label,
23
+ max,
24
+ min,
25
+ name,
26
+ onBlur,
27
+ onChange,
28
+ onFocus,
29
+ onKeyDown,
30
+ onKeyUp,
31
+ onSubmitValue,
32
+ placeholder,
33
+ step = 1,
34
+ tabIndex,
35
+ title,
36
+ unit = DEFAULT_UNIT_BY_CSS_VALUE_TYPE[cssValueType],
37
+ validator,
38
+ value,
39
+ },
40
+ ref,
41
+ ) {
8
42
  const inputRef = useRef(null);
9
43
  useImperativeHandle(ref, () => inputRef.current);
10
44
  // props.value should be a string; if it’s a number, convert it here
@@ -15,164 +49,203 @@ export default React.forwardRef(function CSSValueInput({ allowEmpty = true, clas
15
49
  useEffect(() => {
16
50
  submittedValueRef.current = value !== null && value !== void 0 ? value : '';
17
51
  }, [value]);
18
- const handleSubmitValue = useCallback((event) => {
19
- const currentValue = event.currentTarget.value;
20
- // Store last submittedValue (used to reset value on invalid input)
21
- submittedValueRef.current = currentValue;
22
- onSubmitValue(currentValue);
23
- }, [onSubmitValue]);
24
- const handleBlur = useCallback((event) => {
25
- const input = event.currentTarget;
26
- inputRef.current = input;
27
- if (onBlur)
28
- onBlur(event);
29
- const currentValue = input.value.trim();
30
- // If allowEmpty and value is empty, skip all validation + normalization
31
- if (allowEmpty && !currentValue) {
32
- handleSubmitValue(event);
33
- return;
34
- }
35
- const currentValueAsNumber = getValueAsNumber(currentValue);
36
- const isCurrentValueFinite = Number.isFinite(currentValueAsNumber);
37
- // Inherit unit from last submitted value unless default is unitless;
38
- // ensures that submitting a new value with no unit doesn’t add a unit
39
- const defaultUnit = unit
40
- ? getUnitFromCSSValue({
41
- cssValueType,
42
- defaultUnit: unit,
43
- value: submittedValueRef.current,
44
- })
45
- : '';
46
- if (!isCurrentValueFinite) {
47
- let isValid = false;
48
- if (validator instanceof RegExp) {
49
- isValid = validator.test(currentValue);
52
+ const handleSubmitValue = useCallback(
53
+ (event) => {
54
+ const currentValue = event.currentTarget.value;
55
+ // Store last submittedValue (used to reset value on invalid input)
56
+ submittedValueRef.current = currentValue;
57
+ onSubmitValue(currentValue);
58
+ },
59
+ [onSubmitValue],
60
+ );
61
+ const handleBlur = useCallback(
62
+ (event) => {
63
+ const input = event.currentTarget;
64
+ inputRef.current = input;
65
+ if (onBlur) onBlur(event);
66
+ const currentValue = input.value.trim();
67
+ // If allowEmpty and value is empty, skip all validation + normalization
68
+ if (allowEmpty && !currentValue) {
69
+ handleSubmitValue(event);
70
+ return;
50
71
  }
51
- else if (validator) {
52
- isValid = validator(currentValue);
72
+ const currentValueAsNumber = getValueAsNumber(currentValue);
73
+ const isCurrentValueFinite = Number.isFinite(currentValueAsNumber);
74
+ // Inherit unit from last submitted value unless default is unitless;
75
+ // ensures that submitting a new value with no unit doesn’t add a unit
76
+ const defaultUnit = unit
77
+ ? getUnitFromCSSValue({
78
+ cssValueType,
79
+ defaultUnit: unit,
80
+ value: submittedValueRef.current,
81
+ })
82
+ : '';
83
+ if (!isCurrentValueFinite) {
84
+ let isValid = false;
85
+ if (validator instanceof RegExp) {
86
+ isValid = validator.test(currentValue);
87
+ } else if (validator) {
88
+ isValid = validator(currentValue);
89
+ }
90
+ if (isValid) {
91
+ handleSubmitValue(event);
92
+ } else {
93
+ // If current value isn’t valid, revert to last submitted value
94
+ input.value = submittedValueRef.current;
95
+ }
96
+ return;
53
97
  }
54
- if (isValid) {
55
- handleSubmitValue(event);
98
+ // Normalize value by applying min/max and integer constraints
99
+ let normalizedValueAsNumber = currentValueAsNumber;
100
+ if (isCurrentValueFinite) {
101
+ if (min != null && currentValueAsNumber < min) {
102
+ normalizedValueAsNumber = min;
103
+ } else if (max != null && currentValueAsNumber > max) {
104
+ normalizedValueAsNumber = max;
105
+ } else if (cssValueType === 'integer') {
106
+ normalizedValueAsNumber = Math.floor(currentValueAsNumber);
107
+ }
56
108
  }
57
- else {
58
- // If current value isn’t valid, revert to last submitted value
59
- input.value = submittedValueRef.current;
109
+ if (normalizedValueAsNumber !== currentValueAsNumber) {
110
+ const currentUnit = getUnitFromCSSValue({
111
+ cssValueType,
112
+ defaultUnit,
113
+ value: currentValue,
114
+ });
115
+ input.value = normalizedValueAsNumber + currentUnit;
116
+ } else {
117
+ input.value = getCSSValueWithUnit({
118
+ cssValueType,
119
+ defaultUnit,
120
+ value: currentValue,
121
+ });
60
122
  }
61
- return;
62
- }
63
- // Normalize value by applying min/max and integer constraints
64
- let normalizedValueAsNumber = currentValueAsNumber;
65
- if (isCurrentValueFinite) {
66
- if (min != null && currentValueAsNumber < min) {
67
- normalizedValueAsNumber = min;
123
+ handleSubmitValue(event);
124
+ },
125
+ [
126
+ allowEmpty,
127
+ cssValueType,
128
+ getValueAsNumber,
129
+ handleSubmitValue,
130
+ max,
131
+ min,
132
+ onBlur,
133
+ unit,
134
+ validator,
135
+ ],
136
+ );
137
+ const getNextValue = useCallback(
138
+ ({ currentValue, multiplier = 1, signum = 1 }) => {
139
+ const modifier = multiplier * step * signum;
140
+ const currentValueAsNumber = getValueAsNumber(currentValue);
141
+ // If currentValue isn’t numeric, don’t try to increment/decrement it
142
+ if (typeof currentValue === 'string' && Number.isNaN(currentValueAsNumber)) {
143
+ return currentValue;
68
144
  }
69
- else if (max != null && currentValueAsNumber > max) {
70
- normalizedValueAsNumber = max;
145
+ let nextValue = currentValueAsNumber + modifier;
146
+ if (cssValueType === 'integer') {
147
+ nextValue = Math.floor(nextValue);
148
+ } else {
149
+ nextValue = roundToPrecision(nextValue, 5);
71
150
  }
72
- else if (cssValueType === 'integer') {
73
- normalizedValueAsNumber = Math.floor(currentValueAsNumber);
151
+ if (typeof max === 'number' && Number.isFinite(max)) {
152
+ nextValue = Math.min(max, nextValue);
74
153
  }
75
- }
76
- if (normalizedValueAsNumber !== currentValueAsNumber) {
77
- const currentUnit = getUnitFromCSSValue({
78
- cssValueType,
79
- defaultUnit,
80
- value: currentValue,
81
- });
82
- input.value = normalizedValueAsNumber + currentUnit;
83
- }
84
- else {
85
- input.value = getCSSValueWithUnit({
154
+ if (typeof min === 'number' && Number.isFinite(min)) {
155
+ nextValue = Math.max(min, nextValue);
156
+ }
157
+ const nextUnit = getUnitFromCSSValue({
86
158
  cssValueType,
87
- defaultUnit,
159
+ defaultUnit: unit,
88
160
  value: currentValue,
89
161
  });
90
- }
91
- handleSubmitValue(event);
92
- }, [
93
- allowEmpty,
94
- cssValueType,
95
- getValueAsNumber,
96
- handleSubmitValue,
97
- max,
98
- min,
99
- onBlur,
100
- unit,
101
- validator,
102
- ]);
103
- const getNextValue = useCallback(({ currentValue, multiplier = 1, signum = 1, }) => {
104
- const modifier = multiplier * step * signum;
105
- const currentValueAsNumber = getValueAsNumber(currentValue);
106
- // If currentValue isn’t numeric, don’t try to increment/decrement it
107
- if (typeof currentValue === 'string' && Number.isNaN(currentValueAsNumber)) {
108
- return currentValue;
109
- }
110
- let nextValue = currentValueAsNumber + modifier;
111
- if (cssValueType === 'integer') {
112
- nextValue = Math.floor(nextValue);
113
- }
114
- else {
115
- nextValue = roundToPrecision(nextValue, 5);
116
- }
117
- if (typeof max === 'number' && Number.isFinite(max)) {
118
- nextValue = Math.min(max, nextValue);
119
- }
120
- if (typeof min === 'number' && Number.isFinite(min)) {
121
- nextValue = Math.max(min, nextValue);
122
- }
123
- const nextUnit = getUnitFromCSSValue({
124
- cssValueType,
125
- defaultUnit: unit,
126
- value: currentValue,
127
- });
128
- return `${nextValue}${nextUnit}`;
129
- }, [cssValueType, getValueAsNumber, max, min, step, unit]);
130
- const handleKeyDown = useCallback((event) => {
131
- var _a, _b;
132
- const input = event.currentTarget;
133
- inputRef.current = input;
134
- if (onKeyDown)
135
- onKeyDown(event);
136
- const currentValue = (_b = (_a = input.value) !== null && _a !== void 0 ? _a : placeholder) !== null && _b !== void 0 ? _b : `0${unit}`;
137
- let nextValue = '';
138
- switch (event.key) {
139
- case 'Escape':
140
- case 'Enter':
141
- if (event.key === 'Escape') {
142
- input.value = submittedValueRef.current;
143
- }
144
- input.blur();
145
- return;
146
- case 'ArrowUp':
147
- case 'ArrowDown':
148
- nextValue = getNextValue({
149
- currentValue,
150
- multiplier: event.shiftKey ? 10 : 1,
151
- signum: event.key === 'ArrowUp' ? 1 : -1,
152
- });
153
- if (nextValue === currentValue)
162
+ return `${nextValue}${nextUnit}`;
163
+ },
164
+ [cssValueType, getValueAsNumber, max, min, step, unit],
165
+ );
166
+ const handleKeyDown = useCallback(
167
+ (event) => {
168
+ var _a, _b;
169
+ const input = event.currentTarget;
170
+ inputRef.current = input;
171
+ if (onKeyDown) onKeyDown(event);
172
+ const currentValue =
173
+ (_b = (_a = input.value) !== null && _a !== void 0 ? _a : placeholder) !==
174
+ null && _b !== void 0
175
+ ? _b
176
+ : `0${unit}`;
177
+ let nextValue = '';
178
+ switch (event.key) {
179
+ case 'Escape':
180
+ case 'Enter':
181
+ if (event.key === 'Escape') {
182
+ input.value = submittedValueRef.current;
183
+ }
184
+ input.blur();
154
185
  return;
155
- event.stopPropagation();
156
- event.preventDefault();
157
- input.value = nextValue;
158
- return;
159
- default:
160
- // No default key handling
161
- }
162
- }, [getNextValue, onKeyDown, placeholder, unit]);
163
- const handleKeyUp = useCallback((event) => {
164
- if (onKeyUp)
165
- onKeyUp(event);
166
- // If this is the key up from ↑ or ↓ keys, time to handleSubmitValue
167
- if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
168
- handleSubmitValue(event);
169
- }
170
- }, [handleSubmitValue, onKeyUp]);
171
- return (React.createElement("label", { className: clsx(ROOT_CLASS_NAME, className, { disabled }), title: title },
172
- icon ? React.createElement("div", { className: `${ROOT_CLASS_NAME}-icon` }, icon) : null,
173
- label ? (React.createElement("div", { className: `${ROOT_CLASS_NAME}-label` },
174
- React.createElement("p", { className: `${ROOT_CLASS_NAME}-label-text` }, label))) : null,
175
- React.createElement("div", { className: `${ROOT_CLASS_NAME}-value` },
176
- React.createElement(InputText, { disabled: disabled, initialValue: value, name: name, onBlur: handleBlur, onChange: onChange, onFocus: onFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, placeholder: placeholder, ref: inputRef, selectTextOnFocus: true, tabIndex: tabIndex }))));
186
+ case 'ArrowUp':
187
+ case 'ArrowDown':
188
+ nextValue = getNextValue({
189
+ currentValue,
190
+ multiplier: event.shiftKey ? 10 : 1,
191
+ signum: event.key === 'ArrowUp' ? 1 : -1,
192
+ });
193
+ if (nextValue === currentValue) return;
194
+ event.stopPropagation();
195
+ event.preventDefault();
196
+ input.value = nextValue;
197
+ return;
198
+ default:
199
+ // No default key handling
200
+ }
201
+ },
202
+ [getNextValue, onKeyDown, placeholder, unit],
203
+ );
204
+ const handleKeyUp = useCallback(
205
+ (event) => {
206
+ if (onKeyUp) onKeyUp(event);
207
+ // If this is the key up from ↑ or ↓ keys, time to handleSubmitValue
208
+ if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
209
+ handleSubmitValue(event);
210
+ }
211
+ },
212
+ [handleSubmitValue, onKeyUp],
213
+ );
214
+ return React.createElement(
215
+ 'label',
216
+ { className: clsx(ROOT_CLASS_NAME, className, { disabled }), title: title },
217
+ icon
218
+ ? React.createElement('div', { className: `${ROOT_CLASS_NAME}-icon` }, icon)
219
+ : null,
220
+ label
221
+ ? React.createElement(
222
+ 'div',
223
+ { className: `${ROOT_CLASS_NAME}-label` },
224
+ React.createElement(
225
+ 'p',
226
+ { className: `${ROOT_CLASS_NAME}-label-text` },
227
+ label,
228
+ ),
229
+ )
230
+ : null,
231
+ React.createElement(
232
+ 'div',
233
+ { className: `${ROOT_CLASS_NAME}-value` },
234
+ React.createElement(InputText, {
235
+ disabled: disabled,
236
+ initialValue: value,
237
+ name: name,
238
+ onBlur: handleBlur,
239
+ onChange: onChange,
240
+ onFocus: onFocus,
241
+ onKeyDown: handleKeyDown,
242
+ onKeyUp: handleKeyUp,
243
+ placeholder: placeholder,
244
+ ref: inputRef,
245
+ selectTextOnFocus: true,
246
+ tabIndex: tabIndex,
247
+ }),
248
+ ),
249
+ );
177
250
  });
178
- //# sourceMappingURL=CSSValueInput.js.map
251
+ //# sourceMappingURL=CSSValueInput.js.map
package/dist/CSSValueInput.test.js CHANGED
@@ -4,18 +4,20 @@ import userEvent from '@testing-library/user-event';
4
4
  import React from 'react'; // eslint-disable-line @typescript-eslint/no-unused-vars
5
5
  import { afterEach, describe, expect, it } from 'vitest';
6
6
  import CSSValueInput from './CSSValueInput.js';
7
- const noop = () => { }; // eslint-disable-line @typescript-eslint/no-empty-function
7
+ const noop = () => {}; // eslint-disable-line @typescript-eslint/no-empty-function
8
8
  afterEach(cleanup);
9
9
  describe('CSSValueInput.tsx', () => {
10
10
  it('renders a text input with the given props.value', () => {
11
- render(React.createElement(CSSValueInput, { onSubmitValue: noop, value: "24px" }));
11
+ render(
12
+ React.createElement(CSSValueInput, { onSubmitValue: noop, value: '24px' }),
13
+ );
12
14
  // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
13
15
  const input = screen.getByRole('textbox');
14
16
  expect(input.value).toBe('24px');
15
17
  });
16
18
  it('handles ↑/↓ keys to increment/decrement by 1 and ⇧↑/⇧↓ to increment/decrement by 10 (preserving the CSS unit)', async () => {
17
19
  const user = userEvent.setup();
18
- render(React.createElement(CSSValueInput, { onSubmitValue: noop, value: "75%" }));
20
+ render(React.createElement(CSSValueInput, { onSubmitValue: noop, value: '75%' }));
19
21
  // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
20
22
  const input = screen.getByRole('textbox');
21
23
  expect(input.value).toBe('75%');
@@ -34,7 +36,13 @@ describe('CSSValueInput.tsx', () => {
34
36
  });
35
37
  it('supports custom props.step for ↑/↓ key handling', async () => {
36
38
  const user = userEvent.setup();
37
- render(React.createElement(CSSValueInput, { onSubmitValue: noop, step: 0.1, value: "2rem" }));
39
+ render(
40
+ React.createElement(CSSValueInput, {
41
+ onSubmitValue: noop,
42
+ step: 0.1,
43
+ value: '2rem',
44
+ }),
45
+ );
38
46
  // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
39
47
  const input = screen.getByRole('textbox');
40
48
  expect(input.value).toBe('2rem');
@@ -53,7 +61,14 @@ describe('CSSValueInput.tsx', () => {
53
61
  });
54
62
  it('uses props.unit as default unit when unit is missing', async () => {
55
63
  const user = userEvent.setup();
56
- render(React.createElement(CSSValueInput, { allowEmpty: true, onSubmitValue: noop, unit: "px", value: "" }));
64
+ render(
65
+ React.createElement(CSSValueInput, {
66
+ allowEmpty: true,
67
+ onSubmitValue: noop,
68
+ unit: 'px',
69
+ value: '',
70
+ }),
71
+ );
57
72
  // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
58
73
  const input = screen.getByRole('textbox');
59
74
  expect(input.value).toBe('');
@@ -62,7 +77,14 @@ describe('CSSValueInput.tsx', () => {
62
77
  });
63
78
  it('preserves last entered unit if different from props.unit when unit is missing', async () => {
64
79
  const user = userEvent.setup();
65
- render(React.createElement(CSSValueInput, { allowEmpty: true, onSubmitValue: noop, unit: "px", value: "" }));
80
+ render(
81
+ React.createElement(CSSValueInput, {
82
+ allowEmpty: true,
83
+ onSubmitValue: noop,
84
+ unit: 'px',
85
+ value: '',
86
+ }),
87
+ );
66
88
  // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
67
89
  const input = screen.getByRole('textbox');
68
90
  expect(input.value).toBe('');
@@ -73,7 +95,14 @@ describe('CSSValueInput.tsx', () => {
73
95
  });
74
96
  it('treats value as numeric if props.unit is an empty string', async () => {
75
97
  const user = userEvent.setup();
76
- render(React.createElement(CSSValueInput, { allowEmpty: true, onSubmitValue: noop, unit: "", value: "100" }));
98
+ render(
99
+ React.createElement(CSSValueInput, {
100
+ allowEmpty: true,
101
+ onSubmitValue: noop,
102
+ unit: '',
103
+ value: '100',
104
+ }),
105
+ );
77
106
  // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
78
107
  const input = screen.getByRole('textbox');
79
108
  expect(input.value).toBe('100');
@@ -88,17 +117,35 @@ describe('CSSValueInput.tsx', () => {
88
117
  });
89
118
  it('updates default unit as props.unit and props.value changes', async () => {
90
119
  const user = userEvent.setup();
91
- const { rerender } = render(React.createElement(CSSValueInput, { onSubmitValue: noop, unit: "px", value: "12px" }));
120
+ const { rerender } = render(
121
+ React.createElement(CSSValueInput, {
122
+ onSubmitValue: noop,
123
+ unit: 'px',
124
+ value: '12px',
125
+ }),
126
+ );
92
127
  // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
93
128
  const input = screen.getByRole('textbox');
94
- rerender(React.createElement(CSSValueInput, { onSubmitValue: noop, unit: "", value: "4" }));
129
+ rerender(
130
+ React.createElement(CSSValueInput, {
131
+ onSubmitValue: noop,
132
+ unit: '',
133
+ value: '4',
134
+ }),
135
+ );
95
136
  expect(input.value).toBe('4');
96
137
  await user.type(input, '25{Enter}');
97
138
  expect(input.value).toBe('25');
98
- rerender(React.createElement(CSSValueInput, { onSubmitValue: noop, unit: "rad", value: "3rad" }));
139
+ rerender(
140
+ React.createElement(CSSValueInput, {
141
+ onSubmitValue: noop,
142
+ unit: 'rad',
143
+ value: '3rad',
144
+ }),
145
+ );
99
146
  expect(input.value).toBe('3rad');
100
147
  await user.type(input, '-4.1{Enter}');
101
148
  expect(input.value).toBe('-4.1rad');
102
149
  });
103
150
  });
104
- //# sourceMappingURL=CSSValueInput.test.js.map
151
+ //# sourceMappingURL=CSSValueInput.test.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acusti/css-value-input",
3
- "version": "1.0.0-rc.14",
3
+ "version": "1.0.0-rc.16",
4
4
  "type": "module",
5
5
  "sideEffects": false,
6
6
  "exports": "./dist/CSSValueInput.js",
@@ -51,7 +51,7 @@
51
51
  },
52
52
  "dependencies": {
53
53
  "@acusti/css-values": "^1.0.2",
54
- "@acusti/input-text": "^1.6.0",
54
+ "@acusti/input-text": "^1.6.2",
55
55
  "clsx": "^2"
56
56
  },
57
57
  "peerDependencies": {