@rescui/input 0.11.8 → 0.11.10-RUI-226-Update-card-cn-6e43cc89.60

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 (13) hide show
  1. package/lib/_virtual/close.js +90 -21
  2. package/lib/_virtual/index.css.js +12 -7
  3. package/lib/_virtual/loading.js +106 -29
  4. package/lib/_virtual/warning.js +90 -21
  5. package/lib/index.css +209 -618
  6. package/lib/index.js +1 -1
  7. package/lib/input.js +75 -93
  8. package/lib/input.p.module.css.js +28 -28
  9. package/lib/parts/custom-icon.js +26 -42
  10. package/lib/parts/right-icons.js +16 -13
  11. package/lib/public-api.p.css +40 -361
  12. package/lib/public-api.pcss +40 -361
  13. package/package.json +12 -12
package/lib/index.js CHANGED
@@ -5,5 +5,5 @@ export { Input } from './input.js';
5
5
  * @deprecated use named import instead
6
6
  */
7
7
 
8
- var DefaultInput = Input;
8
+ const DefaultInput = Input;
9
9
  export { DefaultInput as default };
package/lib/input.js CHANGED
@@ -1,105 +1,86 @@
1
- import "core-js/modules/es.object.to-string.js";
2
- import "core-js/modules/web.dom-collections.for-each.js";
3
- import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
4
- import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
5
- import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
6
- import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
7
- import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
8
- import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
9
- import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
10
- import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
11
- var _excluded = ["id", "className", "placeholder", "disabled", "error", "busy", "onChange", "onFocus", "onBlur", "onClear", "mode", "size", "theme", "type", "value", "icon", "iconType", "label", "note", "clearIcon", "suffix", "offSystemMicroelements", "style", "boldLabel"];
12
-
13
- function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
14
-
15
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
16
-
17
1
  import * as React from 'react';
18
2
  import PropTypes from 'prop-types';
19
3
  import cn from 'classnames';
20
4
  import { useThemeWithUndefined } from '@rescui/ui-contexts';
21
- import CloseIcon from './_virtual/close.js';
22
5
  import WarningIcon from './_virtual/warning.js';
6
+ import CloseIcon from './_virtual/close.js';
23
7
  import styles from './input.p.module.css.js';
24
8
  import { RightIcons } from './parts/right-icons.js';
25
9
  import { CustomIcon } from './parts/custom-icon.js';
26
- var useEffect = React.useEffect,
27
- useRef = React.useRef,
28
- useState = React.useState;
29
- var sizeStyles = {
10
+ const {
11
+ useEffect,
12
+ useRef,
13
+ useState
14
+ } = React;
15
+ const sizeStyles = {
30
16
  l: styles.sizeL,
31
17
  m: styles.sizeM,
32
18
  s: styles.sizeS
33
19
  };
34
- var Input = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line complexity
35
- function (_ref, ref) {
36
- var _cn;
37
-
38
- var id = _ref.id,
39
- className = _ref.className,
40
- placeholder = _ref.placeholder,
41
- disabled = _ref.disabled,
42
- error = _ref.error,
43
- busy = _ref.busy,
44
- onChange = _ref.onChange,
45
- onFocus = _ref.onFocus,
46
- onBlur = _ref.onBlur,
47
- onClear = _ref.onClear,
48
- _ref$mode = _ref.mode,
49
- mode = _ref$mode === void 0 ? 'classic' : _ref$mode,
50
- _ref$size = _ref.size,
51
- size = _ref$size === void 0 ? 'm' : _ref$size,
52
- themeFromProps = _ref.theme,
53
- _ref$type = _ref.type,
54
- type = _ref$type === void 0 ? 'text' : _ref$type,
55
- value = _ref.value,
56
- icon = _ref.icon,
57
- _ref$iconType = _ref.iconType,
58
- iconType = _ref$iconType === void 0 ? 'right' : _ref$iconType,
59
- label = _ref.label,
60
- note = _ref.note,
61
- _ref$clearIcon = _ref.clearIcon,
62
- clearIcon = _ref$clearIcon === void 0 ? /*#__PURE__*/React.createElement(CloseIcon, null) : _ref$clearIcon,
63
- suffix = _ref.suffix,
64
- offSystemMicroelements = _ref.offSystemMicroelements,
65
- style = _ref.style,
66
- boldLabel = _ref.boldLabel,
67
- restProps = _objectWithoutProperties(_ref, _excluded);
20
+ const Input = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line complexity
21
+ (_ref, ref) => {
22
+ let {
23
+ id,
24
+ className,
25
+ placeholder,
26
+ disabled,
27
+ error,
28
+ busy,
29
+ onChange,
30
+ onFocus,
31
+ onBlur,
32
+ onClear,
33
+ mode = 'classic',
34
+ size = 'm',
35
+ theme: themeFromProps,
36
+ type = 'text',
37
+ value,
38
+ icon,
39
+ iconType = 'right',
40
+ label,
41
+ note,
42
+ clearIcon = /*#__PURE__*/React.createElement(CloseIcon, null),
43
+ suffix,
44
+ offSystemMicroelements,
45
+ style,
46
+ boldLabel,
47
+ ...restProps
48
+ } = _ref;
49
+ const theme = useThemeWithUndefined(themeFromProps); // replace with :focus-within when ie11 is not supported anymore
68
50
 
69
- var theme = useThemeWithUndefined(themeFromProps); // replace with :focus-within when ie11 is not supported anymore
51
+ const [focused, setFocused] = useState(false);
52
+ const empty = !value;
53
+ const filled = !empty;
54
+ const enabled = !disabled;
55
+ const inputMouseDown = useRef(false);
56
+ const activeRef = useRef(false); // run effect only on unmount with final props
70
57
 
71
- var _useState = useState(false),
72
- _useState2 = _slicedToArray(_useState, 2),
73
- focused = _useState2[0],
74
- setFocused = _useState2[1];
75
-
76
- var empty = !value;
77
- var filled = !empty;
78
- var enabled = !disabled;
79
- var inputMouseDown = useRef(false);
80
- var activeRef = useRef(false); // run effect only on unmount with final props
81
-
82
- var unmountPropsRef = useRef({});
58
+ const unmountPropsRef = useRef({});
83
59
  unmountPropsRef.current = {
84
- type: type,
85
- onChange: onChange
60
+ type,
61
+ onChange
86
62
  };
87
- useEffect(function () {
88
- return function () {
89
- if (unmountPropsRef.current.type === 'file' && unmountPropsRef.current.onChange) {
90
- unmountPropsRef.current.onChange({
91
- target: {
92
- type: 'file',
93
- files: null
94
- }
95
- });
96
- }
97
- };
63
+ useEffect(() => () => {
64
+ if (unmountPropsRef.current.type === 'file' && unmountPropsRef.current.onChange) {
65
+ unmountPropsRef.current.onChange({
66
+ target: {
67
+ type: 'file',
68
+ files: null
69
+ }
70
+ });
71
+ }
98
72
  }, []);
99
- var renderLeftCustomIcon = icon && iconType === 'left';
100
- var renderRightCustomIcon = icon && (iconType === 'right' || iconType === 'rightAction' || iconType === 'rightActionFocusable');
73
+ const renderLeftCustomIcon = icon && iconType === 'left';
74
+ const renderRightCustomIcon = icon && (iconType === 'right' || iconType === 'rightAction' || iconType === 'rightActionFocusable');
101
75
  return /*#__PURE__*/React.createElement("div", {
102
- className: cn(styles.container, styles[theme], styles[mode], sizeStyles[size], (_cn = {}, _defineProperty(_cn, styles.focused, focused), _defineProperty(_cn, styles.filled, filled), _defineProperty(_cn, styles.enabled, enabled), _defineProperty(_cn, styles.error, Boolean(error)), _defineProperty(_cn, styles.disabled, disabled), _defineProperty(_cn, styles.offSystemMicroelements, offSystemMicroelements), _cn), className),
76
+ className: cn(styles.container, styles[theme], styles[mode], sizeStyles[size], {
77
+ [styles.focused]: focused,
78
+ [styles.filled]: filled,
79
+ [styles.enabled]: enabled,
80
+ [styles.error]: Boolean(error),
81
+ [styles.disabled]: disabled,
82
+ [styles.offSystemMicroelements]: offSystemMicroelements
83
+ }, className),
103
84
  style: style,
104
85
  "data-test": "input"
105
86
  }, /*#__PURE__*/React.createElement("label", null, label && /*#__PURE__*/React.createElement("div", {
@@ -107,17 +88,17 @@ function (_ref, ref) {
107
88
  "data-rs-internal": boldLabel ? 'input__bold-label' : 'input__label'
108
89
  }, label), /*#__PURE__*/React.createElement("div", {
109
90
  className: styles.wrapper,
110
- onFocus: function onFocus() {
91
+ onFocus: () => {
111
92
  setFocused(true);
112
93
  },
113
- onMouseUp: function onMouseUp() {
94
+ onMouseUp: () => {
114
95
  if (activeRef.current) {
115
96
  setFocused(false);
116
97
  }
117
98
 
118
99
  activeRef.current = false;
119
100
  },
120
- onMouseDown: function onMouseDown() {
101
+ onMouseDown: () => {
121
102
  if (inputMouseDown.current) {
122
103
  inputMouseDown.current = false;
123
104
  return;
@@ -125,14 +106,14 @@ function (_ref, ref) {
125
106
 
126
107
  activeRef.current = true;
127
108
  },
128
- onMouseLeave: function onMouseLeave() {
109
+ onMouseLeave: () => {
129
110
  if (activeRef.current) {
130
111
  setFocused(false);
131
112
  }
132
113
 
133
114
  activeRef.current = false;
134
115
  },
135
- onBlur: function onBlur() {
116
+ onBlur: () => {
136
117
  if (!activeRef.current) {
137
118
  setFocused(false);
138
119
  }
@@ -144,7 +125,7 @@ function (_ref, ref) {
144
125
  iconIsAction: false,
145
126
  iconIsFocusable: false,
146
127
  iconPosition: "left"
147
- }), /*#__PURE__*/React.createElement("input", _objectSpread(_objectSpread({}, restProps), {}, {
128
+ }), /*#__PURE__*/React.createElement("input", { ...restProps,
148
129
  id: id,
149
130
  className: styles.inner,
150
131
  type: type,
@@ -153,7 +134,7 @@ function (_ref, ref) {
153
134
  onChange: onChange,
154
135
  onFocus: onFocus,
155
136
  onBlur: onBlur,
156
- onMouseDown: function onMouseDown(e) {
137
+ onMouseDown: e => {
157
138
  inputMouseDown.current = true;
158
139
 
159
140
  if (restProps.onMouseDown) {
@@ -165,7 +146,7 @@ function (_ref, ref) {
165
146
  "aria-invalid": Boolean(error),
166
147
  "data-test": "input__inner",
167
148
  "data-rs-internal": "input__inner"
168
- })), /*#__PURE__*/React.createElement(RightIcons, {
149
+ }), /*#__PURE__*/React.createElement(RightIcons, {
169
150
  icon: renderRightCustomIcon && icon,
170
151
  iconIsAction: iconType === 'rightAction' || iconType === 'rightActionFocusable',
171
152
  iconIsFocusable: iconType === 'rightActionFocusable',
@@ -185,7 +166,8 @@ function (_ref, ref) {
185
166
  "data-rs-internal": "input__error-message"
186
167
  }, /*#__PURE__*/React.createElement(WarningIcon, {
187
168
  className: styles.errorIcon,
188
- "data-rs-internal": "input__error-icon"
169
+ "data-rs-internal": "input__error-icon",
170
+ "data-render-all-sizes": true
189
171
  }), /*#__PURE__*/React.createElement("span", null, error)), note && /*#__PURE__*/React.createElement("div", {
190
172
  className: styles.note,
191
173
  "data-rs-internal": "input__note"
package/lib/input.p.module.css.js CHANGED
@@ -1,31 +1,31 @@
1
1
  var styles = {
2
- "light": "_light_xzr84l_8",
3
- "dark": "_dark_xzr84l_11",
4
- "sizeS": "_sizeS_xzr84l_15",
5
- "sizeM": "_sizeM_xzr84l_18",
6
- "sizeL": "_sizeL_xzr84l_21",
7
- "classic": "_classic_xzr84l_25",
8
- "rock": "_rock_xzr84l_28",
9
- "container": "_container_xzr84l_32",
10
- "wrapper": "_wrapper_xzr84l_39",
11
- "disabled": "_disabled_xzr84l_51",
12
- "error": "_error_xzr84l_57",
13
- "enabled": "_enabled_xzr84l_63",
14
- "filled": "_filled_xzr84l_63",
15
- "focused": "_focused_xzr84l_75",
16
- "field": "_field_xzr84l_101",
17
- "inner": "_inner_xzr84l_114",
18
- "offSystemMicroelements": "_offSystemMicroelements_xzr84l_229",
19
- "iconWrapper": "_iconWrapper_xzr84l_239",
20
- "action": "_action_xzr84l_254",
21
- "right": "_right_xzr84l_292",
22
- "left": "_left_xzr84l_296",
23
- "icon": "_icon_xzr84l_239",
24
- "divider": "_divider_xzr84l_342",
25
- "suffix": "_suffix_xzr84l_356",
26
- "errorMessage": "_errorMessage_xzr84l_376",
27
- "errorIcon": "_errorIcon_xzr84l_388",
28
- "note": "_note_xzr84l_394",
29
- "label": "_label_xzr84l_405"
2
+ "light": "_light_tti70k_8",
3
+ "dark": "_dark_tti70k_11",
4
+ "sizeS": "_sizeS_tti70k_15",
5
+ "sizeM": "_sizeM_tti70k_18",
6
+ "sizeL": "_sizeL_tti70k_21",
7
+ "classic": "_classic_tti70k_25",
8
+ "rock": "_rock_tti70k_28",
9
+ "container": "_container_tti70k_32",
10
+ "wrapper": "_wrapper_tti70k_39",
11
+ "disabled": "_disabled_tti70k_51",
12
+ "error": "_error_tti70k_57",
13
+ "enabled": "_enabled_tti70k_63",
14
+ "filled": "_filled_tti70k_63",
15
+ "focused": "_focused_tti70k_75",
16
+ "field": "_field_tti70k_101",
17
+ "inner": "_inner_tti70k_114",
18
+ "offSystemMicroelements": "_offSystemMicroelements_tti70k_229",
19
+ "iconWrapper": "_iconWrapper_tti70k_239",
20
+ "action": "_action_tti70k_254",
21
+ "right": "_right_tti70k_292",
22
+ "left": "_left_tti70k_296",
23
+ "icon": "_icon_tti70k_239",
24
+ "divider": "_divider_tti70k_342",
25
+ "suffix": "_suffix_tti70k_356",
26
+ "errorMessage": "_errorMessage_tti70k_376",
27
+ "errorIcon": "_errorIcon_tti70k_388",
28
+ "note": "_note_tti70k_394",
29
+ "label": "_label_tti70k_405"
30
30
  };
31
31
  export { styles as default };
package/lib/parts/custom-icon.js CHANGED
@@ -1,59 +1,43 @@
1
- import "core-js/modules/web.dom-collections.for-each.js";
2
- import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
3
-
4
- function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
5
-
6
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
7
-
8
- import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
9
- import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
10
- import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
11
- import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
12
- import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
13
- import "core-js/modules/es.object.to-string.js";
14
1
  import * as React from 'react';
15
2
  import cn from 'classnames';
16
3
  import styles from '../input.p.module.css.js';
17
4
 
18
5
  function transferInteractiveProps(iconProps) {
19
- var _context;
20
-
21
- var props = ['onClick', 'onContextMenu', 'onDoubleClick', 'onMouseDown', 'onMouseEnter', 'onMouseLeave', 'onMouseMove', 'onMouseOut', 'onMouseOver', 'onMouseUp', 'aria-label'];
22
-
23
- var button = _filterInstanceProperty(_context = _Object$keys(iconProps)).call(_context, function (key) {
24
- return props.indexOf(key) > -1;
25
- }).reduce(function (obj, key) {
26
- return _objectSpread(_objectSpread({}, obj), {}, _defineProperty({}, key, iconProps[key]));
27
- }, {});
28
-
29
- var icon = _Object$keys(button).reduce(function (obj, key) {
30
- return _objectSpread(_objectSpread({}, obj), {}, _defineProperty({}, key, null));
31
- }, {});
32
-
6
+ const props = ['onClick', 'onContextMenu', 'onDoubleClick', 'onMouseDown', 'onMouseEnter', 'onMouseLeave', 'onMouseMove', 'onMouseOut', 'onMouseOver', 'onMouseUp', 'aria-label'];
7
+ const button = Object.keys(iconProps).filter(key => props.indexOf(key) > -1).reduce((obj, key) => ({ ...obj,
8
+ [key]: iconProps[key]
9
+ }), {});
10
+ const icon = Object.keys(button).reduce((obj, key) => ({ ...obj,
11
+ [key]: null
12
+ }), {});
33
13
  return {
34
- button: button,
35
- icon: icon
14
+ button,
15
+ icon
36
16
  };
37
17
  }
38
18
 
39
- var CustomIcon = function CustomIcon(_ref) {
40
- var icon = _ref.icon,
41
- iconPosition = _ref.iconPosition,
42
- iconIsAction = _ref.iconIsAction,
43
- iconIsFocusable = _ref.iconIsFocusable;
44
- var mouseEvents = transferInteractiveProps(icon.props);
45
- var iconJsx = /*#__PURE__*/React.cloneElement(icon, _objectSpread({
19
+ const CustomIcon = _ref => {
20
+ let {
21
+ icon,
22
+ iconPosition,
23
+ iconIsAction,
24
+ iconIsFocusable
25
+ } = _ref;
26
+ const mouseEvents = transferInteractiveProps(icon.props);
27
+ const iconJsx = /*#__PURE__*/React.cloneElement(icon, {
46
28
  focusable: false,
47
- className: cn(icon.props.className, styles.icon)
48
- }, mouseEvents.icon));
49
- return /*#__PURE__*/React.createElement("span", _objectSpread(_objectSpread({
29
+ className: cn(icon.props.className, styles.icon),
30
+ 'data-render-all-sizes': true,
31
+ ...mouseEvents.icon
32
+ });
33
+ return /*#__PURE__*/React.createElement("span", {
50
34
  role: iconIsAction ? 'button' : null,
51
35
  key: "icon",
52
- className: cn(styles.iconWrapper, styles[iconPosition], iconIsAction && styles.action)
53
- }, mouseEvents.button), {}, {
36
+ className: cn(styles.iconWrapper, styles[iconPosition], iconIsAction && styles.action),
37
+ ...mouseEvents.button,
54
38
  "data-test": "input__icon",
55
39
  tabIndex: iconIsAction && iconIsFocusable ? 0 : -1
56
- }), iconJsx);
40
+ }, iconJsx);
57
41
  };
58
42
 
59
43
  export { CustomIcon, transferInteractiveProps };
package/lib/parts/right-icons.js CHANGED
@@ -1,19 +1,20 @@
1
- import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
2
1
  import * as React from 'react';
3
2
  import cn from 'classnames';
4
3
  import LoadingIcon from '../_virtual/loading.js';
5
4
  import styles from '../input.p.module.css.js';
6
5
  import { CustomIcon } from './custom-icon.js'; // eslint-disable-next-line complexity
7
6
 
8
- var RightIcons = function RightIcons(_ref) {
9
- var icon = _ref.icon,
10
- busy = _ref.busy,
11
- onClear = _ref.onClear,
12
- clearIcon = _ref.clearIcon,
13
- iconIsAction = _ref.iconIsAction,
14
- iconIsFocusable = _ref.iconIsFocusable,
15
- empty = _ref.empty;
16
- var icons = [];
7
+ const RightIcons = _ref => {
8
+ let {
9
+ icon,
10
+ busy,
11
+ onClear,
12
+ clearIcon,
13
+ iconIsAction,
14
+ iconIsFocusable,
15
+ empty
16
+ } = _ref;
17
+ const icons = [];
17
18
 
18
19
  if (onClear && !empty) {
19
20
  icons.push(
@@ -28,7 +29,8 @@ var RightIcons = function RightIcons(_ref) {
28
29
  tabIndex: -1
29
30
  }, /*#__PURE__*/React.cloneElement(clearIcon, {
30
31
  focusable: false,
31
- className: cn(clearIcon.props.className, styles.icon)
32
+ className: cn(clearIcon.props.className, styles.icon),
33
+ 'data-render-all-sizes': true
32
34
  })));
33
35
  }
34
36
 
@@ -42,12 +44,13 @@ var RightIcons = function RightIcons(_ref) {
42
44
  }));
43
45
  }
44
46
 
45
- return /*#__PURE__*/React.createElement(React.Fragment, null, _sliceInstanceProperty(icons).call(icons, 0, busy ? -1 : icons.length), busy && /*#__PURE__*/React.createElement("span", {
47
+ return /*#__PURE__*/React.createElement(React.Fragment, null, icons.slice(0, busy ? -1 : icons.length), busy && /*#__PURE__*/React.createElement("span", {
46
48
  key: "loading",
47
49
  className: cn(styles.iconWrapper, styles.right)
48
50
  }, /*#__PURE__*/React.createElement(LoadingIcon, {
49
51
  "data-test": "input__busy-icon",
50
- className: styles.icon
52
+ className: styles.icon,
53
+ "data-render-all-sizes": true
51
54
  })));
52
55
  };
53
56