@pedidopago/ui 1.7.22 → 1.7.23

package/dist/components/EmojiPicker/EmotePickerData/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/EmojiPicker/EmotePickerData/styles.ts"],"names":[],"mappings":";AAEA,eAAO,MAAM,wBAAwB;;;yGASpC,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;yGA8C9B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;yGAmD5B,CAAC;AAEF,eAAO,MAAM,cAAc;;;yGAY1B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/EmojiPicker/EmotePickerData/styles.ts"],"names":[],"mappings":";AAEA,eAAO,MAAM,wBAAwB;;;yGAUpC,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;yGA8C9B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;yGAmD5B,CAAC;AAEF,eAAO,MAAM,cAAc;;;yGAY1B,CAAC"}

package/dist/components/EmojiPicker/EmotePickerData/styles.js

@@ -8,47 +8,50 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-var EmotePickerDataContainer = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  max-height: 280px;\n  max-width: 510px;\n  border-radius: 0.5rem;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  border: 1px solid ", ";\n  box-shadow: ", ";\n"])), function (_ref) {
+var EmotePickerDataContainer = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  max-height: 280px;\n  max-width: 510px;\n  border-radius: 0.5rem;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  border: 1px solid ", ";\n  box-shadow: ", ";\n  background: ", "70;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.neutral.neutral1;
 }, function (_ref2) {
   var theme = _ref2.theme;
   return theme.shadow.level2;
-});
-exports.EmotePickerDataContainer = EmotePickerDataContainer;
-var EmoteContentHeader = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 2rem;\n\n  padding: 1em;\n\n  position: relative;\n  overflow-x: auto;\n\n  background: ", ";\n\n  & div {\n    display: flex;\n    align-items: center;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n  }\n\n  &::-webkit-scrollbar {\n    height: 0.25rem;\n  }\n\n  & button {\n    height: 1.5em;\n    padding: 0;\n    z-index: 1;\n  }\n\n  .background_selected_category {\n    width: 36px;\n    height: 3px;\n    left: 11px;\n    bottom: 6px;\n    transition: all ease 0.2s;\n    border-radius: 0.5rem;\n    background: ", ";\n    position: absolute;\n  }\n\n  @media screen and (max-width: ", ") {\n    border-radius: 0;\n  }\n"])), function (_ref3) {
+}, function (_ref3) {
   var theme = _ref3.theme;
   return theme.colors.neutral.white;
-}, function (_ref4) {
+});
+exports.EmotePickerDataContainer = EmotePickerDataContainer;
+var EmoteContentHeader = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 2rem;\n\n  padding: 1em;\n\n  position: relative;\n  overflow-x: auto;\n\n  background: ", ";\n\n  & div {\n    display: flex;\n    align-items: center;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n  }\n\n  &::-webkit-scrollbar {\n    height: 0.25rem;\n  }\n\n  & button {\n    height: 1.5em;\n    padding: 0;\n    z-index: 1;\n  }\n\n  .background_selected_category {\n    width: 36px;\n    height: 3px;\n    left: 11px;\n    bottom: 6px;\n    transition: all ease 0.2s;\n    border-radius: 0.5rem;\n    background: ", ";\n    position: absolute;\n  }\n\n  @media screen and (max-width: ", ") {\n    border-radius: 0;\n  }\n"])), function (_ref4) {
   var theme = _ref4.theme;
-  return theme.colors.tertiary.default;
+  return theme.colors.neutral.white;
 }, function (_ref5) {
   var theme = _ref5.theme;
-  return theme.colors.primary.default;
+  return theme.colors.tertiary.default;
 }, function (_ref6) {
   var theme = _ref6.theme;
+  return theme.colors.primary.default;
+}, function (_ref7) {
+  var theme = _ref7.theme;
   return theme.breakpoints.lg;
 });
 exports.EmoteContentHeader = EmoteContentHeader;
-var EmoteContentBody = _styled.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  padding: 0em 1em;\n  background: ", "30;\n  flex-wrap: wrap;\n  gap: 0.25em;\n\n  max-height: 12.75em;\n  overflow-y: auto;\n\n  .virtual_column {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 42px;\n    height: 42px;\n  }\n\n  #intersection_emoji {\n    position: absolute;\n    bottom: 0px;\n    height: 1px;\n    width: 90%;\n  }\n\n  ::-webkit-scrollbar {\n    width: 0.25em;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n  }\n\n  ::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n\n  .container_emojis {\n    ::-webkit-scrollbar {\n      width: 4px;\n      height: 4px;\n    }\n\n    ::-webkit-scrollbar-thumb {\n      background: ", ";\n    }\n\n    ::-webkit-scrollbar-thumb:hover {\n      background: ", ";\n    }\n  }\n"])), function (_ref7) {
-  var theme = _ref7.theme;
-  return theme.colors.neutral.neutral1;
-}, function (_ref8) {
+var EmoteContentBody = _styled.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  padding: 0em 1em;\n  background: ", "30;\n  flex-wrap: wrap;\n  gap: 0.25em;\n\n  max-height: 12.75em;\n  overflow-y: auto;\n\n  .virtual_column {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 42px;\n    height: 42px;\n  }\n\n  #intersection_emoji {\n    position: absolute;\n    bottom: 0px;\n    height: 1px;\n    width: 90%;\n  }\n\n  ::-webkit-scrollbar {\n    width: 0.25em;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n  }\n\n  ::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n\n  .container_emojis {\n    ::-webkit-scrollbar {\n      width: 4px;\n      height: 4px;\n    }\n\n    ::-webkit-scrollbar-thumb {\n      background: ", ";\n    }\n\n    ::-webkit-scrollbar-thumb:hover {\n      background: ", ";\n    }\n  }\n"])), function (_ref8) {
   var theme = _ref8.theme;
-  return theme.colors.tertiary.default;
+  return theme.colors.neutral.neutral1;
 }, function (_ref9) {
   var theme = _ref9.theme;
-  return theme.colors.tertiary.hover;
+  return theme.colors.tertiary.default;
 }, function (_ref10) {
   var theme = _ref10.theme;
-  return theme.colors.tertiary.default;
+  return theme.colors.tertiary.hover;
 }, function (_ref11) {
   var theme = _ref11.theme;
+  return theme.colors.tertiary.default;
+}, function (_ref12) {
+  var theme = _ref12.theme;
   return theme.colors.tertiary.hover;
 });
 exports.EmoteContentBody = EmoteContentBody;
-var EmoteContainer = _styled.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  border-radius: 8px;\n  padding: 0.25rem;\n\n  :hover {\n    cursor: pointer;\n    background: ", ";\n  }\n"])), function (_ref12) {
-  var theme = _ref12.theme;
+var EmoteContainer = _styled.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  border-radius: 8px;\n  padding: 0.25rem;\n\n  :hover {\n    cursor: pointer;\n    background: ", ";\n  }\n"])), function (_ref13) {
+  var theme = _ref13.theme;
   return theme.colors.neutral.neutral1;
 });
 exports.EmoteContainer = EmoteContainer;

package/dist/components/NewSelect/Examples/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/NewSelect/Examples/index.tsx"],"names":[],"mappings":";AAUA,wBAAgB,qCAAqC,gBAuCpD;AAED,wBAAgB,oCAAoC,gBA6BnD;AACD,wBAAgB,6BAA6B,gBAiC5C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/NewSelect/Examples/index.tsx"],"names":[],"mappings":";AAUA,wBAAgB,qCAAqC,gBAmDpD;AAED,wBAAgB,oCAAoC,gBA4BnD;AACD,wBAAgB,6BAA6B,gBAiC5C"}

package/dist/components/NewSelect/Examples/index.js

@@ -12,6 +12,7 @@ var _ = require("..");
 var _SelectInputSearch = require("../components/SelectInputSearch");
 var _SelectItem = require("../components/SelectItem");
 var _Chip = require("../components/Chip");
+var _Skeleton = _interopRequireDefault(require("../../Skeleton"));
 var _constants = require("./constants");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -20,7 +21,7 @@ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructur
 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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } /* eslint-disable no-console */
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function MultipleSelectExampleWithDefaultValue() {
   var _useState = (0, _react.useState)(['option1', 'option2']),
     _useState2 = _slicedToArray(_useState, 2),
@@ -30,22 +31,37 @@ function MultipleSelectExampleWithDefaultValue() {
     _useState4 = _slicedToArray(_useState3, 2),
     selectedOption = _useState4[0],
     setSelectedOption = _useState4[1];
+  var _useState5 = (0, _react.useState)(true),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isLoading = _useState6[0],
+    setIsLoading = _useState6[1];
+  (0, _react.useEffect)(function () {
+    setTimeout(function () {
+      setIsLoading(false);
+    }, 2000);
+  }, []);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Flex.default, {
     direction: "column",
     spacing: "1rem",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.NewSelect, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.NewSelect, {
       label: "Multiplo",
       multiple: true,
       value: selectedMultipleOptions,
       onChange: function onChange(value) {
         setSelectedMultipleOption(value);
       },
-      children: _constants.optionsSelectExample.map(function (option, index) {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectItem.SelectItem, {
+        value: "default-option",
+        children: "Op\xE7\xE3o padr\xE3o"
+      }), isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
+        height: '100px',
+        isLoaded: false
+      }) : _constants.optionsSelectExample.map(function (option, index) {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectItem.SelectItem, {
           value: option.value,
           children: option.label
         }, index);
-      })
+      })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.NewSelect, {
       label: "Single",
       value: selectedOption,
@@ -66,24 +82,23 @@ function MultipleSelectExampleWithDefaultValue() {
   });
 }
 function MultipleSelectExampleWithInputSearch() {
-  var _useState5 = (0, _react.useState)(''),
-    _useState6 = _slicedToArray(_useState5, 2),
-    searchInput = _useState6[0],
-    setSearchInput = _useState6[1];
+  var _useState7 = (0, _react.useState)(''),
+    _useState8 = _slicedToArray(_useState7, 2),
+    searchInput = _useState8[0],
+    setSearchInput = _useState8[1];
   var filteredOptions = _constants.optionsSelectExample.filter(function (option) {
     return option.label.includes(searchInput);
   });
-  var _useState7 = (0, _react.useState)(''),
-    _useState8 = _slicedToArray(_useState7, 2),
-    selectedOption = _useState8[0],
-    setSelectedOption = _useState8[1];
+  var _useState9 = (0, _react.useState)(''),
+    _useState10 = _slicedToArray(_useState9, 2),
+    selectedOption = _useState10[0],
+    setSelectedOption = _useState10[1];
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.NewSelect, {
       label: "Com input search",
       value: selectedOption,
       onChange: function onChange(value) {
         setSelectedOption(value);
-        console.log(value);
       },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectInputSearch.SelectInputSearch, {
         onChange: function onChange(event) {
@@ -101,17 +116,17 @@ function MultipleSelectExampleWithInputSearch() {
   });
 }
 function MultipleSelectExampleWithChip() {
-  var _useState9 = (0, _react.useState)(''),
-    _useState10 = _slicedToArray(_useState9, 2),
-    searchInput = _useState10[0],
-    setSearchInput = _useState10[1];
+  var _useState11 = (0, _react.useState)(''),
+    _useState12 = _slicedToArray(_useState11, 2),
+    searchInput = _useState12[0],
+    setSearchInput = _useState12[1];
   var filteredOptions = _constants.optionsSelectExample.filter(function (option) {
     return option.label.toLowerCase().includes(searchInput.toLowerCase());
   });
-  var _useState11 = (0, _react.useState)([]),
-    _useState12 = _slicedToArray(_useState11, 2),
-    selectedOption = _useState12[0],
-    setSelectedOption = _useState12[1];
+  var _useState13 = (0, _react.useState)([]),
+    _useState14 = _slicedToArray(_useState13, 2),
+    selectedOption = _useState14[0],
+    setSelectedOption = _useState14[1];
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.NewSelect, {
       label: "Com input search",

package/dist/components/NewSelect/multiple/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/NewSelect/multiple/index.tsx"],"names":[],"mappings":";AAmBA,OAAO,EAAgB,yBAAyB,EAAe,MAAM,UAAU,CAAC;AAGhF,wBAAgB,iBAAiB,CAAC,EAChC,KAAU,EACV,WAAgB,EAChB,KAAK,EACL,UAAU,EACV,OAAO,EACP,QAAQ,EACR,KAAK,EACL,OAAO,EACP,MAAM,EACN,aAAa,EACb,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,yBAAyB,eAiL3B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/NewSelect/multiple/index.tsx"],"names":[],"mappings":";AAmBA,OAAO,EAAgB,yBAAyB,EAAe,MAAM,UAAU,CAAC;AAGhF,wBAAgB,iBAAiB,CAAC,EAChC,KAAU,EACV,WAAgB,EAChB,KAAK,EACL,UAAU,EACV,OAAO,EACP,QAAQ,EACR,KAAK,EACL,OAAO,EACP,MAAM,EACN,aAAa,EACb,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,yBAAyB,eAuL3B"}

package/dist/components/NewSelect/multiple/index.js

@@ -63,15 +63,16 @@ function NewMultipleSelect(_ref) {
     options = _useState6[0],
     setOptions = _useState6[1];
   (0, _react.useEffect)(function () {
-    var _options$, _optionsModalRef$curr;
-    if (options !== null && options !== void 0 && (_options$ = options[0]) !== null && _options$ !== void 0 && _options$.value) return;
+    var _optionsModalRef$curr;
     var childs = (_optionsModalRef$curr = optionsModalRef.current) === null || _optionsModalRef$curr === void 0 ? void 0 : _optionsModalRef$curr.childNodes;
     var newOptions = [];
     _react.Children.forEach(children, function (child, index) {
-      if (childs !== null && childs !== void 0 && childs[index].classList.contains('select-item')) {
+      var _childs$index, _childs$index$classLi;
+      if (childs !== null && childs !== void 0 && (_childs$index = childs[index]) !== null && _childs$index !== void 0 && (_childs$index$classLi = _childs$index.classList) !== null && _childs$index$classLi !== void 0 && _childs$index$classLi.contains('select-item')) {
+        var _child$props, _childs$index2;
         newOptions.push({
-          value: child.props.value,
-          label: childs[index].innerText
+          value: child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.value,
+          label: childs === null || childs === void 0 ? void 0 : (_childs$index2 = childs[index]) === null || _childs$index2 === void 0 ? void 0 : _childs$index2.innerText
         });
       }
     });
@@ -147,7 +148,12 @@ function NewMultipleSelect(_ref) {
     var newOptions = options.filter(function (option) {
       return value === null || value === void 0 ? void 0 : value.includes(option.value);
     });
-    setSelectedOptions(newOptions);
+    var newSelectedOptions = selectedOptions.filter(function (selectedOption) {
+      return newOptions.every(function (newOption) {
+        return newOption.value !== selectedOption.value;
+      });
+    });
+    setSelectedOptions([].concat(_toConsumableArray(newSelectedOptions), _toConsumableArray(newOptions)));
   }, [value, options]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     ref: selectRef,
@@ -208,19 +214,24 @@ function NewMultipleSelect(_ref) {
             top: positionsSelect.top
           },
           children: _react.Children.map(children, function (child) {
+            var _child$type, _child$type2;
+            var childTypeName = (child === null || child === void 0 ? void 0 : (_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.name) || (child === null || child === void 0 ? void 0 : (_child$type2 = child.type) === null || _child$type2 === void 0 ? void 0 : _child$type2.displayName);
+            var isSelectItemElement = childTypeName === 'SelectItem';
+            if (! /*#__PURE__*/(0, _react.isValidElement)(child) || !isSelectItemElement) return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              children: child
+            });
+            var childElement = child;
             var isSelectedOption = selectedOptions.find(function (option) {
-              var _child$props;
-              return option.value === ((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.value);
+              var _childElement$props;
+              return option.value === ((_childElement$props = childElement.props) === null || _childElement$props === void 0 ? void 0 : _childElement$props.value);
             });
-            var childTypeName = child.type.name || child.type.displayName;
-            var isSelectItemElement = /*#__PURE__*/(0, _react.isValidElement)(child) && childTypeName === 'SelectItem';
-            var className = (0, _classnames.default)(isSelectItemElement ? 'select-item' : '', {
+            var className = (0, _classnames.default)('select-item', {
               selected: isSelectedOption
             });
-            return /*#__PURE__*/(0, _react.cloneElement)(child, {
+            return /*#__PURE__*/(0, _react.cloneElement)(childElement, {
               onClick: function onClick(event) {
                 if (event.currentTarget.classList.contains('select-item')) {
-                  changeMultipleOption(child.props.value);
+                  changeMultipleOption(childElement.props.value);
                 }
               },
               className: className

package/dist/components/NewSelect/single/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/NewSelect/single/index.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAgB,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAEjE,wBAAgB,eAAe,CAAC,CAAC,EAAE,EACjC,KAAU,EACV,WAAgB,EAChB,KAAK,EACL,UAAU,EACV,OAAO,EACP,QAAQ,EACR,KAAK,EACL,OAAO,EACP,MAAM,EACN,QAAQ,EACR,aAAa,EACb,GAAG,IAAI,EACR,EAAE,uBAAuB,CAAC,CAAC,CAAC,eAgI5B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/NewSelect/single/index.tsx"],"names":[],"mappings":";AAmBA,OAAO,EAAgB,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAEjE,wBAAgB,eAAe,CAAC,CAAC,EAAE,EACjC,KAAU,EACV,WAAgB,EAChB,KAAK,EACL,UAAU,EACV,OAAO,EACP,QAAQ,EACR,KAAK,EACL,OAAO,EACP,MAAM,EACN,QAAQ,EACR,aAAa,EACb,GAAG,IAAI,EACR,EAAE,uBAAuB,CAAC,CAAC,CAAC,eAwI5B"}

package/dist/components/NewSelect/single/index.js

@@ -65,10 +65,12 @@ function NewSingleSelect(_ref) {
     var childs = (_optionsModalRef$curr = optionsModalRef.current) === null || _optionsModalRef$curr === void 0 ? void 0 : _optionsModalRef$curr.childNodes;
     var newOptions = [];
     _react.Children.forEach(children, function (child, index) {
-      if (childs !== null && childs !== void 0 && childs[index].classList.contains('select-item')) {
+      var _childs$index, _childs$index$classLi;
+      if (childs !== null && childs !== void 0 && (_childs$index = childs[index]) !== null && _childs$index !== void 0 && (_childs$index$classLi = _childs$index.classList) !== null && _childs$index$classLi !== void 0 && _childs$index$classLi.contains('select-item')) {
+        var _child$props, _childs$index2;
         newOptions.push({
-          value: child.props.value,
-          label: childs[index].innerText
+          value: child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.value,
+          label: childs === null || childs === void 0 ? void 0 : (_childs$index2 = childs[index]) === null || _childs$index2 === void 0 ? void 0 : _childs$index2.innerText
         });
       }
     });
@@ -154,12 +156,19 @@ function NewSingleSelect(_ref) {
             top: positionsSelect.top
           },
           children: _react.Children.map(children, function (child) {
-            return /*#__PURE__*/(0, _react.cloneElement)(child, {
+            var _child$type, _child$type2;
+            var childTypeName = (child === null || child === void 0 ? void 0 : (_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.name) || (child === null || child === void 0 ? void 0 : (_child$type2 = child.type) === null || _child$type2 === void 0 ? void 0 : _child$type2.displayName);
+            var isSelectItemElement = childTypeName === 'SelectItem';
+            if (! /*#__PURE__*/(0, _react.isValidElement)(child) || !isSelectItemElement) return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              children: child
+            });
+            var childElement = child;
+            return /*#__PURE__*/(0, _react.cloneElement)(childElement, {
               onClick: function onClick(event) {
                 if (event.currentTarget.classList.contains('select-item')) {
                   setIsOpenOptions(false);
-                  setSelectedOption(child.props.value);
-                  onChange === null || onChange === void 0 ? void 0 : onChange(child.props.value);
+                  setSelectedOption(childElement.props.value);
+                  onChange === null || onChange === void 0 ? void 0 : onChange(childElement.props.value);
                 }
               }
             });

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/styles.ts"],"names":[],"mappings":";AAKA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yGAoCzB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/styles.ts"],"names":[],"mappings":";AAMA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yGAqCzB,CAAC"}

package/dist/components/Spinner/styles.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.StyledSpinner = void 0;
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _getColorValue = require("../../utils/getColorValue");
+var _colorCheck = require("../../utils/colorCheck");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var StyledSpinner = _styled.default.div(function (_ref) {
   var size = _ref.size,
@@ -14,10 +15,9 @@ var StyledSpinner = _styled.default.div(function (_ref) {
     emptyColor = _ref.emptyColor,
     thickness = _ref.thickness,
     speed = _ref.speed;
-  var spinnerColor = (0, _getColorValue.getColorValue)(color || 'primary.default', theme);
   var spinnerEmptyColor = (0, _getColorValue.getColorValue)(emptyColor || 'transparent', theme, 'transparent');
   var modifiedSize = size === 'sm' ? '16px' : size === 'md' ? '24px' : size === 'lg' ? '32px' : size === 'xl' ? '48px' : '24px';
   var borderColor = spinnerEmptyColor === 'currentColor' ? 'transparent' : theme.colors.neutral.neutral1;
-  return "\n    display: inline-block;\n    width: ".concat(modifiedSize, ";\n    height: ").concat(modifiedSize, ";\n    border: ").concat(thickness || '4px', " solid ").concat(spinnerColor, ";\n    border-radius: 9999999px;\n    border-left-color: ").concat(borderColor, ";\n    border-bottom-color: ").concat(borderColor, ";\n    animation: spin ").concat(speed || '0.45s', " linear infinite;\n\n    @keyframes spin {\n      to {\n        transform: rotate(360deg);\n      }\n    }\n  ");
+  return "\n    display: inline-block;\n    width: ".concat(modifiedSize, ";\n    height: ").concat(modifiedSize, ";\n    border: ").concat(thickness || '4px', " solid ").concat(color ? (0, _colorCheck.stripThemeColors)(color || '', theme.colors) || color : theme.colors.primary.default, ";\n    border-radius: 9999999px;\n    border-left-color: ").concat(borderColor, ";\n    border-bottom-color: ").concat(borderColor, ";\n    animation: spin ").concat(speed || '0.45s', " linear infinite;\n\n    @keyframes spin {\n      to {\n        transform: rotate(360deg);\n      }\n    }\n  ");
 });
 exports.StyledSpinner = StyledSpinner;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/styles.ts"],"names":[],"mappings":";AAMA,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE5F,eAAO,MAAM,aAAa;;;;;yGAiBzB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;qHAqErB,CAAC;AAEF,eAAO,MAAM,aAAa;;;2GAGzB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;yGAI3B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;6HAgC9B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;YACpB,OAAO;yGAGhB,CAAC;AAEF,eAAO,MAAM,YAAY;;;iNAqBvB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/styles.ts"],"names":[],"mappings":";AAMA,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE5F,eAAO,MAAM,aAAa;;;;;yGAazB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;qHA+DrB,CAAC;AAEF,eAAO,MAAM,aAAa;;;2GAGzB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;yGAI3B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;6HAgC9B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;YACpB,OAAO;yGAGhB,CAAC;AAEF,eAAO,MAAM,YAAY;;;iNAqBvB,CAAC"}

package/dist/components/Tabs/styles.js

@@ -14,11 +14,8 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 var TabsContainer = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n\n  > div[role='tablist'] {\n    width: ", ";\n    border-bottom: 2px solid\n      ", ";\n  }\n"])), function (_ref) {
   var fullWidth = _ref.fullWidth;
   return fullWidth ? '100%' : 'fit-content';
-}, function (props) {
-  return {
-    light: props.theme.colors.neutral.neutral1,
-    dark: props.theme.colors.neutral.neutral6
-  }[props.theme.colorMode];
+}, function () {
+  return (0, _customColorMode.customColorMode)('rgba(0, 0, 0, 0.2)', 'rgba(255, 255, 255, 0.4)');
 });
 exports.TabsContainer = TabsContainer;
 var TabButton = _styled.default.button(function (_ref2) {
@@ -31,7 +28,7 @@ var TabButton = _styled.default.button(function (_ref2) {
   var colorProps = (0, _colorToGray.convertColor)((0, _getColorValue.getColorValue)(indicatorColor || 'primary.default', theme));
   var grayColor = colorProps.neutral2;
   var whiteColor = colorProps.neutral1;
-  return "\n  display: flex;\n  ".concat(squeeze && 'flex: 1;', "\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 1rem 2rem;\n\n  font-family: inherit;\n  font-weight: 600;\n  font-size: ").concat(theme.fontSizes.xxs, ";\n\n  color: ").concat(active ? (0, _customColorMode.customColorMode)("hsl(".concat(grayColor[0], ", ").concat(grayColor[1], "%, 30%)"), "hsl(".concat(whiteColor[0], ", ").concat(whiteColor[1], "%, ").concat(whiteColor[2], "%)")) : disabled ? theme.colors.neutral.neutral1 : "hsl(".concat(grayColor[0], ", ").concat(grayColor[1], "%, 75%)"), ";\n  background: transparent;\n\n  border: none;\n  border-radius: 0;\n  outline: 0;\n  margin: 0;\n\n  cursor: ").concat(disabled ? 'default' : 'pointer', ";\n  vertical-align: middle;\n\n  user-select: none;\n  appearance: none;\n  text-decoration: none;\n\n  transition: all 250ms ease 0ms;\n\n  & > span {\n    ").concat(active && "\n        color: ".concat((0, _getColorValue.getColorValue)(textColor || 'primary.default', theme), ";\n      "), "\n  }\n\n  &:hover {\n    color: ").concat(disabled ? theme.colors.neutral.neutral1 : theme.colorMode === 'light' ? "hsl(".concat(grayColor[0], ", ").concat(grayColor[1], "%, 30%)") : "hsl(".concat(whiteColor[0], ", ").concat(whiteColor[1], "%, 88%)"), ";\n    background: ").concat(disabled ? 'transparent' : 'rgba(0, 0, 0, 0.04)', ";\n  }\n\n  &:active {\n    background: rgba(0, 0, 0, .1);\n  }\n");
+  return "\n  display: flex;\n  ".concat(squeeze && 'flex: 1;', "\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 1rem 2rem;\n\n  font-family: inherit;\n  font-weight: 600;\n  font-size: ").concat(theme.fontSizes.xxs, ";\n\n  color: ").concat(active ? (0, _customColorMode.customColorMode)("hsl(".concat(grayColor[0], ", ").concat(grayColor[1], "%, 30%)"), "hsl(".concat(whiteColor[0], ", ").concat(whiteColor[1], "%, ").concat(whiteColor[2], "%)")) : disabled ? theme.colors.neutral.neutral1 : "hsl(".concat(grayColor[0], ", ").concat(grayColor[1], "%, 75%)"), ";\n  background: transparent;\n\n  border: none;\n  border-radius: 0;\n  outline: 0;\n  margin: 0;\n\n  cursor: ").concat(disabled ? 'default' : 'pointer', ";\n  vertical-align: middle;\n\n  user-select: none;\n  appearance: none;\n  text-decoration: none;\n\n  transition: all 250ms ease 0ms;\n\n  & > span {\n    ").concat(active && "\n        color: ".concat((0, _getColorValue.getColorValue)(textColor || 'primary.default', theme), ";\n      "), "\n  }\n\n  &:hover {\n    color: ").concat(disabled ? 'none' : theme.colors.neutral.black, ";\n    background: ").concat(disabled ? 'transparent' : 'rgba(0, 0, 0, 0.04)', ";\n  }\n\n  &:active {\n    background: rgba(0, 0, 0, .1);\n  }\n");
 });
 exports.TabButton = TabButton;
 var TabButtonIcon = _styled.default.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  line-height: 0;\n  transition: all 250ms ease 0ms;\n"])));

package/dist/shared/hooks/useSystemTheme.d.ts

@@ -1,2 +1,5 @@
-export declare const useSystemTheme: () => 'dark' | 'light';
+export declare const useSystemTheme: () => {
+    theme: "light" | "dark";
+    isFirstRender: boolean;
+};
 //# sourceMappingURL=useSystemTheme.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useSystemTheme.d.ts","sourceRoot":"","sources":["../../../src/shared/hooks/useSystemTheme.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,QAAO,MAAM,GAAG,OAmB1C,CAAC"}
+{"version":3,"file":"useSystemTheme.d.ts","sourceRoot":"","sources":["../../../src/shared/hooks/useSystemTheme.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc;;;CAuB1B,CAAC"}

package/dist/shared/hooks/useSystemTheme.js

@@ -16,10 +16,12 @@ var useSystemTheme = function useSystemTheme() {
     _useState2 = _slicedToArray(_useState, 2),
     theme = _useState2[0],
     setTheme = _useState2[1];
+  var isFirstRender = (0, _react.useRef)(true);
   (0, _react.useEffect)(function () {
     var handleThemeChange = function handleThemeChange(event) {
       var isDarkMode = event.matches;
       setTheme(isDarkMode ? 'dark' : 'light');
+      isFirstRender.current = false;
     };
     var prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)');
     setTheme(prefersDarkMode.matches ? 'dark' : 'light');
@@ -28,6 +30,9 @@ var useSystemTheme = function useSystemTheme() {
       prefersDarkMode.removeEventListener('change', handleThemeChange);
     };
   }, []);
-  return theme;
+  return {
+    theme: theme,
+    isFirstRender: isFirstRender.current
+  };
 };
 exports.useSystemTheme = useSystemTheme;

package/dist/shared/theme/contexts/ThemeContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../../../src/shared/theme/contexts/ThemeContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAuB,MAAM,OAAO,CAAC;AAStE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAKlD,KAAK,iBAAiB,GAAG;IACvB,KAAK,EAAE,gBAAgB,CAAC;IACxB,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC;AAEF,KAAK,kBAAkB,GAAG;IACxB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,gBAAgB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACpC,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,YAAY,4CAAyC,CAAC;AAEnE,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,gBAAgB,EAAE,EAAE,kBAAkB,eA4D1F"}
+{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../../../src/shared/theme/contexts/ThemeContext.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiB,SAAS,EAAuB,MAAM,OAAO,CAAC;AAStE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAKlD,KAAK,iBAAiB,GAAG;IACvB,KAAK,EAAE,gBAAgB,CAAC;IACxB,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC;AAEF,KAAK,kBAAkB,GAAG;IACxB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,gBAAgB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACpC,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,YAAY,4CAAyC,CAAC;AAEnE,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,gBAAgB,EAAE,EAAE,kBAAkB,eA8D1F"}

package/dist/shared/theme/contexts/ThemeContext.js

@@ -26,7 +26,7 @@ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructur
 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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } /* eslint-disable no-console */
 var ThemeContext = /*#__PURE__*/(0, _react.createContext)({});
 exports.ThemeContext = ThemeContext;
 function PPUIThemeProvider(_ref) {
@@ -38,7 +38,7 @@ function PPUIThemeProvider(_ref) {
     currentTheme = _useState2[0],
     setCurrentTheme = _useState2[1];
   var systemTheme = (0, _useSystemTheme.useSystemTheme)();
-  var _useState3 = (0, _react.useState)(initialColorMode || systemTheme),
+  var _useState3 = (0, _react.useState)(initialColorMode || systemTheme.theme),
     _useState4 = _slicedToArray(_useState3, 2),
     colorMode = _useState4[0],
     setColorMode = _useState4[1];
@@ -63,8 +63,8 @@ function PPUIThemeProvider(_ref) {
   (0, _react.useEffect)(function () {
     if (initialColorMode) {
       changeColorMode(initialColorMode);
-    } else {
-      changeColorMode(systemTheme);
+    } else if (!systemTheme.isFirstRender) {
+      changeColorMode(systemTheme.theme);
     }
   }, [initialColorMode, systemTheme]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ThemeContext.Provider, {

package/dist/utils/customColorMode.d.ts

@@ -1,2 +1,2 @@
-export declare function customColorMode(light: string, dark: string): string;
+export declare function customColorMode<L, D>(light: L, dark: D): L | D;
 //# sourceMappingURL=customColorMode.d.ts.map

package/dist/utils/customColorMode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"customColorMode.d.ts","sourceRoot":"","sources":["../../src/utils/customColorMode.ts"],"names":[],"mappings":"AAEA,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,UAI1D"}
+{"version":3,"file":"customColorMode.d.ts","sourceRoot":"","sources":["../../src/utils/customColorMode.ts"],"names":[],"mappings":"AAEA,wBAAgB,eAAe,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,SAItD"}

package/dist/utils/getColorValue.js

@@ -17,7 +17,7 @@ var _colorCheck = require("../utils/colorCheck");
 var getColorValue = function getColorValue(color, theme, defaultValue) {
   if ((0, _colorCheck.isHexColor)(color) || (0, _colorCheck.isRgbHslColor)(color)) return color;
   var colorIsThemeColor = theme && (0, _colorCheck.stripThemeColors)(color, theme.colors);
-  return colorIsThemeColor || defaultValue || 'inherit';
+  return colorIsThemeColor || color || defaultValue || 'inherit';
 };
 exports.getColorValue = getColorValue;
 var getThemeHex = function getThemeHex(path, obj) {

package/package.json

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