@pedidopago/ui 1.7.17 → 1.7.19-0

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/ComposeIcon/styles.ts"],"names":[],"mappings":";AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,eAAO,MAAM,oBAAoB;;;yGAMhC,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;qIAwEjC,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/ComposeIcon/styles.ts"],"names":[],"mappings":";AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,eAAO,MAAM,oBAAoB;;;yGAMhC,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;qIAuDjC,CAAC"}

package/dist/components/ComposeIcon/styles.js

@@ -25,45 +25,28 @@ var StatusBubbleContainer = _styled.default.div(_templateObject2 || (_templateOb
   var bubbleShadow = _ref3.bubbleShadow;
   return bubbleShadow ? 'rgba(0, 0, 0, 0.2) 0px 3px 8px' : 'none';
 }, function (_ref4) {
-  var iconPosition = _ref4.bubblePosition,
-    _ref4$size = _ref4.size,
-    size = _ref4$size === void 0 ? 200 : _ref4$size;
-  switch (iconPosition) {
+  var _ref4$bubblePosition = _ref4.bubblePosition,
+    bubblePosition = _ref4$bubblePosition === void 0 ? 'bottom-right' : _ref4$bubblePosition;
+  switch (bubblePosition) {
     case 'center':
       {
-        var topOffset = 0.175;
-        var leftOffset = 0.31;
-        return "\n        top: ".concat(size * topOffset, "px;\n        left: ").concat(size * leftOffset, "px;\n        ");
+        return "\n        top: 36%;\n        left: 50%;\n        transform: translate(-50%,-50%);\n        ";
       }
     case 'top-left':
       {
-        var _topOffset = 0.15;
-        var _leftOffset = 0.05;
-        return "\n        top: ".concat(size * _topOffset, "px;\n        left: ").concat(size * _leftOffset, "px;\n        ");
+        return "\n        top: 20%;\n        left: 0;\n        ";
       }
     case 'top-right':
       {
-        var _topOffset2 = 0.15;
-        var _leftOffset2 = 0.6;
-        return "\n        top: ".concat(size * _topOffset2, "px;\n        left: ").concat(size * _leftOffset2, "px;\n        ");
+        return "\n        top: 20%;\n        right: 0;\n        ";
       }
     case 'bottom-left':
       {
-        var _topOffset3 = 0.6;
-        var _leftOffset3 = 0.05;
-        return "\n        top: ".concat(size * _topOffset3, "px;\n        left: ").concat(size * _leftOffset3, "px;\n        ");
+        return "\n        left: 0;\n        bottom: 5%;\n        ";
       }
     case 'bottom-right':
       {
-        var _topOffset4 = 0.6;
-        var _leftOffset4 = 0.6;
-        return "\n        top: ".concat(size * _topOffset4, "px;\n        left: ").concat(size * _leftOffset4, "px;\n          ");
-      }
-    default:
-      {
-        var _topOffset5 = 0.6;
-        var _leftOffset5 = 0.6;
-        return "\n        top: ".concat(size * _topOffset5, "px;\n        left: ").concat(size * _leftOffset5, "px;\n          ");
+        return "\n        right: 0;\n        bottom: 5%;\n        ";
       }
   }
 });

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Dropzone/index.tsx"],"names":[],"mappings":";AAyBA,OAAO,EAAE,aAAa,EAAa,MAAM,SAAS,CAAC;AAEnD,QAAA,MAAM,QAAQ,4KAgBX,aAAa,gBA2Of,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Dropzone/index.tsx"],"names":[],"mappings":";AAyBA,OAAO,EAAE,aAAa,EAAa,MAAM,SAAS,CAAC;AAEnD,QAAA,MAAM,QAAQ,4KAgBX,aAAa,gBAyOf,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/Dropzone/index.js

@@ -9,6 +9,7 @@ var _react = require("react");
 var _framerMotion = require("framer-motion");
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _Flex = _interopRequireDefault(require("../Flex"));
+var _Button = _interopRequireDefault(require("../Button"));
 var _styles = require("./styles");
 var _accepts = require("./utils/accepts");
 var _generateUUID = require("../../utils/generateUUID");
@@ -153,7 +154,6 @@ var Dropzone = function Dropzone(_ref) {
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.DropzoneContainer, _objectSpread(_objectSpread({
     isDraggingOver: isDragging,
-    haveItems: acceptedFiles.length > 0,
     isDisabled: disabled,
     alert: alert
   }, rest), {}, {
@@ -220,7 +220,7 @@ var Dropzone = function Dropzone(_ref) {
               })]
             })
           }, file.id);
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.DropzoneImageAddButton, {
+        }), multiple && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.DropzoneImageAddButton, {
           isDraggingOver: isDragging,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
             name: "plus-circle",
@@ -238,7 +238,7 @@ var Dropzone = function Dropzone(_ref) {
         },
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Flex.default, {
           direction: "column",
-          spacing: "4",
+          spacing: "2",
           alignItems: "center",
           justifyContent: "center",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_framerMotion.motion.div, {
@@ -275,8 +275,10 @@ var Dropzone = function Dropzone(_ref) {
               alert: alert,
               children: helperText || 'ou solte um arquivo aqui'
             })]
-          }), !disabledButton && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.DropzoneButton, {
-            children: [buttonText || 'Selecionar um arquivo', " "]
+          }), !disabledButton && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+            variant: "outline",
+            bgColor: "neutral.neutral4",
+            children: [buttonText || 'Selecionar um arquivo', ' ']
           })]
         })
       })

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

@@ -6,7 +6,6 @@ export declare const DropzoneContainer: import("@emotion/styled").StyledComponen
 } & {
     alert?: DropzoneAlertType | undefined;
     isDraggingOver: boolean;
-    haveItems: boolean;
     isDisabled?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const DropzoneInput: import("@emotion/styled").StyledComponent<{
@@ -54,8 +53,4 @@ export declare const DropzoneText: import("@emotion/styled").StyledComponent<imp
     alert?: DropzoneAlertType | undefined;
     subinfo?: boolean | undefined;
 }, {}, {}>;
-export declare const DropzoneButton: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Dropzone/styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAG5C,eAAO,MAAM,iBAAiB;;;;;oBAEZ,OAAO;eACZ,OAAO;;yGA6DnB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;kHAWzB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;yGAwC3B,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;oBACjB,OAAO;qHAmCxB,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;qHA8BhC,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;qHAY5B,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;UAUxB,CAAC;AAEF,eAAO,MAAM,cAAc;;;qHAiB1B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Dropzone/styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAG5C,eAAO,MAAM,iBAAiB;;;;;oBAEZ,OAAO;;yGA0DxB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;kHAWzB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;yGAoC3B,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;oBACjB,OAAO;qHA2BxB,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;qHA8BhC,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;qHAY5B,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;UAUxB,CAAC"}

package/dist/components/Dropzone/styles.js

@@ -3,45 +3,35 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DropzoneText = exports.DropzoneRemoveButton = exports.DropzoneInput = exports.DropzoneImageAddButton = exports.DropzoneFilename = exports.DropzoneFileBox = exports.DropzoneContainer = exports.DropzoneButton = void 0;
+exports.DropzoneText = exports.DropzoneRemoveButton = exports.DropzoneInput = exports.DropzoneImageAddButton = exports.DropzoneFilename = exports.DropzoneFileBox = exports.DropzoneContainer = void 0;
 var _react = require("@emotion/react");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _Typography = _interopRequireDefault(require("../Typography"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 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 DropzoneContainer = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  justify-content: ", ";\n  align-items: ", ";\n  flex-wrap: wrap;\n\n  ", "\n\n  ", "\n\n  background-color: ", ";\n\n  &:after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: black;\n    border-radius: 8px;\n    pointer-events: none;\n    visibility: hidden;\n    opacity: 0;\n  }\n\n  ", "\n"])), function (_ref) {
-  var haveItems = _ref.haveItems;
-  return haveItems ? 'flex-start' : 'center';
+var DropzoneContainer = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  flex-wrap: wrap;\n  padding: 1.5rem 1.625rem;\n  border-radius: 8px;\n\n  ", "\n\n  ", "\n\n  background-color: ", ";\n\n  &:after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: black;\n    border-radius: 8px;\n    pointer-events: none;\n    visibility: hidden;\n    opacity: 0;\n  }\n\n  ", "\n"])), function (_ref) {
+  var isDisabled = _ref.isDisabled;
+  return isDisabled && 'opacity: 0.5;';
 }, function (_ref2) {
-  var haveItems = _ref2.haveItems;
-  return haveItems ? 'flex-start' : 'center';
+  var alert = _ref2.alert,
+    theme = _ref2.theme,
+    isDisabled = _ref2.isDisabled;
+  var borderColor = alert && !isDisabled ? theme.colors[alert].default : theme.colors.neutral.neutral3;
+  return "\n      border: 2px dashed ".concat(borderColor, ";\n      ");
 }, function (_ref3) {
-  var isDisabled = _ref3.isDisabled;
-  return isDisabled && 'opacity: 0.5;';
-}, function (_ref4) {
-  var haveItems = _ref4.haveItems,
-    alert = _ref4.alert,
-    theme = _ref4.theme,
-    isDisabled = _ref4.isDisabled;
-  if (!haveItems) {
-    var borderColor = alert && !isDisabled ? theme.colors[alert].default : theme.colors.neutral.neutral3;
-    return "\n      padding: 3.875rem 1.625rem;\n      border: 2px dashed ".concat(borderColor, ";\n      border-radius: 8px;\n      ");
-  }
-}, function (_ref5) {
-  var alert = _ref5.alert,
-    theme = _ref5.theme,
-    haveItems = _ref5.haveItems,
-    isDisabled = _ref5.isDisabled;
-  if (alert && !isDisabled && !haveItems) {
+  var alert = _ref3.alert,
+    theme = _ref3.theme,
+    isDisabled = _ref3.isDisabled;
+  if (alert && !isDisabled) {
     return "".concat(theme.colors[alert].blurred, "33");
   }
   if (isDisabled) {
     return theme.colors.neutral.neutral1;
   }
-  return 'transparent';
+  return '#f5faf8';
 }, function (props) {
-  return props.isDraggingOver && !props.haveItems && !props.isDisabled && (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      &:after {\n        opacity: 0.1;\n        visibility: visible;\n      }\n    "])));
+  return props.isDraggingOver && !props.isDisabled && (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      &:after {\n        opacity: 0.1;\n        visibility: visible;\n      }\n    "])));
 });
 exports.DropzoneContainer = DropzoneContainer;
 var DropzoneInput = _styled.default.input(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  cursor: ", ";\n  z-index: ", ";\n"])), function (props) {
@@ -50,18 +40,16 @@ var DropzoneInput = _styled.default.input(_templateObject3 || (_templateObject3
   return props.theme.zIndex.default;
 });
 exports.DropzoneInput = DropzoneInput;
-var DropzoneFileBox = _styled.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  justify-content: center;\n  align-items: center;\n  width: 80px;\n  height: 80px;\n  border-radius: 8px;\n\n  & > img {\n    width: 100%;\n    height: 100%;\n    border-radius: 8px;\n    object-fit: cover;\n  }\n\n  ", "\n\n  @media screen and (min-width: ", ") {\n    width: 100px;\n    height: 100px;\n  }\n\n  @media screen and (min-width: ", ") {\n    width: 160px;\n    height: 160px;\n  }\n"])), function (props) {
+var DropzoneFileBox = _styled.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  justify-content: center;\n  align-items: center;\n  width: 80px;\n  height: 80px;\n  border-radius: 8px;\n\n  & > img {\n    width: 100%;\n    height: 100%;\n    border-radius: 8px;\n    object-fit: cover;\n  }\n\n  ", "\n\n  @media screen and (min-width: ", ") {\n    width: 100%;\n    max-width: 300px;\n    height: 160px;\n  }\n"])), function (props) {
   return props.disabled ? "\n        & > button {\n          display: none;\n        }\n      " : "\n        &:hover > button {\n          opacity: 1;\n        }\n      ";
-}, function (props) {
-  return props.theme.breakpoints.sm;
 }, function (props) {
   return props.theme.breakpoints.md;
 });
 exports.DropzoneFileBox = DropzoneFileBox;
-var DropzoneImageAddButton = _styled.default.button(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 80px;\n  height: 80px;\n  border-radius: 8px;\n  outline: 0;\n\n  transition: all 0.3s ease-in-out;\n\n  border: 2px dashed\n    ", ";\n  background: ", ";\n\n  @media screen and (min-width: ", ") {\n    width: 100px;\n    height: 100px;\n  }\n\n  @media screen and (min-width: ", ") {\n    width: 160px;\n    height: 160px;\n  }\n"])), function (props) {
-  return props.theme.colorMode === 'light' ? props.theme.colors.neutral.neutral3 : props.theme.colors.neutral.neutral4;
+var DropzoneImageAddButton = _styled.default.button(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 80px;\n  height: 80px;\n  border-radius: 8px;\n  outline: 0;\n\n  transition: all 0.3s ease-in-out;\n\n  border: 2px solid ", ";\n  background: ", ";\n\n  @media screen and (min-width: ", ") {\n    width: 100px;\n    height: 100px;\n  }\n\n  @media screen and (min-width: ", ") {\n    width: 160px;\n    height: 160px;\n  }\n"])), function (props) {
+  return props.theme.colors.neutral.neutral3;
 }, function (props) {
-  return props.isDraggingOver ? props.theme.colorMode === 'light' ? props.theme.colors.neutral.neutral2 : props.theme.colors.neutral.neutral3 : props.theme.colorMode === 'light' ? props.theme.colors.neutral.neutral1 : props.theme.colors.neutral.neutral6;
+  return props.isDraggingOver ? props.theme.colors.neutral.neutral2 : props.theme.colors.neutral.neutral1;
 }, function (props) {
   return props.theme.breakpoints.sm;
 }, function (props) {
@@ -78,18 +66,10 @@ var DropzoneFilename = _styled.default.p(_templateObject7 || (_templateObject7 =
   return props.theme.colors.neutral.neutral2;
 });
 exports.DropzoneFilename = DropzoneFilename;
-var DropzoneText = (0, _styled.default)(_Typography.default)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), function (_ref6) {
-  var alert = _ref6.alert,
-    theme = _ref6.theme,
-    subinfo = _ref6.subinfo;
+var DropzoneText = (0, _styled.default)(_Typography.default)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), function (_ref4) {
+  var alert = _ref4.alert,
+    theme = _ref4.theme,
+    subinfo = _ref4.subinfo;
   return alert ? subinfo ? theme.colors[alert].default + '66' : theme.colors[alert].default : 'initial';
 });
-exports.DropzoneText = DropzoneText;
-var DropzoneButton = _styled.default.button(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  font-family: inherit;\n  font-weight: 600;\n  font-size: 1rem;\n  padding: 0.875rem 1.5rem;\n  border-radius: 0.5rem;\n  background-color: transparent;\n  color: ", ";\n  border: 2px solid ", ";\n  display: none;\n\n  @media screen and (min-width: ", ") {\n    display: block;\n  }\n"])), function (props) {
-  return props.theme.colorMode === 'light' ? props.theme.colors.neutral.black : props.theme.colors.neutral.white;
-}, function (props) {
-  return props.theme.colors.neutral.neutral2;
-}, function (props) {
-  return props.theme.breakpoints.sm;
-});
-exports.DropzoneButton = DropzoneButton;
+exports.DropzoneText = DropzoneText;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,mBAAmB,EAKpB,MAAM,OAAO,CAAC;AAoBf,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,QAAA,MAAM,KAAK,sJAsGV,CAAC;AAGF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,mBAAmB,EAKpB,MAAM,OAAO,CAAC;AAqBf,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,QAAA,MAAM,KAAK,sJAgIV,CAAC;AAGF,eAAe,KAAK,CAAC"}

package/dist/components/Input/index.js

@@ -6,10 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("react");
+var _Button = _interopRequireDefault(require("../Button"));
 var _styles = require("./styles");
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["placeholder", "type", "disabled", "label", "labelBackground", "hiddenContent", "helperText", "alert", "withAddon", "addonContent", "withIcon", "leftIcon", "rightIcon"];
+var _excluded = ["placeholder", "type", "disabled", "label", "labelBackground", "hiddenContent", "helperText", "alert", "withAddon", "addonContent", "withIcon", "onLeftIconClick", "onRightIconClick", "leftIcon", "rightIcon"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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; }
@@ -36,6 +37,8 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     withAddon = _ref.withAddon,
     addonContent = _ref.addonContent,
     withIcon = _ref.withIcon,
+    onLeftIconClick = _ref.onLeftIconClick,
+    onRightIconClick = _ref.onRightIconClick,
     leftIcon = _ref.leftIcon,
     rightIcon = _ref.rightIcon,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -95,7 +98,17 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.InputContentRow, {
           children: [(withIcon || leftIcon) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.InputIcon, {
-            children: withIcon || leftIcon
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+              type: "button",
+              variant: "ghost",
+              style: {
+                padding: 0,
+                cursor: onLeftIconClick ? 'pointer' : 'default'
+              },
+              onClick: onLeftIconClick,
+              tabIndex: onLeftIconClick ? 0 : -1,
+              children: withIcon || leftIcon
+            })
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Input, _objectSpread(_objectSpread({
             "data-input": "input",
             type: hiddenInfo ? 'password' : type,
@@ -123,7 +136,17 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
               name: "eye-off"
             })
           }), rightIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.InputIcon, {
-            children: rightIcon
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+              type: "button",
+              variant: "ghost",
+              style: {
+                padding: 0,
+                cursor: onRightIconClick ? 'pointer' : 'default'
+              },
+              onClick: onRightIconClick,
+              tabIndex: onRightIconClick ? 0 : -1,
+              children: rightIcon
+            })
           })]
         })]
       })]

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

@@ -10,6 +10,8 @@ export interface InputProps extends HTMLAttributes<HTMLInputElement> {
     alert?: InputAlertTypes;
     leftIcon?: ReactNode;
     rightIcon?: ReactNode;
+    onLeftIconClick?: () => void;
+    onRightIconClick?: () => void;
 }
 export interface InputComponentProps extends InputProps {
     hasValueOnInput: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Input/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,MAAM,MAAM,eAAe,GACvB,SAAS,GACT,OAAO,GACP,SAAS,GACT,aAAa,GACb,UAAU,GACV,mBAAmB,GACnB,mBAAmB,CAAC;AAExB,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,gBAAgB,CAAC;IAClE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED,MAAM,WAAW,mBAAoB,SAAQ,UAAU;IACrD,eAAe,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,MAAM,CAAC;CAC5D;AAED,MAAM,WAAW,eAAgB,SAAQ,UAAU;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,MAAM,CAAC;IAC3D,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Input/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,MAAM,MAAM,eAAe,GACvB,SAAS,GACT,OAAO,GACP,SAAS,GACT,aAAa,GACb,UAAU,GACV,mBAAmB,GACnB,mBAAmB,CAAC;AAExB,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,gBAAgB,CAAC;IAClE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED,MAAM,WAAW,mBAAoB,SAAQ,UAAU;IACrD,eAAe,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,MAAM,CAAC;CAC5D;AAED,MAAM,WAAW,eAAgB,SAAQ,UAAU;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,MAAM,CAAC;IAC3D,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB"}

package/dist/components/Modal/index.js

@@ -83,7 +83,6 @@ var ModalComponent = function ModalComponent(_ref) {
     return "translate(".concat(percentageX, "%, ").concat(percentageY, "%)");
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ReactPortal.ReactPortal, {
-    wrapperId: "portal-root",
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_framerMotion.AnimatePresence, {
       mode: "wait",
       children: open && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {

package/dist/components/MultipleSelect/index.js

@@ -174,7 +174,6 @@ var MultipleSelect = function MultipleSelect(_ref) {
         placeholder: placeholder,
         dropDownIcon: dropDownIcon
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ReactPortal.ReactPortal, {
-        wrapperId: "portal-root",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_framerMotion.AnimatePresence, {
           mode: "wait",
           children: showOptionsArea && /*#__PURE__*/(0, _jsxRuntime.jsx)(_framerMotion.motion.div, _objectSpread(_objectSpread({}, _animations.multipleSelectAnimations), {}, {

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

@@ -198,7 +198,6 @@ function NewMultipleSelect(_ref) {
           })
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ReactPortal.ReactPortal, {
-        wrapperId: "portal-root",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.OptionsContainer, {
           ref: optionsModalRef,
           open: isOpenOptions,

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

@@ -144,7 +144,6 @@ function NewSingleSelect(_ref) {
           })
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ReactPortal.ReactPortal, {
-        wrapperId: "portal-root",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.OptionsContainer, {
           ref: optionsModalRef,
           open: isOpenOptions,

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

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
 interface ReactPortalProps {
-    wrapperId: string;
+    wrapperId?: string;
     children: ReactNode | ReactNode[] | JSX.Element | JSX.Element[];
 }
-export declare function ReactPortal({ children, wrapperId }: ReactPortalProps): import("react").ReactPortal | null;
+export declare function ReactPortal(props: ReactPortalProps): import("react").ReactPortal | null;
 export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ReactPortal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAIvD,UAAU,gBAAgB;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,GAAG,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;CACjE;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,SAAyB,EAAE,EAAE,gBAAgB,sCAsBpF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ReactPortal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA8B,MAAM,OAAO,CAAC;AAI9D,UAAU,gBAAgB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,GAAG,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;CACjE;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,sCAwBlD"}

package/dist/components/ReactPortal/index.js

@@ -14,14 +14,12 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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 ReactPortal(_ref) {
-  var children = _ref.children,
-    _ref$wrapperId = _ref.wrapperId,
-    wrapperId = _ref$wrapperId === void 0 ? 'portal-root' : _ref$wrapperId;
+function ReactPortal(props) {
   var _useState = (0, _react.useState)(null),
     _useState2 = _slicedToArray(_useState, 2),
     wrapperElement = _useState2[0],
     setWrapperElement = _useState2[1];
+  var wrapperId = props.wrapperId || (0, _react.useId)();
   (0, _react.useEffect)(function () {
     var element = document.getElementById(wrapperId);
     var systemCreated = false;
@@ -38,6 +36,6 @@ function ReactPortal(_ref) {
   }, [wrapperId]);
   if (wrapperElement === null) return null;
   return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: children
+    children: props.children
   }), wrapperElement);
 }

package/dist/components/Select/index.js

@@ -211,7 +211,6 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
           tabIndex: -1
         }, rest))]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ReactPortal.ReactPortal, {
-        wrapperId: "portal-root",
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_OptionsSelect.OptionsSelect, {
           open: optionsMenuOpen,
           left: "".concat((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.getBoundingClientRect().left, "px"),

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TimeInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,mBAAmB,EAKpB,MAAM,OAAO,CAAC;AAgBf,OAAO,EAAE,cAAc,EAAc,MAAM,SAAS,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEjD,eAAO,MAAM,SAAS,uKAgPpB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TimeInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,mBAAmB,EAKpB,MAAM,OAAO,CAAC;AAqBf,OAAO,EAAE,cAAc,EAAc,MAAM,SAAS,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEjD,eAAO,MAAM,SAAS,uKAiOpB,CAAC"}

package/dist/components/TimeInput/index.js

@@ -100,6 +100,9 @@ var TimeInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     });
   }
   function handleOpenTimePicker() {
+    var _timeInputRef$current, _timeInputRef$current2;
+    setSelectedTime((_timeInputRef$current = timeInputRef.current) === null || _timeInputRef$current === void 0 ? void 0 : _timeInputRef$current.value);
+    setTimeValue((_timeInputRef$current2 = timeInputRef.current) === null || _timeInputRef$current2 === void 0 ? void 0 : _timeInputRef$current2.value);
     if (!rest.disabled) setIsModalOpen(function (oldState) {
       return !oldState;
     });
@@ -125,52 +128,34 @@ var TimeInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     }
     setIsModalOpen(false);
   }
-
-  // Setting the default value:
-  (0, _react.useEffect)(function () {
-    if (rest.defaultValue) {
-      setTimeValue(rest.defaultValue);
-      if (isAMPMVariant) {
-        var period = String(rest.defaultValue).split(' ')[1];
-        setPeriodValue(period);
-      }
-    }
-    return function () {
-      return setTimeValue(undefined);
-    };
-  }, []);
-
-  // Setting value from controller components:
-  (0, _react.useEffect)(function () {
-    if (!timeInputRef.current) return;
-    var value = rest.value === undefined ? '' : rest.value;
-    (0, _utils.handleSetNativeInputValue)(timeInputRef, value);
-    setTimeValue(value);
-    setSelectedTime(value);
-    if (isAMPMVariant) {
-      var period = String(rest.value).split(' ')[1];
-      setPeriodValue(period);
-    }
-  }, [rest.value]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.TimeInputContainer, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, _objectSpread({
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, _objectSpread(_objectSpread({
       "data-testid": "time-input",
       ref: timeInputRef,
-      withIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      leftIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
         name: "clock",
-        color: "neutral.neutral3"
+        color: "neutral.neutral5"
       }),
+      onLeftIconClick: handleOpenTimePicker,
       label: label,
-      type: "text",
-      placeholder: "HH:MM",
+      type: variant === '24_hours' ? 'tel' : 'text',
+      placeholder: placeholder || "HH:MM ".concat(variant === 'am_pm' ? 'AM/PM' : ''),
       helperText: helperText,
       alert: alert,
       disabled: !!rest.disabled,
       tabIndex: rest.disabled ? -1 : 0,
-      onClick: handleOpenTimePicker,
       className: rest.className,
       style: rest.style
-    }, rest)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, {
+    }, rest), {}, {
+      onChange: function onChange(event) {
+        var _rest$onChange;
+        event.currentTarget.value = (0, _utils.onChangeFormatter)(event, isAMPMVariant);
+        setTimeValue(event.currentTarget.value);
+        setSelectedTime(event.currentTarget.value);
+        (0, _utils.handleSetNativeInputValue)(timeInputRef, event.currentTarget.value);
+        (_rest$onChange = rest.onChange) === null || _rest$onChange === void 0 ? void 0 : _rest$onChange.call(rest, event);
+      }
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, {
       maxWidth: "min(400px, 90%)",
       maxHeight: "370px",
       open: isModalOpen,

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/TimeInput/styles.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,eAAO,MAAM,kBAAkB;;;yGAQ9B,CAAC;AAEF,eAAO,MAAM,cAAc;;;yGAqB1B,CAAC;AAEF,eAAO,MAAM,YAAY;;;;aAAyB,cAAc,CAAC,SAAS,CAAC;yGA0F1E,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/TimeInput/styles.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,eAAO,MAAM,kBAAkB;;;yGAG9B,CAAC;AAEF,eAAO,MAAM,cAAc;;;yGAqB1B,CAAC;AAEF,eAAO,MAAM,YAAY;;;;aAAyB,cAAc,CAAC,SAAS,CAAC;yGA0F1E,CAAC"}

package/dist/components/TimeInput/styles.js

@@ -8,7 +8,7 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _templateObject, _templateObject2, _templateObject3;
 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 TimeInputContainer = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n\n  input {\n    cursor: pointer;\n    caret-color: transparent;\n  }\n"])));
+var TimeInputContainer = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n"])));
 exports.TimeInputContainer = TimeInputContainer;
 var DigitContainer = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  list-style-type: none;\n  overflow-y: scroll;\n  user-select: none;\n\n  cursor: grab;\n\n  li {\n    scroll-snap-align: start;\n  }\n\n  /* hiding scrollbar: */\n  ::-webkit-scrollbar {\n    display: none;\n    -ms-overflow-style: none; /* IE and Edge */\n    scrollbar-width: none; /* Firefox */\n  }\n"])));
 exports.DigitContainer = DigitContainer;

package/dist/components/TimeInput/utils.d.ts

@@ -6,4 +6,5 @@ export declare function setObserverOptions(mainContainer: RefObject<HTMLDivEleme
     threshold: number;
     rootMargin: string;
 };
+export declare function onChangeFormatter(event: React.FormEvent<HTMLInputElement> | React.ChangeEvent<HTMLInputElement>, isAMPMVariant: boolean): string;
 //# sourceMappingURL=utils.d.ts.map

package/dist/components/TimeInput/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/TimeInput/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,wBAAgB,oBAAoB,CAClC,gBAAgB,EAAE,SAAS,CAAC,cAAc,CAAC,EAC3C,kBAAkB,EAAE,SAAS,CAAC,cAAc,CAAC,EAC7C,UAAU,EAAE,MAAM,EAClB,sBAAsB,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,QAgCnD;AAED,wBAAgB,yBAAyB,CACvC,YAAY,EAAE,SAAS,CAAC,gBAAgB,CAAC,EACzC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,MAAM,EAAE,QAU5C;AAED,wBAAgB,kBAAkB,CAAC,aAAa,EAAE,SAAS,CAAC,cAAc,CAAC;;;;EAM1E"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/TimeInput/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,wBAAgB,oBAAoB,CAClC,gBAAgB,EAAE,SAAS,CAAC,cAAc,CAAC,EAC3C,kBAAkB,EAAE,SAAS,CAAC,cAAc,CAAC,EAC7C,UAAU,EAAE,MAAM,EAClB,sBAAsB,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,QAkCnD;AAED,wBAAgB,yBAAyB,CACvC,YAAY,EAAE,SAAS,CAAC,gBAAgB,CAAC,EACzC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,MAAM,EAAE,QAU5C;AAED,wBAAgB,kBAAkB,CAAC,aAAa,EAAE,SAAS,CAAC,cAAc,CAAC;;;;EAM1E;AAED,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,GAAG,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,EAC9E,aAAa,EAAE,OAAO,UAiDvB"}

package/dist/components/TimeInput/utils.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.handleScrollIntoView = handleScrollIntoView;
 exports.handleSetNativeInputValue = handleSetNativeInputValue;
+exports.onChangeFormatter = onChangeFormatter;
 exports.setObserverOptions = setObserverOptions;
 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."); }
@@ -19,14 +20,14 @@ function handleScrollIntoView(hourContainerRef, minuteContainerRef, inputValue,
     hour = _inputValue$split2[0],
     minute = _inputValue$split2[1],
     period = _inputValue$split2[2];
-  var targetHourEl = (_hourContainerRef$cur = hourContainerRef.current) === null || _hourContainerRef$cur === void 0 ? void 0 : _hourContainerRef$cur.querySelector("[data-input-hour=\"".concat(hour, "\"]"));
-  var targetMinuteEl = (_minuteContainerRef$c = minuteContainerRef.current) === null || _minuteContainerRef$c === void 0 ? void 0 : _minuteContainerRef$c.querySelector("[data-input-minute=\"".concat(minute, "\"]"));
-  if (targetHourEl && targetMinuteEl) {
-    targetHourEl.scrollIntoView({
+  var targetHourEl = (_hourContainerRef$cur = hourContainerRef.current) === null || _hourContainerRef$cur === void 0 ? void 0 : _hourContainerRef$cur.querySelector("[data-input-hour=\"".concat(hour === null || hour === void 0 ? void 0 : hour.padStart(2, '0'), "\"]"));
+  var targetMinuteEl = (_minuteContainerRef$c = minuteContainerRef.current) === null || _minuteContainerRef$c === void 0 ? void 0 : _minuteContainerRef$c.querySelector("[data-input-minute=\"".concat(minute === null || minute === void 0 ? void 0 : minute.padEnd(2, '0'), "\"]"));
+  if (targetHourEl || targetMinuteEl) {
+    targetHourEl === null || targetHourEl === void 0 ? void 0 : targetHourEl.scrollIntoView({
       behavior: 'auto',
       block: 'center'
     });
-    targetMinuteEl.scrollIntoView({
+    targetMinuteEl === null || targetMinuteEl === void 0 ? void 0 : targetMinuteEl.scrollIntoView({
       behavior: 'auto',
       block: 'center'
     });
@@ -58,4 +59,36 @@ function setObserverOptions(mainContainer) {
     threshold: 1,
     rootMargin: '-40px'
   };
+}
+function onChangeFormatter(event, isAMPMVariant) {
+  if (event.currentTarget.value === undefined || event.currentTarget.value === ':') return '';
+  if (isAMPMVariant) {
+    event.currentTarget.value = String(event.currentTarget.value).replace(/(\d{2})(\d{2})/, function (match, hours, minutes) {
+      var formattedHours = hours;
+      var formattedMinutes = minutes;
+      if (formattedHours.length === 2) {
+        formattedHours = Math.min(parseInt(formattedHours, 10), 12).toString().padStart(2, '0');
+      }
+      if (formattedMinutes.length === 2) {
+        formattedMinutes = Math.min(parseInt(formattedMinutes, 10), 59).toString().padStart(2, '0');
+      }
+      return "".concat(formattedHours, ":").concat(formattedMinutes);
+    }).replace(/(:\d{2})\d*$/, function (match) {
+      var minutesMatch = match.substring(1);
+      var formattedMinutes = Math.min(parseInt(minutesMatch, 10), 59).toString().padStart(2, '0');
+      return ":".concat(formattedMinutes);
+    }).substring(0, 11);
+    return event.currentTarget.value;
+  }
+  return String(event.currentTarget.value).replace(/\D/g, '').replace(/(\d{2})(\d)/, function (match, hours, minutes) {
+    var formattedHours = hours;
+    if (formattedHours.length === 2) {
+      formattedHours = Math.min(parseInt(formattedHours, 10), 23).toString().padStart(2, '0');
+    }
+    return "".concat(formattedHours, ":").concat(minutes);
+  }).replace(/(:\d{2})\d*$/, function (match) {
+    var minutesMatch = match.substring(1);
+    var formattedMinutes = Math.min(parseInt(minutesMatch, 10), 59).toString().padStart(2, '0');
+    return ":".concat(formattedMinutes);
+  }).substring(0, 5);
 }

package/dist/components/Toast/index.js

@@ -23,7 +23,6 @@ var ToastContainer = function ToastContainer() {
     toasts = _useContext.toasts,
     remove = _useContext.remove;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ReactPortal.ReactPortal, {
-    wrapperId: "toast-root",
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.StyledToastContainerOverlay, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StyledToastManagerOverlay, {
         position: "top",

package/dist/components/Tooltip/index.js

@@ -142,7 +142,6 @@ var Tooltip = function Tooltip(_ref) {
       }
     },
     children: [props.children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_ReactPortal.ReactPortal, {
-      wrapperId: "tooltip-portal",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipLabel.TooltipLabel, _objectSpread({
         isVisible: showTooltip,
         ref: tooltipLabelRef,

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

@@ -56,13 +56,13 @@ export declare function formatedPhone(phone: string, options?: {
  * @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.
  */
-export declare function formatPhone(phoneNumber: string): FormatPhoneProps | null;
+export declare function formatPhone(phoneNumber?: string): FormatPhoneProps | null;
 /**
  * Formats a guest phone number by masking digits except the last four digits for each format.
  * @param phoneNumber - The phone number to be formatted.
  * @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(phoneNumber?: string): FormatPhoneProps | null;
 /**
  * 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,EAAE,MAAM,GAAG,gBAAgB,GAAG,IAAI,CA6BxE;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,WAAW,EAAE,MAAM,GAAG,gBAAgB,GAAG,IAAI,CAkC7E;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,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"}

package/dist/utils/formatters/phone.js

@@ -176,10 +176,10 @@ function formatedPhone(phone) {
  * @returns {FormatPhoneProps | null} - An object containing different formats of the phone number or null if the number cannot be parsed.
  */
 function formatPhone(phoneNumber) {
-  if (phoneNumber.includes('*')) return formatGuestPhone(phoneNumber);
+  if (phoneNumber !== null && phoneNumber !== void 0 && phoneNumber.includes('*')) return formatGuestPhone(phoneNumber);
 
   // Parses the phone number
-  var parsedNumber = (0, _max.parsePhoneNumberFromString)(phoneNumber);
+  var parsedNumber = (0, _max.parsePhoneNumberFromString)(phoneNumber || '');
   if (!parsedNumber) {
     return null;
   }
@@ -201,7 +201,7 @@ function formatPhone(phoneNumber) {
  * @returns The formatted phone number object, or null if the formatting is not possible.
  */
 function formatGuestPhone(phoneNumber) {
-  var phone = phoneNumber.replace(/\*/g, '9');
+  var phone = phoneNumber === null || phoneNumber === void 0 ? void 0 : phoneNumber.replace(/\*/g, '9');
   var phoneFormatter = formatPhone(phone);
   if (!phoneFormatter) {
     return null;

package/package.json

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