@pedidopago/ui 1.6.12 → 1.7.0-0

package/dist/components/TimeInput/index.js

@@ -0,0 +1,303 @@
+"use strict";
+
+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); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TimeInput = void 0;
+var _react = require("react");
+var _Button = _interopRequireDefault(require("../Button"));
+var _Flex = _interopRequireDefault(require("../Flex"));
+var _Icon = _interopRequireDefault(require("../Icon"));
+var _Input = _interopRequireDefault(require("../Input"));
+var _Typography = _interopRequireDefault(require("../Typography"));
+var _Modal = require("../Modal");
+var _Observer = require("../Observer");
+var _useDraggableScroll4 = require("../../shared/hooks/useDraggableScroll");
+var _utils = require("./utils");
+var _constants = require("./constants");
+var _styles = require("./styles");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["label", "placeholder", "helperText", "alert", "variant"];
+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; }
+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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var TimeInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _ref$label = _ref.label,
+    label = _ref$label === void 0 ? '' : _ref$label,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder,
+    helperText = _ref.helperText,
+    alert = _ref.alert,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? '24_hours' : _ref$variant,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isModalOpen = _useState2[0],
+    setIsModalOpen = _useState2[1];
+  var timeInputRef = (0, _react.useRef)(null);
+  var mainContainer = (0, _react.useRef)(null);
+  var hourContainerRef = (0, _react.useRef)(null);
+  var minuteContainerRef = (0, _react.useRef)(null);
+  var hourElementRef = (0, _react.useRef)(null);
+  var minuteElementRef = (0, _react.useRef)(null);
+  var timePeriodContainerRef = (0, _react.useRef)(null);
+  var _useState3 = (0, _react.useState)('00:00'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedTime = _useState4[0],
+    setSelectedTime = _useState4[1];
+  var _useState5 = (0, _react.useState)(),
+    _useState6 = _slicedToArray(_useState5, 2),
+    timeValue = _useState6[0],
+    setTimeValue = _useState6[1];
+  var _useState7 = (0, _react.useState)('PM'),
+    _useState8 = _slicedToArray(_useState7, 2),
+    selectedPeriod = _useState8[0],
+    setSelectedPeriod = _useState8[1];
+  var _useState9 = (0, _react.useState)(),
+    _useState10 = _slicedToArray(_useState9, 2),
+    periodValue = _useState10[0],
+    setPeriodValue = _useState10[1];
+  var HOUR_LIST = variant === '24_hours' ? _constants.TWENTYFOUR_HOUR_LIST : _constants.AMPM_HOUR_LIST;
+  var observerOptions = (0, _utils.setObserverOptions)(mainContainer);
+  var isAMPMVariant = variant === 'am_pm';
+  var _useDraggableScroll = (0, _useDraggableScroll4.useDraggableScroll)(hourContainerRef, {
+      direction: 'vertical'
+    }),
+    onMouseDownHour = _useDraggableScroll.onMouseDown;
+  var _useDraggableScroll2 = (0, _useDraggableScroll4.useDraggableScroll)(minuteContainerRef, {
+      direction: 'vertical'
+    }),
+    onMouseDownMinute = _useDraggableScroll2.onMouseDown;
+  var _useDraggableScroll3 = (0, _useDraggableScroll4.useDraggableScroll)(timePeriodContainerRef, {
+      direction: 'vertical'
+    }),
+    onMouseDownTimePeriod = _useDraggableScroll3.onMouseDown;
+  (0, _react.useImperativeHandle)(ref, function () {
+    return timeInputRef.current;
+  });
+
+  // scrolling input value hour and minute to respective elements:
+  (0, _react.useEffect)(function () {
+    if (!hourContainerRef.current || !minuteContainerRef.current || !timeValue) return;
+    (0, _utils.handleScrollIntoView)(hourContainerRef, minuteContainerRef, timeValue, timePeriodContainerRef);
+  }, [isModalOpen]);
+  function handleOnClose() {
+    setIsModalOpen(function (oldState) {
+      return !oldState;
+    });
+  }
+  function handleOpenTimePicker() {
+    if (!rest.disabled) setIsModalOpen(function (oldState) {
+      return !oldState;
+    });
+  }
+  function handleConfirm() {
+    var timeFormatted = selectedTime;
+    if (isAMPMVariant) {
+      setPeriodValue(periodValue);
+      // add am_pm values:
+      timeFormatted = "".concat(selectedTime, " ").concat(selectedPeriod);
+      setTimeValue(timeFormatted);
+    } else {
+      setTimeValue(timeFormatted);
+    }
+    if (timeInputRef.current) {
+      var _nativeInputValueSett;
+      var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value');
+      nativeInputValueSetter === null || nativeInputValueSetter === void 0 ? void 0 : (_nativeInputValueSett = nativeInputValueSetter.set) === null || _nativeInputValueSett === void 0 ? void 0 : _nativeInputValueSett.call(timeInputRef.current, timeFormatted);
+      var event = new Event('input', {
+        bubbles: true
+      });
+      timeInputRef.current.dispatchEvent(event);
+    }
+    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({
+      "data-testid": "time-input",
+      ref: timeInputRef,
+      withIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        name: "clock",
+        color: "neutral.neutral3"
+      }),
+      label: label,
+      type: "text",
+      placeholder: "HH:MM",
+      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, {
+      maxWidth: "min(400px, 90%)",
+      maxHeight: "370px",
+      open: isModalOpen,
+      onClose: handleOnClose,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Flex.default, {
+        direction: "column",
+        alignItems: "center",
+        spacing: "8",
+        style: {
+          padding: '2em',
+          width: '100%'
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ClockContent, {
+          ref: mainContainer,
+          variant: variant,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.DigitContainer, {
+            ref: hourContainerRef,
+            onMouseDown: onMouseDownHour,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "hour_separator",
+              ref: hourElementRef
+            }), HOUR_LIST.map(function (hour, index) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Observer.Observer, {
+                onObserved: function onObserved() {
+                  setSelectedTime(function (state) {
+                    var _state$split = state.split(':'),
+                      _state$split2 = _slicedToArray(_state$split, 2),
+                      minute = _state$split2[1];
+                    return "".concat(hour, ":").concat(minute);
+                  });
+                },
+                observerOptions: observerOptions,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+                    fontSize: "xl",
+                    fontWeight: "600",
+                    color: "neutral.neutral6",
+                    "data-input-hour": hour,
+                    children: hour
+                  })
+                })
+              }, "hour-".concat(index));
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "comma",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+              fontSize: "xl",
+              fontWeight: "600",
+              color: "neutral.neutral6",
+              children: ':'
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.DigitContainer, {
+            ref: minuteContainerRef,
+            onMouseDown: onMouseDownMinute,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "minutes_separator",
+              ref: minuteElementRef
+            }), _constants.MINUTE_LIST.map(function (minute, index) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Observer.Observer, {
+                onObserved: function onObserved() {
+                  setSelectedTime(function (state) {
+                    var _state$split3 = state.split(':'),
+                      _state$split4 = _slicedToArray(_state$split3, 1),
+                      hour = _state$split4[0];
+                    return "".concat(hour, ":").concat(minute);
+                  });
+                },
+                observerOptions: observerOptions,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+                    fontSize: "xl",
+                    fontWeight: "600",
+                    color: "neutral.neutral6",
+                    "data-input-minute": minute,
+                    children: minute
+                  })
+                })
+              }, "minute-".concat(index));
+            })]
+          }), isAMPMVariant && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.DigitContainer, {
+            ref: timePeriodContainerRef,
+            onMouseDown: onMouseDownTimePeriod,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "ampm_separator",
+              ref: minuteElementRef
+            }), _constants.TIMEPERIODS.map(function (period, index) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Observer.Observer, {
+                onObserved: function onObserved() {
+                  setSelectedPeriod(period);
+                },
+                observerOptions: observerOptions,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+                    fontSize: "xl",
+                    fontWeight: "600",
+                    color: "neutral.neutral6",
+                    "data-input-period": period,
+                    children: period
+                  })
+                })
+              }, "am-pm-".concat(index));
+            })]
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Flex.default, {
+          direction: "row",
+          alignItems: "center",
+          spacing: "4",
+          style: {
+            width: '100%'
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+            variant: "outline",
+            bgColor: "tertiary.default",
+            textColor: "tertiary.focus",
+            fullWidth: true,
+            onClick: handleOnClose,
+            children: "Cancelar"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+            fullWidth: true,
+            onClick: handleConfirm,
+            "data-testid": "time-input-confirm-button",
+            children: "Ok"
+          })]
+        })]
+      })
+    })]
+  });
+});
+exports.TimeInput = TimeInput;
+TimeInput.displayName = 'TimeInput';

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { TimeInputProps } from './types';
+export declare const TimeInputContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DigitContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ClockContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    variant: TimeInputProps['variant'];
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/TimeInput/styles.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TimeInputContainer = exports.DigitContainer = exports.ClockContent = void 0;
+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"])));
+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;
+var ClockContent = _styled.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  --border: 2px solid ", ";\n  position: relative;\n\n  display: flex;\n  flex-direction: row;\n  gap: 1em;\n  justify-content: center;\n\n  background-color: ", ";\n  width: 300px;\n  height: 144px;\n  overflow: hidden;\n\n  scroll-snap-type: y mandatory;\n\n  .comma {\n    display: flex;\n    align-items: center;\n  }\n\n  .hour_separator {\n    position: absolute;\n    top: 46px;\n    left: ", ";\n\n    height: 50px;\n    width: 55px;\n\n    border-top: var(--border);\n    border-bottom: var(--border);\n\n    pointer-events: none;\n  }\n\n  .minutes_separator {\n    position: absolute;\n    top: 46px;\n    left: ", ";\n\n    height: 50px;\n    width: 55px;\n\n    border-top: var(--border);\n    border-bottom: var(--border);\n\n    pointer-events: none;\n  }\n\n  .ampm {\n    display: flex;\n    align-items: center;\n    margin-left: 10px;\n  }\n\n  .ampm_separator {\n    position: absolute;\n    top: 46px;\n    left: 200px;\n\n    height: 50px;\n    width: 55px;\n\n    border-top: var(--border);\n    border-bottom: var(--border);\n\n    pointer-events: none;\n  }\n\n  :before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: linear-gradient(to bottom, transparent 50%, white 100%);\n    pointer-events: none;\n  }\n\n  :after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: linear-gradient(to top, transparent 50%, white 100%);\n    pointer-events: none;\n  }\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.colors.tertiary.default;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.colors.neutral.white;
+}, function (_ref3) {
+  var variant = _ref3.variant;
+  return variant === '24_hours' ? '75px' : '40px';
+}, function (_ref4) {
+  var variant = _ref4.variant;
+  return variant === '24_hours' ? '165px' : '125px';
+});
+exports.ClockContent = ClockContent;

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

@@ -0,0 +1,5 @@
+export type TimeInputProps = {
+    variant?: 'am_pm' | '24_hours';
+};
+export type TimePeriod = 'AM' | 'PM';
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/TimeInput/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,CAAC"}

package/dist/components/TimeInput/types.js

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1,9 @@
+import { RefObject } from 'react';
+export declare function handleScrollIntoView(hourContainerRef: RefObject<HTMLDivElement>, minuteContainerRef: RefObject<HTMLDivElement>, inputValue: string, timePeriodContainerRef?: RefObject<HTMLDivElement>): void;
+export declare function handleSetNativeInputValue(timeInputRef: RefObject<HTMLInputElement>, value?: string | number | readonly string[]): void;
+export declare function setObserverOptions(mainContainer: RefObject<HTMLDivElement>): {
+    root: HTMLDivElement | null;
+    threshold: number;
+    rootMargin: string;
+};
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/TimeInput/utils.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.handleScrollIntoView = handleScrollIntoView;
+exports.handleSetNativeInputValue = handleSetNativeInputValue;
+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."); }
+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 handleScrollIntoView(hourContainerRef, minuteContainerRef, inputValue, timePeriodContainerRef) {
+  var _hourContainerRef$cur, _minuteContainerRef$c;
+  var _inputValue$split = inputValue.split(/:| /),
+    _inputValue$split2 = _slicedToArray(_inputValue$split, 3),
+    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({
+      behavior: 'auto',
+      block: 'center'
+    });
+    targetMinuteEl.scrollIntoView({
+      behavior: 'auto',
+      block: 'center'
+    });
+  }
+  if (timePeriodContainerRef && period) {
+    var _timePeriodContainerR;
+    var targetTimePeriodEl = (_timePeriodContainerR = timePeriodContainerRef.current) === null || _timePeriodContainerR === void 0 ? void 0 : _timePeriodContainerR.querySelector("[data-input-period=\"".concat(period, "\"]"));
+    if (targetTimePeriodEl) {
+      targetTimePeriodEl.scrollIntoView({
+        behavior: 'auto',
+        block: 'center'
+      });
+    }
+  }
+}
+function handleSetNativeInputValue(timeInputRef, value) {
+  var _nativeInputValueSett;
+  if (!timeInputRef.current) return;
+  var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value');
+  nativeInputValueSetter === null || nativeInputValueSetter === void 0 ? void 0 : (_nativeInputValueSett = nativeInputValueSetter.set) === null || _nativeInputValueSett === void 0 ? void 0 : _nativeInputValueSett.call(timeInputRef.current, value);
+  var event = new Event('input', {
+    bubbles: true
+  });
+  timeInputRef.current.dispatchEvent(event);
+}
+function setObserverOptions(mainContainer) {
+  return {
+    root: mainContainer === null || mainContainer === void 0 ? void 0 : mainContainer.current,
+    threshold: 1,
+    rootMargin: '-40px'
+  };
+}

package/dist/components/Timeline/components/Timeline.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
-import { ITimelineProps } from '../types';
-export declare const Timeline: FC<ITimelineProps>;
+import { FC } from 'react';
+import { ITimelineProps } from '../types';
+export declare const Timeline: FC<ITimelineProps>;
 //# sourceMappingURL=Timeline.d.ts.map

package/dist/components/Timeline/components/TimelineContent.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { ITimelineContentProps } from '../types';
-export declare const TimelineContent: ({ title, description, date, ...rest }: ITimelineContentProps) => JSX.Element;
+/// <reference types="react" />
+import { ITimelineContentProps } from '../types';
+export declare const TimelineContent: ({ title, description, date, ...rest }: ITimelineContentProps) => JSX.Element;
 //# sourceMappingURL=TimelineContent.d.ts.map

package/dist/components/Timeline/components/TimelineItem.d.ts

@@ -1,3 +1,3 @@
-import { FC, HTMLAttributes } from 'react';
-export declare const TimelineItem: FC<HTMLAttributes<HTMLLIElement>>;
+import { FC, HTMLAttributes } from 'react';
+export declare const TimelineItem: FC<HTMLAttributes<HTMLLIElement>>;
 //# sourceMappingURL=TimelineItem.d.ts.map

package/dist/components/Timeline/components/TimelineSeparator.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { ITimelineSeparatorProps } from '../types';
-export declare const TimelineSeparator: ({ icon, circleColor }: ITimelineSeparatorProps) => JSX.Element;
+/// <reference types="react" />
+import { ITimelineSeparatorProps } from '../types';
+export declare const TimelineSeparator: ({ icon, circleColor }: ITimelineSeparatorProps) => JSX.Element;
 //# sourceMappingURL=TimelineSeparator.d.ts.map

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

@@ -1,5 +1,5 @@
-export { Timeline } from './components/Timeline';
-export { TimelineItem } from './components/TimelineItem';
-export { TimelineSeparator } from './components/TimelineSeparator';
-export { TimelineContent } from './components/TimelineContent';
+export { Timeline } from './components/Timeline';
+export { TimelineItem } from './components/TimelineItem';
+export { TimelineSeparator } from './components/TimelineSeparator';
+export { TimelineContent } from './components/TimelineContent';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,32 +1,32 @@
-/// <reference types="react" />
-import { GenericStyledProps } from './types';
-export declare const TimelineContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    fullWidth?: boolean | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
-export declare const TimelineItemContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & GenericStyledProps, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
-export declare const TimelineSeparatorContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const TimelineSeparatorLine: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & GenericStyledProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const TimelineSeparatorCircle: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & GenericStyledProps & import("react").HTMLAttributes<HTMLDivElement> & {
-    icon?: import("react").ReactNode;
-    circleColor?: import("../..").GlobalColorsProps | (string & {}) | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const TimelineItemContent: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/// <reference types="react" />
+import { GenericStyledProps } from './types';
+export declare const TimelineContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    fullWidth?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
+export declare const TimelineItemContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericStyledProps, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
+export declare const TimelineSeparatorContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TimelineSeparatorLine: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericStyledProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TimelineSeparatorCircle: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericStyledProps & import("react").HTMLAttributes<HTMLDivElement> & {
+    icon?: import("react").ReactNode;
+    circleColor?: import("../..").GlobalColorsProps | (string & {}) | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TimelineItemContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

package/dist/components/Timeline/timeline.test.d.ts

@@ -1,2 +1,2 @@
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom/extend-expect';
 //# sourceMappingURL=timeline.test.d.ts.map

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

@@ -1,21 +1,21 @@
-import { HTMLAttributes, ReactNode } from 'react';
-import { ExtendThemeProps, GlobalColorsProps } from '../../shared/theme/theme.types';
-export type ITimelineProps = HTMLAttributes<HTMLUListElement> & {
-    position?: 'left' | 'right' | 'alternate';
-    fullWidth?: boolean;
-};
-export type ITimelineContentProps = HTMLAttributes<HTMLDivElement> & {
-    title: string;
-    description: string;
-    date?: Date;
-};
-export type ITimelineSeparatorProps = HTMLAttributes<HTMLDivElement> & {
-    icon?: ReactNode;
-    circleColor?: GlobalColorsProps | (string & {});
-};
-export type GenericStyledProps = {
-    theme?: ExtendThemeProps & {
-        position?: 'left' | 'right' | 'alternate';
-    };
-};
+import { HTMLAttributes, ReactNode } from 'react';
+import { ExtendThemeProps, GlobalColorsProps } from '../../shared/theme/theme.types';
+export type ITimelineProps = HTMLAttributes<HTMLUListElement> & {
+    position?: 'left' | 'right' | 'alternate';
+    fullWidth?: boolean;
+};
+export type ITimelineContentProps = HTMLAttributes<HTMLDivElement> & {
+    title: string;
+    description: string;
+    date?: Date;
+};
+export type ITimelineSeparatorProps = HTMLAttributes<HTMLDivElement> & {
+    icon?: ReactNode;
+    circleColor?: GlobalColorsProps | (string & {});
+};
+export type GenericStyledProps = {
+    theme?: ExtendThemeProps & {
+        position?: 'left' | 'right' | 'alternate';
+    };
+};
 //# sourceMappingURL=types.d.ts.map

package/dist/components/Toast/button-example.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-import { IToastConfig } from './types';
-declare const ToastButtonExample: ({ buttonText, ...options }: IToastConfig & {
-    buttonText?: String | undefined;
-}) => JSX.Element;
-export default ToastButtonExample;
+/// <reference types="react" />
+import { IToastConfig } from './types';
+declare const ToastButtonExample: ({ buttonText, ...options }: IToastConfig & {
+    buttonText?: String | undefined;
+}) => JSX.Element;
+export default ToastButtonExample;
 //# sourceMappingURL=button-example.d.ts.map

package/dist/components/Toast/components/Toast.d.ts

@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { Toast as IToastProps } from '../types';
-declare const Toast: FC<IToastProps>;
-export default Toast;
+import { FC } from 'react';
+import { Toast as IToastProps } from '../types';
+declare const Toast: FC<IToastProps>;
+export default Toast;
 //# sourceMappingURL=Toast.d.ts.map