@pedidopago/ui 1.7.22 → 1.7.24

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":";AAsBA,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,eAqI5B"}

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

@@ -8,12 +8,14 @@ var _react = require("react");
 var _Flex = _interopRequireDefault(require("../../Flex"));
 var _Icon = _interopRequireDefault(require("../../Icon"));
 var _ReactPortal = require("../../ReactPortal");
+var _SelectItem = require("../components/SelectItem");
 var _useReposition = require("../../../shared/hooks/useReposition");
 var _useOnClickOutside = require("../../../shared/hooks/useOnClickOutside");
 var _styles = require("../components/OptionsSelect/styles");
 var _styles2 = require("../styles");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["label", "placeholder", "alert", "helperText", "variant", "children", "value", "onClose", "onOpen", "onChange", "renderOptions"];
+/* eslint-disable no-console */
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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."); }
@@ -65,10 +67,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 +158,17 @@ function NewSingleSelect(_ref) {
             top: positionsSelect.top
           },
           children: _react.Children.map(children, function (child) {
-            return /*#__PURE__*/(0, _react.cloneElement)(child, {
+            var isSelectItemElement = child.type === _SelectItem.SelectItem;
+            if (! /*#__PURE__*/(0, _react.isValidElement)(child) || !isSelectItemElement) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+              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/Skeleton/styles.d.ts.map

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

package/dist/components/Skeleton/styles.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.SkeletonElement = void 0;
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _react = require("@emotion/react");
+var _customColorMode = require("../../utils/customColorMode");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 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) } })); }
@@ -16,10 +17,10 @@ var SkeletonElement = _styled.default.div(function (props) {
     rectangle: '0'
   };
   var animationsCss = {
-    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    "])), props.theme.colors.neutral.neutral1),
+    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, _customColorMode.customColorMode)(props.theme.colors.neutral.neutral1, props.theme.colors.neutral.neutral2)),
     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    "])))
   };
-  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 ", "70;\n    border-radius: ", ";\n    height: ", ";\n    color: transparent;\n\n    ", ";\n\n    * {\n      visibility: hidden;\n      color: transparent;\n    }\n  "])), props.theme.colors.neutral.neutral1, borderRadiusByVariant[props.variant || 'text'], typeof props.height === 'number' ? props.height + 'px' : props.height || '', 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      ", "70;\n    border-radius: ", ";\n    height: ", ";\n    color: transparent;\n\n    ", ";\n\n    * {\n      visibility: hidden;\n      color: transparent;\n    }\n  "])), (0, _customColorMode.customColorMode)(props.theme.colors.neutral.neutral1, props.theme.colors.neutral.neutral2), borderRadiusByVariant[props.variant || 'text'], 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 (0, _react.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    width: ", ";\n\n    ", "\n  "])), props.fullWidth ? '100%' : typeof props.width === 'number' ? props.width + 'px' : props.width || '', props.isLoaded ? loadedCss : unloadedCss);
 });

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/Table/components/MenuItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/components/MenuItem.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,SAAS,eAqBhF"}
+{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/components/MenuItem.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAIrC,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,SAAS,eA+BhF"}

package/dist/components/Table/components/MenuItem.js

@@ -5,10 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MenuItem = MenuItem;
 var _react = require("react");
+var _framerMotion = require("framer-motion");
 var _useKeyPress = require("../../../shared/hooks/useKeyPress");
 var _useOnClickOutside = require("../../../shared/hooks/useOnClickOutside");
 var _styles = require("../styles");
+var _animations = require("./animations");
 var _jsxRuntime = require("react/jsx-runtime");
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+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) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function MenuItem(_ref) {
   var items = _ref.items,
     isOpen = _ref.isOpen,
@@ -22,21 +30,30 @@ function MenuItem(_ref) {
   (0, _useKeyPress.useKeyPress)('Escape', function () {
     return onClickOutside && onClickOutside();
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.MenuItemContainer, {
-    ref: menuRef,
-    isOpen: isOpen,
-    posTop: top,
-    posRight: right,
-    children: items.map(function (_ref2, index) {
-      var label = _ref2.label,
-        handler = _ref2.handler;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.MenuItemContent, {
-        tabIndex: 0,
-        onClick: function onClick() {
-          handler && handler();
-        },
-        children: label
-      }, index);
-    })
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_framerMotion.AnimatePresence, {
+    mode: "wait",
+    children: isOpen && /*#__PURE__*/(0, _react.createElement)(_framerMotion.motion.div, _objectSpread(_objectSpread({
+      style: {
+        position: 'absolute',
+        right: '0'
+      }
+    }, _animations.tableActionsAnimation), {}, {
+      key: "actions_table_row_motion"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.MenuItemContainer, {
+      ref: menuRef,
+      posTop: top,
+      posRight: right,
+      children: items.map(function (_ref2, index) {
+        var label = _ref2.label,
+          handler = _ref2.handler;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.MenuItemContent, {
+          tabIndex: 0,
+          onClick: function onClick() {
+            handler && handler();
+          },
+          children: label
+        }, index);
+      })
+    }))
   });
 }

package/dist/components/Table/components/animations.d.ts

@@ -0,0 +1,3 @@
+import { MotionProps } from 'framer-motion';
+export declare const tableActionsAnimation: MotionProps;
+//# sourceMappingURL=animations.d.ts.map

package/dist/components/Table/components/animations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animations.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/components/animations.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,eAAO,MAAM,qBAAqB,EAAE,WAKnC,CAAC"}

package/dist/components/Table/components/animations.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tableActionsAnimation = void 0;
+var tableActionsAnimation = {
+  initial: {
+    opacity: 0,
+    bottom: -15
+  },
+  exit: {
+    opacity: 0,
+    bottom: -15
+  },
+  animate: {
+    opacity: 1,
+    bottom: -5
+  },
+  transition: {
+    duration: 0.1
+  }
+};
+exports.tableActionsAnimation = tableActionsAnimation;

package/dist/components/Table/index.d.ts

@@ -1,4 +1,4 @@
 import { ComponentPropsWithoutRef } from 'react';
 import { ITableProps } from './types';
-export declare function Table({ selectable, primaryActions, secondaryActions, header, rows, isLoading, skeletonRows, skeletonHeight, ...rest }: ITableProps & ComponentPropsWithoutRef<'table'>): JSX.Element;
+export declare function Table({ selectable, primaryActions, secondaryActions, header, rows, isLoading, skeletonRows, skeletonHeight, actionLabel, ...rest }: ITableProps & ComponentPropsWithoutRef<'table'>): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAkD,MAAM,OAAO,CAAC;AAoBjG,OAAO,EAAE,WAAW,EAAkB,MAAM,SAAS,CAAC;AAMtD,wBAAgB,KAAK,CAAC,EACpB,UAAU,EACV,cAAc,EACd,gBAAgB,EAChB,MAAM,EACN,IAAI,EACJ,SAAiB,EACjB,YAAgB,EAChB,cAAuB,EACvB,GAAG,IAAI,EACR,EAAE,WAAW,GAAG,wBAAwB,CAAC,OAAO,CAAC,eAoMjD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAkD,MAAM,OAAO,CAAC;AAoBjG,OAAO,EAAE,WAAW,EAAkB,MAAM,SAAS,CAAC;AAMtD,wBAAgB,KAAK,CAAC,EACpB,UAAU,EACV,cAAc,EACd,gBAAgB,EAChB,MAAM,EACN,IAAI,EACJ,SAAiB,EACjB,YAAgB,EAChB,cAAuB,EACvB,WAAW,EACX,GAAG,IAAI,EACR,EAAE,WAAW,GAAG,wBAAwB,CAAC,OAAO,CAAC,eAkMjD"}

package/dist/components/Table/index.js

@@ -15,7 +15,7 @@ var _TableSkeleton = require("./components/TableSkeleton");
 var _styles = require("./styles");
 var _GenerateKey = require("../../utils/GenerateKey");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["selectable", "primaryActions", "secondaryActions", "header", "rows", "isLoading", "skeletonRows", "skeletonHeight"]; // Components
+var _excluded = ["selectable", "primaryActions", "secondaryActions", "header", "rows", "isLoading", "skeletonRows", "skeletonHeight", "actionLabel"]; // Components
 // Styles
 // Types
 // Utils
@@ -49,6 +49,7 @@ function Table(_ref) {
     skeletonRows = _ref$skeletonRows === void 0 ? 5 : _ref$skeletonRows,
     _ref$skeletonHeight = _ref.skeletonHeight,
     skeletonHeight = _ref$skeletonHeight === void 0 ? '16px' : _ref$skeletonHeight,
+    actionLabel = _ref.actionLabel,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = (0, _react.useState)([]),
     _useState2 = _slicedToArray(_useState, 2),
@@ -177,21 +178,19 @@ function Table(_ref) {
           }), header.map(function (label) {
             return /*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-                color: "neutral.neutral5",
-                fontSize: "xxxs",
+                color: "neutral.black",
+                fontSize: "xxs",
                 fontWeight: "600",
                 children: label
               })
             }, (0, _GenerateKey.generateKey)());
           })]
-        }), haveActions && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
-            children: !selectedRows.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-              color: "neutral.neutral5",
-              fontSize: "xxxs",
-              fontWeight: "600",
-              children: "A\xE7\xF5es"
-            })
+        }), haveActions && /*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
+          children: !selectedRows.length && !!actionLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+            color: "neutral.black",
+            fontSize: "xxs",
+            fontWeight: "600",
+            children: actionLabel
           })
         })]
       })
@@ -214,8 +213,8 @@ function Table(_ref) {
           }), row.items.map(function (cell) {
             return /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
               children: typeof cell === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-                fontSize: "xxxs",
-                fontWeight: "500",
+                color: "neutral.black",
+                fontSize: "xxs",
                 children: cell
               }) : cell
             }, (0, _GenerateKey.generateKey)());
@@ -232,7 +231,7 @@ function Table(_ref) {
                   },
                   children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
                     name: "more-vertical",
-                    color: 'neutral.black'
+                    color: "neutral.black"
                   })
                 }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.MenuItem, {
                   onClickOutside: function onClickOutside() {

package/dist/components/Table/styles.d.ts

@@ -24,7 +24,6 @@ export declare const MenuItemContainer: import("@emotion/styled").StyledComponen
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & GenericStyledProps & {
-    isOpen?: boolean | undefined;
     posTop?: number | undefined;
     posRight?: number | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Table/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElD,eAAO,MAAM,WAAW;;;uIAgFtB,CAAC;AAEH,eAAO,MAAM,cAAc;;;yGAG1B,CAAC;AAEF,eAAO,MAAM,aAAa;;;0IAmDxB,CAAC;AAEH,eAAO,MAAM,eAAe;;;yGAE3B,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;0IAiBhC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;yGAiB7B,CAAC;AAEF,eAAO,MAAM,eAAe;;;8HAmB3B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Table/styles.ts"],"names":[],"mappings":";AAKA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElD,eAAO,MAAM,WAAW;;;uIA2EtB,CAAC;AAEH,eAAO,MAAM,cAAc;;;yGAG1B,CAAC;AAEF,eAAO,MAAM,aAAa;;;0IAmDxB,CAAC;AAEH,eAAO,MAAM,eAAe;;;yGAE3B,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;0IAgBhC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;yGAgB7B,CAAC;AAEF,eAAO,MAAM,eAAe;;;8HAoB3B,CAAC"}

package/dist/components/Table/styles.js

@@ -6,12 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.VerticalPointsButton = exports.StyledTable = exports.SelectedHeader = exports.MenuItemWrapper = exports.MenuItemContent = exports.MenuItemContainer = exports.ActionsButton = void 0;
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _react = require("@emotion/react");
+var _customColorMode = require("src/utils/customColorMode");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 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 StyledTable = _styled.default.table(function (props) {
   var theme = props.theme;
-  return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: 100%;\n    border-spacing: 0px;\n\n    & > thead {\n      & > tr {\n        height: 64px;\n\n        & > th {\n          background: ", "90;\n          border-top: 1px solid ", ";\n          border-bottom: 1px solid ", ";\n          padding-left: 16px;\n          padding-right: 16px;\n          text-align: left;\n\n          &:first-of-type {\n            border-left: 1px solid ", ";\n            border-radius: 8px 0px 0px 0px;\n          }\n\n          &:last-child {\n            border-right: 1px solid ", ";\n            border-radius: 0px 8px 0px 0px;\n          }\n        }\n      }\n    }\n\n    & > tbody {\n      tr {\n        height: 64px;\n        &:nth-of-type(even) {\n          background: ", "40;\n        }\n        &:not(:last-child) {\n          & > td {\n            border-bottom: 1px solid ", ";\n          }\n        }\n\n        &:hover {\n          & > td {\n            background: ", ";\n\n            &:first-of-type {\n              border-radius: 4px 0px 0px 4px;\n            }\n\n            &:last-child {\n              border-radius: 0px 4px 4px 0px;\n            }\n          }\n        }\n\n        &:focus {\n          outline: 2px solid ", ";\n          border-radius: 4px;\n        }\n\n        &[data-selected='true'] {\n          & > td {\n            background: ", ";\n          }\n        }\n\n        & > td {\n          padding-left: 16px;\n          padding-right: 16px;\n\n          text-align: left;\n\n          color: ", ";\n        }\n      }\n    }\n  "])), theme.colors.neutral.neutral1, theme.colors.neutral.neutral2, theme.colors.neutral.neutral2, theme.colors.neutral.neutral2, theme.colors.neutral.neutral2, theme.colors.neutral.neutral1, theme.colors.neutral.neutral1, theme.colors.neutral.neutral1, theme.colors.primary.focus, theme.colors.neutral.neutral1, theme.colors.neutral.neutral5);
+  return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: 100%;\n    border-spacing: 0px;\n\n    & > thead {\n      & > tr {\n        height: 64px;\n\n        & > th {\n          background: ", ";\n          border: none;\n          padding-inline: 16px;\n          text-align: left;\n\n          &:first-of-type {\n            border-top-left-radius: 6px;\n            border-bottom-left-radius: 6px;\n          }\n\n          &:last-child {\n            border-top-right-radius: 6px;\n            border-bottom-right-radius: 6px;\n          }\n        }\n      }\n    }\n\n    & > tbody {\n      tr {\n        height: 64px;\n\n        &:nth-of-type(even) {\n          background: ", "4f;\n        }\n\n        &:hover {\n          & > td {\n            background: ", "50;\n          }\n        }\n\n        &:focus {\n          outline: 2px solid ", ";\n          border-radius: 8px;\n        }\n\n        &[data-selected='true'] {\n          & > td {\n            background: ", "bb;\n          }\n        }\n\n        & > td {\n          padding-inline: 16px;\n          transition: all ease 0.1s;\n          text-align: left;\n\n          color: ", ";\n\n          &:first-of-type {\n            border-top-left-radius: 8px;\n            border-bottom-left-radius: 8px;\n          }\n\n          &:last-child {\n            border-top-right-radius: 8px;\n            border-bottom-right-radius: 8px;\n          }\n        }\n      }\n    }\n  "])), theme.colors.neutral.neutral1, theme.colors.neutral.neutral1, theme.colors.neutral.neutral2, theme.colors.primary.focus, theme.colors.neutral.neutral1, theme.colors.neutral.neutral5);
 });
 exports.StyledTable = StyledTable;
 var SelectedHeader = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
@@ -23,21 +24,15 @@ var ActionsButton = _styled.default.button(function (props) {
 exports.ActionsButton = ActionsButton;
 var MenuItemWrapper = _styled.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: relative;\n"])));
 exports.MenuItemWrapper = MenuItemWrapper;
-var VerticalPointsButton = _styled.default.button(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border: 0;\n  background-color: transparent;\n  font-family: inherit;\n  position: relative;\n  cursor: pointer;\n\n  border-radius: 50%;\n  z-index: ", ";\n\n  padding: 0.5rem;\n\n  transition: background-color linear ", ";\n\n  &:hover {\n    background: rgba(0, 0, 0, 0.08);\n  }\n"])), function (props) {
-  return props.theme.zIndex.level1;
-}, function (props) {
+var VerticalPointsButton = _styled.default.button(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border: 0;\n  background-color: transparent;\n  font-family: inherit;\n  position: relative;\n  cursor: pointer;\n\n  border-radius: 50%;\n\n  padding: 0.5rem;\n\n  transition: background-color linear ", ";\n\n  &:hover {\n    background: rgba(0, 0, 0, 0.08);\n  }\n"])), function (props) {
   return props.theme.transition.speed;
 });
 exports.VerticalPointsButton = VerticalPointsButton;
-var MenuItemContainer = _styled.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: ", ";\n  position: absolute;\n  border-radius: 8px;\n  background-color: ", ";\n  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.1);\n  right: ", "px;\n  top: ", "px;\n  padding: 10px;\n\n  z-index: ", ";\n"])), function (props) {
-  return props.isOpen ? 'block' : 'none';
-}, function (_ref) {
+var MenuItemContainer = _styled.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: block;\n  position: absolute;\n  border-radius: 8px;\n  background-color: ", ";\n  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.1);\n  right: ", "px;\n  padding: 10px;\n\n  z-index: ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
-  return theme.colors.neutral.white;
+  return (0, _customColorMode.customColorMode)(theme.colors.neutral.white, theme.colors.neutral.neutral1);
 }, function (props) {
   return props.posRight ? props.posRight : 0;
-}, function (props) {
-  return props.posTop ? props.posTop : 0;
 }, function (props) {
   return props.theme.zIndex.level2;
 });
@@ -49,6 +44,6 @@ var MenuItemContent = _styled.default.div(_templateObject7 || (_templateObject7
   return props.theme.transition.speed;
 }, function (_ref3) {
   var theme = _ref3.theme;
-  return theme.colors.neutral.neutral1;
+  return (0, _customColorMode.customColorMode)(theme.colors.neutral.neutral1, theme.colors.neutral.white);
 });
 exports.MenuItemContent = MenuItemContent;

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

@@ -30,6 +30,8 @@ export interface ITableProps {
     skeletonRows?: number;
     /** Used to determine how many columns to display when the table is loading. */
     skeletonHeight?: string | number;
+    /** Used to display a custom text on header action column */
+    actionLabel?: string;
 }
 export interface IMenuItem {
     /** Table row dropdown menu items. */

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Table/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,EAAE,WAAW,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CACnE;AAED,MAAM,MAAM,QAAQ,GAAG;IACrB,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;CACzB,CAAC;AAEF,gEAAgE;AAChE,MAAM,MAAM,SAAS,GAAG,SAAS,CAAC;AAElC,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,kFAAkF;IAClF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mEAAmE;IACnE,cAAc,CAAC,EAAE,WAAW,EAAE,CAAC;IAC/B,mFAAmF;IACnF,gBAAgB,CAAC,EAAE,WAAW,EAAE,CAAC;IACjC,mFAAmF;IACnF,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,gJAAgJ;IAChJ,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,mEAAmE;IACnE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4EAA4E;IAC5E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+EAA+E;IAC/E,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAClC;AAED,MAAM,WAAW,SAAS;IACxB,qCAAqC;IACrC,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,qCAAqC;IACrC,MAAM,EAAE,OAAO,CAAC;IAChB,kDAAkD;IAClD,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,4CAA4C;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,qBAAqB;IACpC,+EAA+E;IAC/E,eAAe,EAAE,MAAM,CAAC;IACxB,4EAA4E;IAC5E,YAAY,EAAE,MAAM,CAAC;IACrB,+EAA+E;IAC/E,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAClC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Table/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,EAAE,WAAW,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CACnE;AAED,MAAM,MAAM,QAAQ,GAAG;IACrB,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;CACzB,CAAC;AAEF,gEAAgE;AAChE,MAAM,MAAM,SAAS,GAAG,SAAS,CAAC;AAElC,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,kFAAkF;IAClF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mEAAmE;IACnE,cAAc,CAAC,EAAE,WAAW,EAAE,CAAC;IAC/B,mFAAmF;IACnF,gBAAgB,CAAC,EAAE,WAAW,EAAE,CAAC;IACjC,mFAAmF;IACnF,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,gJAAgJ;IAChJ,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,mEAAmE;IACnE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4EAA4E;IAC5E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+EAA+E;IAC/E,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,4DAA4D;IAC5D,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,SAAS;IACxB,qCAAqC;IACrC,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,qCAAqC;IACrC,MAAM,EAAE,OAAO,CAAC;IAChB,kDAAkD;IAClD,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,4CAA4C;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,qBAAqB;IACpC,+EAA+E;IAC/E,eAAe,EAAE,MAAM,CAAC;IACxB,4EAA4E;IAC5E,YAAY,EAAE,MAAM,CAAC;IACrB,+EAA+E;IAC/E,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAClC"}

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/formatters/phone.d.ts

@@ -53,16 +53,16 @@ export declare function formatedPhone(phone: string, options?: {
 }): string;
 /**
  * Returns an object containing various formatted representations of a phone number.
- * @param {string} phoneNumber - The phone number to be formatted.
- * @returns {FormatPhoneProps | null} - An object containing different formats of the phone number or null if the number cannot be parsed.
+ * @param {string} phoneNumberWithDDI - The phone number to be formatted with +DDI.
+ * @returns {FormatPhoneProps} - An object containing different formats of the phone number or null if the number cannot be parsed.
  */
-export declare function formatPhone(phoneNumber?: string): FormatPhoneProps | null;
+export declare function formatPhone(phoneNumberWithDDI: string): FormatPhoneProps;
 /**
  * Formats a guest phone number by masking digits except the last four digits for each format.
- * @param phoneNumber - The phone number to be formatted.
+ * @param phoneNumberWithDDI - The phone number to be formatted with +DDI.
  * @returns The formatted phone number object, or null if the formatting is not possible.
  */
-export declare function formatGuestPhone(phoneNumber?: string): FormatPhoneProps | null;
+export declare function formatGuestPhone(phoneNumberWithDDI: string): FormatPhoneProps;
 /**
  * Validates if a phone number is valid.
  * @param {string | undefined} phoneNumber - The phone number to be validated.

package/dist/utils/formatters/phone.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"phone.d.ts","sourceRoot":"","sources":["../../../src/utils/formatters/phone.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE5D;;;;;GAKG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,GAAG,GAAE,MAAc,GAAG,MAAM,CAkCjF;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAEnD;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAerD;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,UAAQ,GAAG,MAAM,CAmB1E;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAC7B,KAAK,EAAE,MAAM,EACb,EACE,YAA4E,GAC7E,EAAE;IAAE,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,GAC3B,OAAO,GAAG,MAAM,CAQlB;AAED;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM,sBAWrC;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAC3B,KAAK,EAAE,MAAM,EACb,OAAO,GAAE;IACP,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACd,UA2BP;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,gBAAgB,GAAG,IAAI,CA6BzE;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,gBAAgB,GAAG,IAAI,CAkC9E;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAU3D"}
+{"version":3,"file":"phone.d.ts","sourceRoot":"","sources":["../../../src/utils/formatters/phone.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE5D;;;;;GAKG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,GAAG,GAAE,MAAc,GAAG,MAAM,CAkCjF;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAEnD;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAerD;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,UAAQ,GAAG,MAAM,CAmB1E;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAC7B,KAAK,EAAE,MAAM,EACb,EACE,YAA4E,GAC7E,EAAE;IAAE,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,GAC3B,OAAO,GAAG,MAAM,CAQlB;AAED;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM,sBAWrC;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAC3B,KAAK,EAAE,MAAM,EACb,OAAO,GAAE;IACP,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACd,UA2BP;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,kBAAkB,EAAE,MAAM,GAAG,gBAAgB,CAkCxE;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,kBAAkB,EAAE,MAAM,GAAG,gBAAgB,CAwC7E;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAU3D"}

package/dist/utils/formatters/phone.js

@@ -172,16 +172,21 @@ function formatedPhone(phone) {
 
 /**
  * Returns an object containing various formatted representations of a phone number.
- * @param {string} phoneNumber - The phone number to be formatted.
- * @returns {FormatPhoneProps | null} - An object containing different formats of the phone number or null if the number cannot be parsed.
+ * @param {string} phoneNumberWithDDI - The phone number to be formatted with +DDI.
+ * @returns {FormatPhoneProps} - An object containing different formats of the phone number or null if the number cannot be parsed.
  */
-function formatPhone(phoneNumber) {
-  if (phoneNumber !== null && phoneNumber !== void 0 && phoneNumber.includes('*')) return formatGuestPhone(phoneNumber);
+function formatPhone(phoneNumberWithDDI) {
+  if (phoneNumberWithDDI !== null && phoneNumberWithDDI !== void 0 && phoneNumberWithDDI.includes('*')) return formatGuestPhone(phoneNumberWithDDI);
 
   // Parses the phone number
-  var parsedNumber = (0, _max.parsePhoneNumberFromString)(phoneNumber || '');
+  var parsedNumber = (0, _max.parsePhoneNumberFromString)(phoneNumberWithDDI || '');
   if (!parsedNumber) {
-    return null;
+    return {
+      formattedNumber: phoneNumberWithDDI,
+      formattedNumberWithDDI: phoneNumberWithDDI,
+      unformattedNumber: phoneNumberWithDDI,
+      unformattedNumberWithDDI: phoneNumberWithDDI
+    };
   }
   var hasDDI = parsedNumber.countryCallingCode !== undefined;
   var isInternational = hasDDI && parsedNumber.countryCallingCode !== '55';
@@ -197,14 +202,19 @@ function formatPhone(phoneNumber) {
 
 /**
  * Formats a guest phone number by masking digits except the last four digits for each format.
- * @param phoneNumber - The phone number to be formatted.
+ * @param phoneNumberWithDDI - The phone number to be formatted with +DDI.
  * @returns The formatted phone number object, or null if the formatting is not possible.
  */
-function formatGuestPhone(phoneNumber) {
-  var phone = phoneNumber === null || phoneNumber === void 0 ? void 0 : phoneNumber.replace(/\*/g, '9');
+function formatGuestPhone(phoneNumberWithDDI) {
+  var phone = phoneNumberWithDDI === null || phoneNumberWithDDI === void 0 ? void 0 : phoneNumberWithDDI.replace(/\*/g, '9');
   var phoneFormatter = formatPhone(phone);
   if (!phoneFormatter) {
-    return null;
+    return {
+      formattedNumber: phone,
+      formattedNumberWithDDI: phone,
+      unformattedNumber: phone,
+      unformattedNumberWithDDI: phone
+    };
   }
   return Object.keys(phoneFormatter).reduce(function (acc, key) {
     var currentKey = key;

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.24",
   "description": "Quick build beatiful Pedido Pago apps",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",