@pedidopago/ui 1.1.0 → 1.1.1

package/dist/components/RadioInput/components/ChoiceList/index.js

@@ -17,6 +17,8 @@ var _getColorsProps = require("../../utils/get-colors-props");
 
 var _styles = require("../../styles");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -73,26 +75,32 @@ var ChoiceList = function ChoiceList(_ref) {
     onChange(e.currentTarget.value);
   };
 
-  return /*#__PURE__*/React.createElement(_react2.ThemeProvider, {
-    theme: theme
-  }, /*#__PURE__*/React.createElement(RadioGroup.Provider, {
-    value: {
-      handleRadioClick: handleRadioClick,
-      isRadioSelected: isRadioSelected,
-      groupColor: color || theme.colors.primary.default,
-      groupName: name,
-      groupFormRegister: formRegister,
-      isDisabled: isDisabled
-    }
-  }, /*#__PURE__*/React.createElement(_styles.ChoiceWrapper, {
-    role: "radiogroup"
-  }, label && /*#__PURE__*/React.createElement(_styles.ChoiceLabel, {
-    colorProps: colors
-  }, label), /*#__PURE__*/React.createElement(_styles.ListWrapper, {
-    alignDirection: alignDirection
-  }, children), helpText && /*#__PURE__*/React.createElement(_styles.HelpText, {
-    textColor: colors.black
-  }, helpText))));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.ThemeProvider, {
+    theme: theme,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(RadioGroup.Provider, {
+      value: {
+        handleRadioClick: handleRadioClick,
+        isRadioSelected: isRadioSelected,
+        groupColor: color || theme.colors.primary.default,
+        groupName: name,
+        groupFormRegister: formRegister,
+        isDisabled: isDisabled
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ChoiceWrapper, {
+        role: "radiogroup",
+        children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ChoiceLabel, {
+          colorProps: colors,
+          children: label
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ListWrapper, {
+          alignDirection: alignDirection,
+          children: children
+        }), helpText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.HelpText, {
+          textColor: colors.black,
+          children: helpText
+        })]
+      })
+    })
+  });
 };
 
 var _default = ChoiceList;

package/dist/components/RadioInput/index.js

@@ -17,9 +17,9 @@ var _getColorsProps = require("./utils/get-colors-props");
 
 var _styles = require("./styles");
 
-var _excluded = ["isDisabled", "id", "name", "value", "children", "color", "defaultChecked", "onChange"];
+var _jsxRuntime = require("react/jsx-runtime");
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var _excluded = ["isDisabled", "id", "name", "value", "children", "color", "defaultChecked", "onChange"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -80,26 +80,31 @@ var RadioInput = function RadioInput(_ref) {
       checkedColor = _useMemo.checkedColor,
       colors = _useMemo.colors;
 
-  return /*#__PURE__*/React.createElement(_styles.Wrapper, null, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_styles.Input, _extends({
-    disabled: ctx.isDisabled || isDisabled,
-    type: "radio",
-    id: id,
-    color: checkedColor,
-    colorProps: colors,
-    name: ctx !== null && ctx !== void 0 && ctx.groupName ? ctx.groupName : name,
-    value: value,
-    checked: ctx !== null && ctx !== void 0 && ctx.isRadioSelected ? ctx.isRadioSelected(value) : radioValue,
-    onChange: function onChange(e) {
-      if (ctx !== null && ctx !== void 0 && ctx.handleRadioClick) {
-        ctx.handleRadioClick(e);
-      } else {
-        setRadioValue(true);
-        _onChange === null || _onChange === void 0 ? void 0 : _onChange(e.currentTarget.value);
-      }
-    }
-  }, rest, ctx && ctx.groupFormRegister ? _objectSpread({}, ctx.groupFormRegister) : _objectSpread({}, rest.formRegister))), /*#__PURE__*/React.createElement(_styles.Label, {
-    htmlFor: id
-  }, children)));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Wrapper, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Input, _objectSpread(_objectSpread({
+        disabled: ctx.isDisabled || isDisabled,
+        type: "radio",
+        id: id,
+        color: checkedColor,
+        colorProps: colors,
+        name: ctx !== null && ctx !== void 0 && ctx.groupName ? ctx.groupName : name,
+        value: value,
+        checked: ctx !== null && ctx !== void 0 && ctx.isRadioSelected ? ctx.isRadioSelected(value) : radioValue,
+        onChange: function onChange(e) {
+          if (ctx !== null && ctx !== void 0 && ctx.handleRadioClick) {
+            ctx.handleRadioClick(e);
+          } else {
+            setRadioValue(true);
+            _onChange === null || _onChange === void 0 ? void 0 : _onChange(e.currentTarget.value);
+          }
+        }
+      }, rest), ctx && ctx.groupFormRegister ? _objectSpread({}, ctx.groupFormRegister) : _objectSpread({}, rest.formRegister))), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Label, {
+        htmlFor: id,
+        children: children
+      })]
+    })
+  });
 };
 
 var _default = RadioInput;

package/dist/components/RadioInput/radio-input.test.js

@@ -10,17 +10,20 @@ var _ChoiceList = _interopRequireDefault(require("./components/ChoiceList"));
 
 var _ = _interopRequireDefault(require("."));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 describe('Radio Input', function () {
   it('should render input', function () {
     var fn = jest.fn();
 
-    var _render = (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.default, {
+    var _render = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
       onChange: fn,
       value: "test",
-      id: "test"
-    }, "Radio Test")),
+      id: "test",
+      children: "Radio Test"
+    })),
         container = _render.container;
 
     var radio = container.querySelector('input[type="radio"]');
@@ -29,11 +32,12 @@ describe('Radio Input', function () {
   it('should check input on Click on input', function () {
     var fn = jest.fn();
 
-    var _render2 = (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.default, {
+    var _render2 = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
       onChange: fn,
       value: "test",
-      id: "test"
-    }, "Radio Test")),
+      id: "test",
+      children: "Radio Test"
+    })),
         container = _render2.container;
 
     var radio = container.querySelector('input[type="radio"]');
@@ -45,11 +49,12 @@ describe('Radio Input', function () {
   it('should check input on Click label', function () {
     var fn = jest.fn();
 
-    var _render3 = (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.default, {
+    var _render3 = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
       onChange: fn,
       value: "test",
-      id: "test"
-    }, "Radio Test")),
+      id: "test",
+      children: "Radio Test"
+    })),
         container = _render3.container,
         getByText = _render3.getByText;
 
@@ -63,12 +68,13 @@ describe('Radio Input', function () {
   it('should checked input if defaultChecked is provided', function () {
     var fn = jest.fn();
 
-    var _render4 = (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.default, {
+    var _render4 = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
       onChange: fn,
       value: "test",
       id: "test",
-      defaultChecked: true
-    }, "Radio Test")),
+      defaultChecked: true,
+      children: "Radio Test"
+    })),
         container = _render4.container;
 
     var radio = container.querySelector('input[type="radio"]');
@@ -77,11 +83,12 @@ describe('Radio Input', function () {
   it('should call onChange on Click input', function () {
     var fn = jest.fn();
 
-    var _render5 = (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.default, {
+    var _render5 = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
       onChange: fn,
       value: "test",
-      id: "test"
-    }, "Radio Test")),
+      id: "test",
+      children: "Radio Test"
+    })),
         container = _render5.container;
 
     var radio = container.querySelector('input[type="radio"]');
@@ -92,20 +99,24 @@ describe('Radio Input', function () {
   });
   it('should ChoiceList control radio childrens', function () {
     var fn = jest.fn();
-    (0, _testUtils.render)( /*#__PURE__*/React.createElement(_ChoiceList.default, {
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChoiceList.default, {
       onChange: fn,
       value: "test1",
-      name: "test-name"
-    }, /*#__PURE__*/React.createElement(_.default, {
-      value: "test1",
-      id: "test"
-    }, "Radio Test 1"), /*#__PURE__*/React.createElement(_.default, {
-      value: "test2",
-      id: "test"
-    }, "Radio Test 2"), /*#__PURE__*/React.createElement(_.default, {
-      value: "test3",
-      id: "test"
-    }, "Radio Test 3")));
+      name: "test-name",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        value: "test1",
+        id: "test",
+        children: "Radio Test 1"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        value: "test2",
+        id: "test",
+        children: "Radio Test 2"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        value: "test3",
+        id: "test",
+        children: "Radio Test 3"
+      })]
+    }));
 
     var sut = _react.screen.getAllByRole('radio');
 
@@ -115,21 +126,25 @@ describe('Radio Input', function () {
   });
   it('Should ChoiceList change checked radio children is defaultValue is provided', function () {
     var fn = jest.fn();
-    (0, _testUtils.render)( /*#__PURE__*/React.createElement(_ChoiceList.default, {
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChoiceList.default, {
       onChange: fn,
       value: "",
       name: "test-name",
-      defaultValue: "test3"
-    }, /*#__PURE__*/React.createElement(_.default, {
-      value: "test1",
-      id: "test"
-    }, "Radio Test 1"), /*#__PURE__*/React.createElement(_.default, {
-      value: "test2",
-      id: "test"
-    }, "Radio Test 2"), /*#__PURE__*/React.createElement(_.default, {
-      value: "test3",
-      id: "test"
-    }, "Radio Test 3")));
+      defaultValue: "test3",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        value: "test1",
+        id: "test",
+        children: "Radio Test 1"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        value: "test2",
+        id: "test",
+        children: "Radio Test 2"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        value: "test3",
+        id: "test",
+        children: "Radio Test 3"
+      })]
+    }));
 
     var sut = _react.screen.getAllByRole('radio');
 
@@ -144,22 +159,26 @@ describe('Radio Input', function () {
   });
   it('Should ChoiceList disabled radio children is isDisabled is provided', function () {
     var fn = jest.fn();
-    (0, _testUtils.render)( /*#__PURE__*/React.createElement(_ChoiceList.default, {
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChoiceList.default, {
       onChange: fn,
       value: "",
       isDisabled: true,
       name: "test-name",
-      defaultValue: "test3"
-    }, /*#__PURE__*/React.createElement(_.default, {
-      value: "test1",
-      id: "test"
-    }, "Radio Test 1"), /*#__PURE__*/React.createElement(_.default, {
-      value: "test2",
-      id: "test"
-    }, "Radio Test 2"), /*#__PURE__*/React.createElement(_.default, {
-      value: "test3",
-      id: "test"
-    }, "Radio Test 3")));
+      defaultValue: "test3",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        value: "test1",
+        id: "test",
+        children: "Radio Test 1"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        value: "test2",
+        id: "test",
+        children: "Radio Test 2"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        value: "test3",
+        id: "test",
+        children: "Radio Test 3"
+      })]
+    }));
 
     var sut = _react.screen.getAllByRole('radio');
 
@@ -169,63 +188,75 @@ describe('Radio Input', function () {
   });
   it('should render helpText if helpText is provided', function () {
     var fn = jest.fn();
-    (0, _testUtils.render)( /*#__PURE__*/React.createElement(_ChoiceList.default, {
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChoiceList.default, {
       onChange: fn,
       value: "",
       name: "test-name",
       defaultValue: "test3",
-      helpText: "Help Text"
-    }, /*#__PURE__*/React.createElement(_.default, {
-      value: "test1",
-      id: "test"
-    }, "Radio Test 1"), /*#__PURE__*/React.createElement(_.default, {
-      value: "test2",
-      id: "test"
-    }, "Radio Test 2"), /*#__PURE__*/React.createElement(_.default, {
-      value: "test3",
-      id: "test"
-    }, "Radio Test 3")));
+      helpText: "Help Text",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        value: "test1",
+        id: "test",
+        children: "Radio Test 1"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        value: "test2",
+        id: "test",
+        children: "Radio Test 2"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        value: "test3",
+        id: "test",
+        children: "Radio Test 3"
+      })]
+    }));
     expect(_react.screen.getByText('Help Text')).toBeInTheDocument();
   });
   it('should render label if label is provided', function () {
     var fn = jest.fn();
-    (0, _testUtils.render)( /*#__PURE__*/React.createElement(_ChoiceList.default, {
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChoiceList.default, {
       onChange: fn,
       value: "",
       label: "any_label",
       name: "test-name",
       defaultValue: "test3",
-      helpText: "Help Text"
-    }, /*#__PURE__*/React.createElement(_.default, {
-      value: "test1",
-      id: "test"
-    }, "Radio Test 1"), /*#__PURE__*/React.createElement(_.default, {
-      value: "test2",
-      id: "test"
-    }, "Radio Test 2"), /*#__PURE__*/React.createElement(_.default, {
-      value: "test3",
-      id: "test"
-    }, "Radio Test 3")));
+      helpText: "Help Text",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        value: "test1",
+        id: "test",
+        children: "Radio Test 1"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        value: "test2",
+        id: "test",
+        children: "Radio Test 2"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        value: "test3",
+        id: "test",
+        children: "Radio Test 3"
+      })]
+    }));
     expect(_react.screen.getByRole('radiogroup').children[0].tagName.toLowerCase()).toBe('label');
   });
   it('should not render label if label not provided', function () {
     var fn = jest.fn();
-    (0, _testUtils.render)( /*#__PURE__*/React.createElement(_ChoiceList.default, {
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChoiceList.default, {
       onChange: fn,
       value: "",
       name: "test-name",
       defaultValue: "test3",
-      helpText: "Help Text"
-    }, /*#__PURE__*/React.createElement(_.default, {
-      value: "test1",
-      id: "test"
-    }, "Radio Test 1"), /*#__PURE__*/React.createElement(_.default, {
-      value: "test2",
-      id: "test"
-    }, "Radio Test 2"), /*#__PURE__*/React.createElement(_.default, {
-      value: "test3",
-      id: "test"
-    }, "Radio Test 3")));
+      helpText: "Help Text",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        value: "test1",
+        id: "test",
+        children: "Radio Test 1"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        value: "test2",
+        id: "test",
+        children: "Radio Test 2"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        value: "test3",
+        id: "test",
+        children: "Radio Test 3"
+      })]
+    }));
     expect(_react.screen.getByRole('radiogroup').children[0].tagName.toLowerCase()).not.toBe('label');
   });
 });

package/dist/components/Rating/components/GradientIcon/index.js

@@ -15,9 +15,15 @@ var _theme = require("../../../../shared/theme");
 
 var _allIcons = require("./utils/allIcons");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var _excluded = ["name", "fillState", "primaryColor", "secondaryColor", "strokeColor", "size", "disabled"];
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+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; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
@@ -52,22 +58,23 @@ var Icon = function Icon(_ref) {
   var htmlParsedPrimaryColor = html.replace(/#133113/g, primaryColor);
   var htmlParsedSecondaryColor = htmlParsedPrimaryColor.replace(/#311331/g, secondaryColor);
   var parsedHtml = htmlParsedSecondaryColor;
-  return /*#__PURE__*/React.createElement(_react.ThemeProvider, {
-    theme: theme
-  }, /*#__PURE__*/React.createElement(_styles.IconComponent, _extends({
-    style: {
-      fill: fillState === 'filled' ? primaryColor : fillState === 'halfFilled' ? "url(#".concat(name, "_gradient)") : secondaryColor
-    },
-    strokeColor: strokeColor,
-    xmlns: xmlns,
-    name: name,
-    viewBox: viewBox,
-    width: size || width,
-    height: size || height,
-    dangerouslySetInnerHTML: {
-      __html: parsedHtml
-    }
-  }, rest)));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.ThemeProvider, {
+    theme: theme,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.IconComponent, _objectSpread({
+      style: {
+        fill: fillState === 'filled' ? primaryColor : fillState === 'halfFilled' ? "url(#".concat(name, "_gradient)") : secondaryColor
+      },
+      strokeColor: strokeColor,
+      xmlns: xmlns,
+      name: name,
+      viewBox: viewBox,
+      width: size || width,
+      height: size || height,
+      dangerouslySetInnerHTML: {
+        __html: parsedHtml
+      }
+    }, rest))
+  });
 };
 
 var _default = Icon;

package/dist/components/Rating/components/RatingWithMultipleValues/RatingWithMultipleValues.js

@@ -15,6 +15,8 @@ var _GradientIcon = _interopRequireDefault(require("../GradientIcon"));
 
 var _svgDataTratamentFunction = require("../../utils/svgDataTratamentFunction");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -111,29 +113,29 @@ function RatingWithMultipleValues(_ref) {
     }
   }
 
-  return /*#__PURE__*/React.createElement(_styles.RatingWrapper, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.RatingWrapper, {
     disabled: disabled,
     onMouseLeave: RatingWrapperMouseLeave,
     ref: RatingWrapperRef,
-    "data-testid": "rating-wrapper"
-  }, icons.map(function (icon) {
-    return /*#__PURE__*/React.createElement(_GradientIcon.default, {
-      size: size,
-      "data-testid": "rating-icon-".concat(icon.id),
-      name: name,
-      primaryColor: primaryColor,
-      secondaryColor: secondaryColor,
-      strokeColor: strokeColor,
-      key: icon.id,
-      onMouseMove: function onMouseMove(e) {
-        return handleMouseMove(e, icon.id);
-      },
-      onMouseLeave: function onMouseLeave(e) {
-        return handleMouseMove(e, icon.id);
-      },
-      onClick: handleClick,
-      fillState: icon.fillState,
-      disabled: disabled
-    });
-  }));
+    "data-testid": "rating-wrapper",
+    children: icons.map(function (icon) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GradientIcon.default, {
+        size: size,
+        "data-testid": "rating-icon-".concat(icon.id),
+        name: name,
+        primaryColor: primaryColor,
+        secondaryColor: secondaryColor,
+        strokeColor: strokeColor,
+        onMouseMove: function onMouseMove(e) {
+          return handleMouseMove(e, icon.id);
+        },
+        onMouseLeave: function onMouseLeave(e) {
+          return handleMouseMove(e, icon.id);
+        },
+        onClick: handleClick,
+        fillState: icon.fillState,
+        disabled: disabled
+      }, icon.id);
+    })
+  });
 }

package/dist/components/Rating/components/RatingWithSingleValue/RatingWithSingleValue.js

@@ -11,6 +11,8 @@ var _icons = require("./icons");
 
 var _react = require("react");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -49,21 +51,23 @@ function RatingWithSingleValue(_ref) {
     }
   }
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, _icons.icons.map(function (icon) {
-    icon.icon.props.width = size;
-    icon.icon.props.height = size;
-
-    icon.icon.props.onClick = function () {
-      return handleClick(icon.id);
-    };
-
-    return /*#__PURE__*/React.createElement(_styles.RatingWrapper, {
-      key: icon.id,
-      disabled: disabled,
-      "data-testid": "rating-wrapper",
-      active: icon.id === currentValue,
-      primaryColor: primaryColor,
-      secondaryColor: secondaryColor
-    }, icon.icon);
-  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: _icons.icons.map(function (icon) {
+      icon.icon.props.width = size;
+      icon.icon.props.height = size;
+
+      icon.icon.props.onClick = function () {
+        return handleClick(icon.id);
+      };
+
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.RatingWrapper, {
+        disabled: disabled,
+        "data-testid": "rating-wrapper",
+        active: icon.id === currentValue,
+        primaryColor: primaryColor,
+        secondaryColor: secondaryColor,
+        children: icon.icon
+      }, icon.id);
+    })
+  });
 }