@pedidopago/ui 1.3.10 → 1.3.11

package/dist/components/DateInput/index.js

@@ -121,14 +121,14 @@ function DateInput(_ref) {
       value: currentValue ? Array.isArray(currentValue) ? "".concat(currentValue[0].toLocaleDateString(locales, localeOptions), " - ").concat(currentValue[1].toLocaleDateString(locales, localeOptions)) : new Date(currentValue).toLocaleDateString() : '',
       onClick: toggleOptionsAreaView,
       onMouseOver: handleRepositionModal
-    }), datePickerOpen && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Overlay, {
-        onClick: function onClick() {
-          return setDatePickerOpen(false);
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ReactPortal.ReactPortal, {
+    }), datePickerOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ReactPortal.ReactPortal, {
         wrapperId: "portal-root",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalWrapper.ModalWrapper, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Overlay, {
+          onClick: function onClick() {
+            return setDatePickerOpen(false);
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalWrapper.ModalWrapper, {
           open: datePickerOpen,
           left: "".concat((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.getBoundingClientRect().left, "px"),
           top: Number(positionContainer) < 540 ? "calc(".concat(((_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.getBoundingClientRect().bottom) || 0, "px + 10px)") : "calc(".concat(((_containerRef$current5 = containerRef.current) === null || _containerRef$current5 === void 0 ? void 0 : _containerRef$current5.getBoundingClientRect().top) || 0, "px - ", 360, "px)"),
@@ -140,8 +140,8 @@ function DateInput(_ref) {
             minDate: minDate,
             maxDate: maxDate
           }, rest))
-        })
-      })]
+        })]
+      })
     })]
   });
 }

package/dist/components/RadioInput/components/ChoiceList/index.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { ChoiceListProps, ChoiceListContext } from '../../types';
+import { ChoiceListContext, ChoiceListProps } from '../../types';
 export declare const RadioGroup: import("react").Context<ChoiceListContext>;
 declare const ChoiceList: FC<ChoiceListProps>;
 export default ChoiceList;

package/dist/components/RadioInput/components/ChoiceList/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/RadioInput/components/ChoiceList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA8B,EAAE,EAAgC,MAAM,OAAO,CAAC;AAMrF,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAEjE,eAAO,MAAM,UAAU,4CAA4D,CAAC;AAEpF,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAsDnC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/RadioInput/components/ChoiceList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,EAAE,EAAsD,MAAM,OAAO,CAAC;AAE9F,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEjE,eAAO,MAAM,UAAU,4CAA4D,CAAC;AAEpF,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CA2DnC,CAAC;AAIF,eAAe,UAAU,CAAC"}

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

@@ -7,104 +7,89 @@ exports.default = exports.RadioGroup = void 0;
 
 var _react = require("react");
 
-var _react2 = require("@emotion/react");
-
-var _theme = require("../../../../shared/theme");
-
-var _colorToGray = require("../../../../utils/colorToGray");
-
-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(); }
+var _excluded = ["children", "radiosName", "isDisabled", "alignDirection", "label", "helpText", "onChangeValue"];
 
-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."); }
+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 _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+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 _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+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 _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+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; }
 
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 var RadioGroup = /*#__PURE__*/(0, _react.createContext)({});
 exports.RadioGroup = RadioGroup;
-
-var ChoiceList = function ChoiceList(_ref) {
+var ChoiceList = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,
-      name = _ref.name,
-      defaultValue = _ref.defaultValue,
+      radiosName = _ref.radiosName,
       isDisabled = _ref.isDisabled,
-      value = _ref.value,
-      color = _ref.color,
       _ref$alignDirection = _ref.alignDirection,
       alignDirection = _ref$alignDirection === void 0 ? 'column' : _ref$alignDirection,
       label = _ref.label,
       helpText = _ref.helpText,
-      formRegister = _ref.formRegister,
-      onChange = _ref.onChange;
-
-  var _useState = (0, _react.useState)(value || defaultValue),
-      _useState2 = _slicedToArray(_useState, 2),
-      selectedRadioBtn = _useState2[0],
-      setSelectedRadioBtn = _useState2[1];
-
-  var _useTheme = (0, _theme.useTheme)(),
-      theme = _useTheme.theme;
-
-  var colors = (0, _react.useMemo)(function () {
-    var themeColor = theme.colors.primary.default;
-
-    var _convertColor = (0, _colorToGray.convertColor)(color || themeColor),
-        neutral2 = _convertColor.neutral2;
-
-    var colors = (0, _getColorsProps.getColorsProps)(neutral2[0]);
-    return colors;
-  }, [color]);
-
-  var isRadioSelected = function isRadioSelected(value) {
-    return selectedRadioBtn === value;
-  };
-
-  var handleRadioClick = function handleRadioClick(e) {
-    setSelectedRadioBtn(e.currentTarget.value);
-    onChange(e.currentTarget.value);
+      onChangeValue = _ref.onChangeValue,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var handleRadioClick = function handleRadioClick(value) {
+    if (radioRef.current) {
+      var _nativeInputValueSett;
+
+      var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value');
+      nativeInputValueSetter === null || nativeInputValueSetter === void 0 ? void 0 : (_nativeInputValueSett = nativeInputValueSetter.set) === null || _nativeInputValueSett === void 0 ? void 0 : _nativeInputValueSett.call(radioRef.current, value);
+      var event = new Event('input', {
+        bubbles: true
+      });
+      radioRef.current.dispatchEvent(event);
+    }
+
+    onChangeValue === null || onChangeValue === void 0 ? void 0 : onChangeValue(value);
   };
 
+  var radioRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return radioRef.current;
+  });
   (0, _react.useEffect)(function () {
-    !!value && setSelectedRadioBtn(value);
-  }, [value]);
-  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 _document, _document$querySelect;
+
+    var radios = (_document = document) === null || _document === void 0 ? void 0 : (_document$querySelect = _document.querySelectorAll) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.call(_document, "input[name=".concat(radiosName, "]"));
+    radios.forEach(function (radio) {
+      if (radio.value === rest.defaultValue) radio.checked = true;
+    });
+    handleRadioClick(rest.defaultValue);
+  }, [rest.defaultValue]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RadioGroup.Provider, {
+    value: {
+      handleRadioClick: handleRadioClick,
+      groupName: radiosName,
+      isDisabled: isDisabled
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ChoiceWrapper, {
+      role: "radiogroup",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread({
+        style: {
+          display: 'none'
+        },
+        ref: radioRef,
+        type: "text"
+      }, rest)), label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ChoiceLabel, {
+        children: label
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ListWrapper, {
+        alignDirection: alignDirection,
+        children: children
+      }), helpText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.HelpText, {
+        textColor: 'neutral.black',
+        children: helpText
+      })]
     })
   });
-};
-
+});
+ChoiceList.displayName = 'ChoiceList';
 var _default = ChoiceList;
 exports.default = _default;

package/dist/components/RadioInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/RadioInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAiC,MAAM,OAAO,CAAC;AAM1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,gBAAgB,CAuDpC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/RadioInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAsB,MAAM,OAAO,CAAC;AAG/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,gBAAgB,CA6BpC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/RadioInput/index.js

@@ -9,12 +9,6 @@ var _react = require("react");
 
 var _ChoiceList = require("./components/ChoiceList");
 
-var _theme = require("../../shared/theme");
-
-var _colorToGray = require("../../utils/colorToGray");
-
-var _getColorsProps = require("./utils/get-colors-props");
-
 var _styles = require("./styles");
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -27,18 +21,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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 _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."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 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; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -51,59 +33,30 @@ var RadioInput = function RadioInput(_ref) {
       children = _ref.children,
       color = _ref.color,
       defaultChecked = _ref.defaultChecked,
-      _onChange = _ref.onChange,
+      onChange = _ref.onChange,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var ctx = (0, _react.useContext)(_ChoiceList.RadioGroup);
-
-  var _useTheme = (0, _theme.useTheme)(),
-      theme = _useTheme.theme;
-
-  var _useState = (0, _react.useState)(!!defaultChecked),
-      _useState2 = _slicedToArray(_useState, 2),
-      radioValue = _useState2[0],
-      setRadioValue = _useState2[1];
-
-  var _useMemo = (0, _react.useMemo)(function () {
-    var themeColor = theme.colors.primary.default;
-    var checkedColor = (ctx === null || ctx === void 0 ? void 0 : ctx.groupColor) || color || themeColor;
-
-    var _convertColor = (0, _colorToGray.convertColor)(checkedColor),
-        neutral2 = _convertColor.neutral2;
-
-    var colors = (0, _getColorsProps.getColorsProps)(neutral2[0]);
-    return {
-      colors: colors,
-      checkedColor: checkedColor
-    };
-  }, [color]),
-      checkedColor = _useMemo.checkedColor,
-      colors = _useMemo.colors;
-
-  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 _useContext = (0, _react.useContext)(_ChoiceList.RadioGroup),
+      groupName = _useContext.groupName,
+      handleRadioClick = _useContext.handleRadioClick,
+      isDisabledContext = _useContext.isDisabled;
+
+  var radioRef = (0, _react.useRef)(null);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Wrapper, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Input, _objectSpread({
+      ref: radioRef,
+      disabled: isDisabled || isDisabledContext,
+      type: "radio",
+      id: id,
+      name: groupName || name,
+      onClick: function onClick(e) {
+        return handleRadioClick(e.currentTarget.value);
+      },
+      value: value
+    }, rest)), children && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Label, {
+      htmlFor: id,
+      children: children
+    })]
   });
 };
 

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

@@ -32,11 +32,14 @@ describe('Radio Input', function () {
   it('should check input on Click on input', function () {
     var fn = jest.fn();
 
-    var _render2 = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
-      onChange: fn,
-      value: "test",
-      id: "test",
-      children: "Radio Test"
+    var _render2 = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChoiceList.default, {
+      radiosName: "radio",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        onChange: fn,
+        value: "test",
+        id: "test",
+        children: "Radio Test"
+      })
     })),
         container = _render2.container;
 
@@ -49,11 +52,14 @@ describe('Radio Input', function () {
   it('should check input on Click label', function () {
     var fn = jest.fn();
 
-    var _render3 = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
-      onChange: fn,
-      value: "test",
-      id: "test",
-      children: "Radio Test"
+    var _render3 = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChoiceList.default, {
+      radiosName: "radio",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        onChange: fn,
+        value: "test",
+        id: "test",
+        children: "Radio Test"
+      })
     })),
         container = _render3.container,
         getByText = _render3.getByText;
@@ -68,12 +74,15 @@ describe('Radio Input', function () {
   it('should checked input if defaultChecked is provided', function () {
     var fn = jest.fn();
 
-    var _render4 = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
-      onChange: fn,
-      value: "test",
-      id: "test",
-      defaultChecked: true,
-      children: "Radio Test"
+    var _render4 = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChoiceList.default, {
+      defaultValue: "test",
+      radiosName: "radio",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        onChange: fn,
+        value: "test",
+        id: "test",
+        children: "Radio Test"
+      })
     })),
         container = _render4.container;
 
@@ -83,87 +92,27 @@ describe('Radio Input', function () {
   it('should call onChange on Click input', function () {
     var fn = jest.fn();
 
-    var _render5 = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
-      onChange: fn,
-      value: "test",
-      id: "test",
-      children: "Radio Test"
+    var _render5 = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChoiceList.default, {
+      onChangeValue: fn,
+      radiosName: "radio",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        value: "test",
+        id: "test",
+        children: "Radio Test"
+      })
     })),
         container = _render5.container;
 
-    var radio = container.querySelector('input[type="radio"]');
-
-    _react.fireEvent.click(radio);
+    _react.fireEvent.click(container);
 
     expect(fn).toBeCalled();
   });
-  it('should ChoiceList control radio childrens', function () {
-    var fn = jest.fn();
-    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChoiceList.default, {
-      onChange: fn,
-      value: "test1",
-      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');
-
-    expect(sut[0]).toBeChecked();
-    expect(sut[1]).not.toBeChecked();
-    expect(sut[2]).not.toBeChecked();
-  });
-  it('Should ChoiceList change checked radio children is defaultValue is provided', function () {
-    var fn = jest.fn();
-    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChoiceList.default, {
-      onChange: fn,
-      value: "",
-      name: "test-name",
-      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');
-
-    expect(sut[0]).not.toBeChecked();
-    expect(sut[1]).not.toBeChecked();
-    expect(sut[2]).toBeChecked();
-
-    _react.fireEvent.click(sut[0]);
-
-    expect(sut[0]).toBeChecked();
-    expect(sut[2]).not.toBeChecked();
-  });
   it('Should ChoiceList disabled radio children is isDisabled is provided', function () {
     var fn = jest.fn();
     (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChoiceList.default, {
-      onChange: fn,
-      value: "",
+      onChangeValue: fn,
       isDisabled: true,
-      name: "test-name",
+      radiosName: "test-name",
       defaultValue: "test3",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
         value: "test1",
@@ -189,9 +138,8 @@ describe('Radio Input', function () {
   it('should render helpText if helpText is provided', function () {
     var fn = jest.fn();
     (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChoiceList.default, {
-      onChange: fn,
-      value: "",
-      name: "test-name",
+      onChangeValue: fn,
+      radiosName: "test-name",
       defaultValue: "test3",
       helpText: "Help Text",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
@@ -213,10 +161,9 @@ describe('Radio Input', function () {
   it('should render label if label is provided', function () {
     var fn = jest.fn();
     (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChoiceList.default, {
-      onChange: fn,
-      value: "",
+      onChangeValue: fn,
       label: "any_label",
-      name: "test-name",
+      radiosName: "test-name",
       defaultValue: "test3",
       helpText: "Help Text",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
@@ -233,14 +180,13 @@ describe('Radio Input', function () {
         children: "Radio Test 3"
       })]
     }));
-    expect(_react.screen.getByRole('radiogroup').children[0].tagName.toLowerCase()).toBe('label');
+    expect(_react.screen.getByRole('radiogroup').children[1].tagName.toLowerCase()).toBe('label');
   });
   it('should not render label if label not provided', function () {
     var fn = jest.fn();
     (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChoiceList.default, {
-      onChange: fn,
-      value: "",
-      name: "test-name",
+      onChangeValue: fn,
+      radiosName: "test-name",
       defaultValue: "test3",
       helpText: "Help Text",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
@@ -257,6 +203,6 @@ describe('Radio Input', function () {
         children: "Radio Test 3"
       })]
     }));
-    expect(_react.screen.getByRole('radiogroup').children[0].tagName.toLowerCase()).not.toBe('label');
+    expect(_react.screen.getByRole('radiogroup').children[1].tagName.toLowerCase()).not.toBe('label');
   });
 });

package/dist/components/RadioInput/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/RadioInput/styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,eAAO,MAAM,OAAO;;;yGAInB,CAAC;AAEF,eAAO,MAAM,KAAK;;;kHAGjB,CAAC;AAEF,eAAO,MAAM,KAAK;;;sIA4EjB,CAAC;AAEF,eAAO,MAAM,aAAa;;;yGAAe,CAAC;AAE1C,eAAO,MAAM,WAAW;;;6HAOvB,CAAC;AAEF,eAAO,MAAM,WAAW;;;sIASvB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;+HASpB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/RadioInput/styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,eAAO,MAAM,OAAO;;;yGAInB,CAAC;AAEF,eAAO,MAAM,KAAK;;;kHAGjB,CAAC;AAEF,eAAO,MAAM,KAAK;;;sIAgEjB,CAAC;AAEF,eAAO,MAAM,aAAa;;;yGAAe,CAAC;AAE1C,eAAO,MAAM,WAAW;;;6HAOvB,CAAC;AAEF,eAAO,MAAM,WAAW;;;sIASvB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;+HASpB,CAAC"}

package/dist/components/RadioInput/styles.js

@@ -24,13 +24,8 @@ var Label = _styled.default.label(_templateObject2 || (_templateObject2 = _tagge
 exports.Label = Label;
 
 var Input = _styled.default.input(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
-  var color = _ref.color,
-      colorProps = _ref.colorProps,
-      theme = _ref.theme;
-  return (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    appearance: none;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    box-sizing: border-box;\n    margin: 0;\n    width: 20px;\n    height: 20px;\n    border-radius: 50%;\n    border: 2px solid\n      ", ";\n\n    cursor: pointer;\n\n    + label {\n      color: ", ";\n      line-height: 20px;\n      cursor: pointer;\n    }\n\n    :hover {\n      border-color: ", ";\n    }\n    :focus {\n      border-color: ", ";\n      box-shadow: 0 0 0 2px ", ";\n    }\n    :disabled {\n      cursor: default;\n      border-color: ", ";\n      background-color: ", ";\n      + label {\n        color: ", ";\n        cursor: default;\n      }\n    }\n\n    :checked {\n      background-color: ", ";\n      border-color: ", ";\n      &:focus {\n        background-color: ", ";\n        border-color: ", ";\n        box-shadow: 0 0 0 2px ", ";\n      }\n      &:hover {\n        background-color: ", ";\n        border-color: ", ";\n      }\n      &:disabled {\n        background-color: ", ";\n        border-color: ", ";\n        + label {\n          color: ", ";\n          cursor: default;\n        }\n        &::after {\n          display: none;\n        }\n      }\n\n      &::after {\n        content: '';\n        display: block;\n        width: 6px;\n        height: 6px;\n        background: #fff;\n        border-radius: 50%;\n      }\n    }\n  "])), {
-    light: theme.colors.neutral.neutral2,
-    dark: theme.colors.neutral.neutral5
-  }[theme.colorMode], theme.colorMode === 'light' ? colorProps === null || colorProps === void 0 ? void 0 : colorProps.black : theme.colors.neutral.white, theme.colors.primary.hover, colorProps === null || colorProps === void 0 ? void 0 : colorProps.focus, colorProps === null || colorProps === void 0 ? void 0 : colorProps.grayLightness, colorProps === null || colorProps === void 0 ? void 0 : colorProps.grayLightness, colorProps === null || colorProps === void 0 ? void 0 : colorProps.grayLightness, colorProps === null || colorProps === void 0 ? void 0 : colorProps.gray, color, color, colorProps === null || colorProps === void 0 ? void 0 : colorProps.saturationFocus, colorProps === null || colorProps === void 0 ? void 0 : colorProps.saturationFocus, colorProps === null || colorProps === void 0 ? void 0 : colorProps.shadowLightness, colorProps === null || colorProps === void 0 ? void 0 : colorProps.saturation, colorProps === null || colorProps === void 0 ? void 0 : colorProps.saturation, colorProps === null || colorProps === void 0 ? void 0 : colorProps.gray, colorProps === null || colorProps === void 0 ? void 0 : colorProps.gray, colorProps === null || colorProps === void 0 ? void 0 : colorProps.graySaturation);
+  var colors = _ref.theme.colors;
+  return (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    appearance: none;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin: 0;\n    min-width: 20px;\n    height: 20px;\n    border-radius: 50%;\n    border: 2px solid ", ";\n    transition: all ease 0.2s;\n    cursor: pointer;\n\n    + label {\n      color: ", ";\n      line-height: 20px;\n      cursor: pointer;\n    }\n\n    :hover {\n      border-color: ", ";\n    }\n\n    :disabled {\n      cursor: default;\n      border-color: ", ";\n      background-color: ", ";\n      + label {\n        color: ", ";\n        cursor: default;\n      }\n    }\n\n    :checked {\n      background-color: ", ";\n      border-color: ", ";\n      &:focus {\n        background-color: ", ";\n        border-color: ", ";\n        box-shadow: 0 0 0 2px ", ";\n      }\n      &:hover {\n        background-color: ", ";\n        border-color: ", ";\n      }\n      &:disabled {\n        background-color: ", ";\n        border-color: ", ";\n        + label {\n          color: ", ";\n          cursor: default;\n        }\n      }\n\n      &::after {\n        content: '';\n        width: 6px;\n        height: 6px;\n        background: #fff;\n        border-radius: 50%;\n      }\n    }\n  "])), colors.neutral.neutral2, colors.neutral.black, colors.primary.hover, colors.neutral.neutral1, colors.neutral.neutral1, colors.neutral.neutral2, colors.primary.default, colors.primary.default, colors.primary.focus, colors.primary.focus, colors.primary.disabled, colors.primary.hover, colors.primary.hover, colors.neutral.neutral2, colors.neutral.neutral2, colors.neutral.neutral4);
 });
 
 exports.Input = Input;
@@ -48,9 +43,8 @@ var ListWrapper = _styled.default.div(_templateObject6 || (_templateObject6 = _t
 exports.ListWrapper = ListWrapper;
 
 var ChoiceLabel = _styled.default.label(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref3) {
-  var colorProps = _ref3.colorProps,
-      theme = _ref3.theme;
-  return (0, _react.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    display: block;\n    font-weight: 500;\n    font-size: 16px;\n    line-height: 24px;\n    color: ", ";\n    margin-bottom: 16px;\n  "])), theme.colorMode === 'light' ? colorProps === null || colorProps === void 0 ? void 0 : colorProps.black : theme.colors.neutral.white);
+  var colors = _ref3.theme.colors;
+  return (0, _react.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    display: block;\n    font-weight: 500;\n    font-size: 16px;\n    line-height: 24px;\n    color: ", ";\n    margin-bottom: 16px;\n  "])), colors.neutral.black);
 });
 
 exports.ChoiceLabel = ChoiceLabel;
@@ -58,7 +52,7 @@ exports.ChoiceLabel = ChoiceLabel;
 var HelpText = _styled.default.span(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref4) {
   var theme = _ref4.theme,
       textColor = _ref4.textColor;
-  return (0, _react.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    font-size: ", ";\n    color: ", ";\n    font-weight: ", ";\n    display: block;\n    padding-left: 30px;\n    margin-top: 18px;\n  "])), theme.fontSizes.xxs, theme.colorMode === 'light' ? textColor : theme.colors.neutral.white, theme.fontWeight[500]);
+  return (0, _react.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    font-size: ", ";\n    color: ", ";\n    font-weight: 500;\n    display: block;\n    padding-left: 30px;\n    margin-top: 18px;\n  "])), theme.fontSizes.xxs, textColor);
 });
 
 exports.HelpText = HelpText;

package/dist/components/RadioInput/types.d.ts

@@ -1,61 +1,33 @@
-import { ChangeEvent, ChangeEventHandler, ReactNode, Ref } from 'react';
-export declare type FormRegister = {
-    onChange: ChangeEventHandler<HTMLInputElement>;
-    onBlur: ChangeEventHandler;
-    ref: Ref<any>;
-    name: string;
-};
-export declare type ColorProps = {
-    black: string;
-    gray: string;
-    grayLightness: string;
-    graySaturation: string;
-    focus: string;
-    focusChecked: string;
-    shadowLightness: string;
-    saturation: string;
-    saturationFocus: string;
-};
+import { ReactNode } from 'react';
 export interface IRadioInputProps {
     isDisabled?: boolean;
     name?: string;
     value: string;
     id: string;
-    children: ReactNode;
+    children?: ReactNode;
     color?: string;
     defaultChecked?: boolean;
     onChange?: (value: string) => void;
-    formRegister?: FormRegister;
 }
 export interface ChoiceListProps {
-    onChange: (value: string) => void;
+    onChangeValue?: (value: string) => void;
     label?: string;
-    value: string;
     defaultValue?: string;
     isDisabled?: boolean;
-    name: string;
+    radiosName: string;
     alignDirection?: 'column' | 'row';
     color?: string;
     helpText?: string;
     children: ReactNode;
-    formRegister?: FormRegister;
 }
 export declare type ChoiceListContext = {
-    handleRadioClick: (e: ChangeEvent<HTMLInputElement>) => void;
-    isRadioSelected: (value: string) => boolean;
+    handleRadioClick: (e: string) => void;
+    defaultValue?: string;
     groupName: string;
-    groupColor: string;
-    groupFormRegister?: FormRegister;
     isDisabled?: boolean;
 };
 export interface IStyledRadioInput {
-    color?: string;
-    colorProps?: ColorProps;
     textColor?: string;
     alignDirection?: 'column' | 'row';
-    disabledColor?: string;
-    disabledWithCheckedColor?: string;
-    disabledTextColor?: string;
-    disabledTextWithCheckedColor?: string;
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/components/RadioInput/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/RadioInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAExE,oBAAY,YAAY,GAAG;IACzB,QAAQ,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAC/C,MAAM,EAAE,kBAAkB,CAAC;IAC3B,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,oBAAY,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,MAAM,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,WAAW,gBAAgB;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B;AAED,oBAAY,iBAAiB,GAAG;IAC9B,gBAAgB,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC7D,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAC5C,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,YAAY,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4BAA4B,CAAC,EAAE,MAAM,CAAC;CACvC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/RadioInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,WAAW,gBAAgB;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,MAAM,WAAW,eAAe;IAC9B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,oBAAY,iBAAiB,GAAG;IAC9B,gBAAgB,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,iBAAiB;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;CACnC"}

package/dist/components/Skeleton/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,QAAA,MAAM,QAAQ,oCAAqC,cAAc,gBAEhE,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,QAAA,MAAM,QAAQ,oCAAqC,cAAc,gBAMhE,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/Skeleton/index.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = require("react");
-
 var _styles = require("./styles");
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -28,9 +26,10 @@ var Skeleton = function Skeleton(_ref) {
       isLoaded = _ref.isLoaded,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
-    children: isLoaded ? children : /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.SkeletonElement, _objectSpread({}, rest))
-  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.SkeletonElement, _objectSpread(_objectSpread({}, rest), {}, {
+    isLoaded: isLoaded,
+    children: children
+  }));
 };
 
 var _default = Skeleton;

package/dist/components/Skeleton/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/styles.ts"],"names":[],"mappings":";AAKA,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAIlD,eAAO,MAAM,eAAe;;;iJA0E1B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/styles.ts"],"names":[],"mappings":";AAKA,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAIlD,eAAO,MAAM,eAAe;;;iJAuF1B,CAAC"}

package/dist/components/Skeleton/styles.js

@@ -15,7 +15,7 @@ var _colorCheck = require("../../utils/colorCheck");
 
 var _invertColor = require("../../utils/invertColor");
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -34,7 +34,9 @@ var SkeletonElement = _styled.default.span(function (props) {
     wave: (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      overflow: hidden;\n      transform-origin: 0px 55%;\n\n      &::after {\n        content: '';\n        inset: 0px;\n        position: absolute;\n        animation: 1.6s linear 0.5s infinite normal none running move;\n        transform: translateX(-100%);\n        background: linear-gradient(\n          90deg,\n          transparent,\n          ", ",\n          transparent\n        );\n      }\n\n      @keyframes move {\n        0% {\n          transform: translateX(-100%);\n        }\n        40% {\n          transform: translateX(100%);\n        }\n        100% {\n          transform: translateX(100%);\n        }\n      }\n    "])), (0, _colorCheck.parseHexColorToRgba)(waveColor, waveColorOpacity)),
     pulse: (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      animation: 1.6s linear 0.5s infinite normal none running pulse;\n\n      @keyframes pulse {\n        0% {\n          opacity: 1;\n        }\n        50% {\n          opacity: 0.4;\n        }\n        100% {\n          opacity: 1;\n        }\n      }\n    "])))
   };
-  return (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display: inline-block;\n    position: relative;\n    background-color: ", ";\n    border-radius: ", ";\n    width: ", ";\n    height: ", ";\n\n    ", ";\n  "])), skeletonColor, borderRadiusByVariant[props.variant || 'text'], typeof props.width === 'number' ? props.width + 'px' : props.width || '100%', typeof props.height === 'number' ? props.height + 'px' : props.height || '1em', props.animation !== 'static' ? animationsCss[props.animation || 'wave'] : '');
+  var unloadedCss = (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display: block;\n    position: relative;\n    user-select: none;\n    pointer-events: none;\n    cursor: default;\n    background: padding-box ", ";\n    border-radius: ", ";\n    width: ", ";\n    height: ", ";\n    color: transparent;\n\n    ", ";\n  "])), skeletonColor, borderRadiusByVariant[props.variant || 'text'], typeof props.width === 'number' ? props.width + 'px' : props.width || '', typeof props.height === 'number' ? props.height + 'px' : props.height || '', props.animation !== 'static' ? animationsCss[props.animation || 'wave'] : '');
+  var loadedCss = (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    display: block;\n    background: transparent;\n\n    transition: all 300ms ease;\n  "])));
+  return props.isLoaded ? loadedCss : unloadedCss;
 });
 
 exports.SkeletonElement = SkeletonElement;

package/dist/components/Slider/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,QAAA,MAAM,MAAM,yFAUT,YAAY,gBA4Cd,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,QAAA,MAAM,MAAM,yFAUT,YAAY,gBAgDd,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/Slider/index.js

@@ -85,6 +85,9 @@ var Slider = function Slider(_ref) {
     onChange && onChange(sliderValue);
   }
 
+  (0, _react.useEffect)(function () {
+    setSliderValue(value);
+  }, [value]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.SliderContent, {
     direction: direction,
     fullSize: fullSize,

package/dist/shared/hooks/useDisableBodyScroll.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDisableBodyScroll.d.ts","sourceRoot":"","sources":["../../../src/shared/hooks/useDisableBodyScroll.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,oBAAoB,YAAa,OAAO,SAUpD,CAAC"}
+{"version":3,"file":"useDisableBodyScroll.d.ts","sourceRoot":"","sources":["../../../src/shared/hooks/useDisableBodyScroll.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,oBAAoB,YAAa,OAAO,SAWpD,CAAC"}

package/dist/shared/hooks/useDisableBodyScroll.js

@@ -10,8 +10,9 @@ var _react = require("react");
 var useDisableBodyScroll = function useDisableBodyScroll(disable) {
   (0, _react.useEffect)(function () {
     if (disable) {
+      var scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
+      document.body.style.paddingRight = "".concat(scrollBarWidth, "px");
       document.body.style.overflow = 'hidden';
-      document.body.style.paddingRight = '18px';
     } else {
       document.body.style.overflow = '';
       document.body.style.paddingRight = '';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pedidopago/ui",
-  "version": "1.3.10",
+  "version": "1.3.11",
   "description": "Quick build beatiful Pedido Pago apps",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",