@pedidopago/ui 1.7.17 → 1.7.18

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