@pedidopago/ui 1.7.16 → 1.7.18

package/dist/components/Tag/tag.test.d.ts

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

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

@@ -1,10 +1,10 @@
-import { IconName } from '../Icon/types';
-export interface ITagProps {
-    label: string;
-    fillColor?: string;
-    leftIcon?: IconName;
-    rightIcon?: IconName;
-    size?: 'sm' | 'md' | 'lg';
-    onClick?: () => void;
-}
+import { IconName } from '../Icon/types';
+export interface ITagProps {
+    label: string;
+    fillColor?: string;
+    leftIcon?: IconName;
+    rightIcon?: IconName;
+    size?: 'sm' | 'md' | 'lg';
+    onClick?: () => void;
+}
 //# sourceMappingURL=types.d.ts.map

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

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { ITextAreaInputProps } from './types';
-declare const TextAreaInput: import("react").ForwardRefExoticComponent<ITextAreaInputProps & import("react").RefAttributes<HTMLTextAreaElement>>;
-export default TextAreaInput;
+/// <reference types="react" />
+import { ITextAreaInputProps } from './types';
+declare const TextAreaInput: import("react").ForwardRefExoticComponent<ITextAreaInputProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+export default TextAreaInput;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,19 +1,19 @@
-/// <reference types="react" />
-import { IStyledTextAreaInput } from './types';
-export declare const Wrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledTextAreaInput, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Label: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledTextAreaInput, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
-export declare const TextArea: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledTextAreaInput, import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, {}>;
-export declare const HelperText: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledTextAreaInput, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+/// <reference types="react" />
+import { IStyledTextAreaInput } from './types';
+export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledTextAreaInput, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Label: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledTextAreaInput, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
+export declare const TextArea: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledTextAreaInput, import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, {}>;
+export declare const HelperText: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledTextAreaInput, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

package/dist/components/TextAreaInput/text-area-input.test.d.ts

@@ -1,2 +1,2 @@
-import '@testing-library/jest-dom';
+import '@testing-library/jest-dom';
 //# sourceMappingURL=text-area-input.test.d.ts.map

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

@@ -1,27 +1,27 @@
-import { ChangeEventHandler, Ref, TextareaHTMLAttributes } from 'react';
-export type AlertOptions = 'informative' | 'success' | 'warning' | 'error';
-export type formRegister = {
-    onChange: ChangeEventHandler<HTMLTextAreaElement>;
-    onBlur: ChangeEventHandler;
-    ref: Ref<any>;
-    name: string;
-};
-export interface ITextAreaInputProps extends TextareaHTMLAttributes<any> {
-    isDisabled?: boolean;
-    alert?: AlertOptions;
-    isInvalid?: boolean;
-    label?: string;
-    helperText?: string;
-    maxWidth?: number | string;
-    height?: number | string;
-    formRegister?: formRegister;
-}
-export type IStyledTextAreaInput = {
-    hasValueOnInput?: boolean;
-    height?: number | string;
-    maxWidth?: number | string;
-    isLoading?: boolean;
-    isInvalid?: boolean;
-    alert?: AlertOptions;
-};
+import { ChangeEventHandler, Ref, TextareaHTMLAttributes } from 'react';
+export type AlertOptions = 'informative' | 'success' | 'warning' | 'error';
+export type formRegister = {
+    onChange: ChangeEventHandler<HTMLTextAreaElement>;
+    onBlur: ChangeEventHandler;
+    ref: Ref<any>;
+    name: string;
+};
+export interface ITextAreaInputProps extends TextareaHTMLAttributes<any> {
+    isDisabled?: boolean;
+    alert?: AlertOptions;
+    isInvalid?: boolean;
+    label?: string;
+    helperText?: string;
+    maxWidth?: number | string;
+    height?: number | string;
+    formRegister?: formRegister;
+}
+export type IStyledTextAreaInput = {
+    hasValueOnInput?: boolean;
+    height?: number | string;
+    maxWidth?: number | string;
+    isLoading?: boolean;
+    isInvalid?: boolean;
+    alert?: AlertOptions;
+};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { IThumbnailProps } from './types';
-export declare function Thumbnail({ src, alt, maxAllowedSize, color, isUploading, size, onSelect, getThumbImage, }: IThumbnailProps): JSX.Element;
+/// <reference types="react" />
+import { IThumbnailProps } from './types';
+export declare function Thumbnail({ src, alt, maxAllowedSize, color, isUploading, size, onSelect, getThumbImage, }: IThumbnailProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,39 +1,39 @@
-/// <reference types="react" />
-import { IStyledThumbnail } from './types';
-export declare const Wrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledThumbnail, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const FileWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledThumbnail & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;
-export declare const ThumbWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledThumbnail & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;
-export declare const PreviewImage: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledThumbnail, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
-export declare const SelectRadio: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledThumbnail, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const FileInput: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
-export declare const InputRadio: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledThumbnail, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
-export declare const HelpText: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledThumbnail, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+/// <reference types="react" />
+import { IStyledThumbnail } from './types';
+export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledThumbnail, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FileWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledThumbnail & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const ThumbWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledThumbnail & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const PreviewImage: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledThumbnail, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const SelectRadio: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledThumbnail, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FileInput: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
+export declare const InputRadio: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledThumbnail, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+export declare const HelpText: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledThumbnail, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

package/dist/components/Thumbnail/thumbnail.test.d.ts

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

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

@@ -1,29 +1,29 @@
-import { ChangeEvent } from 'react';
-export interface IThumbnailProps {
-    src?: string;
-    alt?: string;
-    isUploading?: boolean;
-    maxAllowedSize?: number;
-    color?: string;
-    size?: 'sm' | 'md' | 'lg';
-    onSelect?: (event: ChangeEvent<HTMLInputElement>) => void;
-    getThumbImage?: (file: File) => void;
-}
-export type ImageState = {
-    preview: string;
-    alt?: string;
-};
-export interface IStyledThumbnail {
-    selectedColor?: string;
-    darkerGray?: string;
-    darkGray?: string;
-    grayColor?: string;
-    borderGray?: string;
-    showRadio?: boolean;
-    toBeSelected?: boolean;
-    size?: string;
-    sizeImage?: string;
-    isFileInput?: boolean;
-    textColor?: string;
-}
+import { ChangeEvent } from 'react';
+export interface IThumbnailProps {
+    src?: string;
+    alt?: string;
+    isUploading?: boolean;
+    maxAllowedSize?: number;
+    color?: string;
+    size?: 'sm' | 'md' | 'lg';
+    onSelect?: (event: ChangeEvent<HTMLInputElement>) => void;
+    getThumbImage?: (file: File) => void;
+}
+export type ImageState = {
+    preview: string;
+    alt?: string;
+};
+export interface IStyledThumbnail {
+    selectedColor?: string;
+    darkerGray?: string;
+    darkGray?: string;
+    grayColor?: string;
+    borderGray?: string;
+    showRadio?: boolean;
+    toBeSelected?: boolean;
+    size?: string;
+    sizeImage?: string;
+    isFileInput?: boolean;
+    textColor?: string;
+}
 //# sourceMappingURL=types.d.ts.map

package/dist/components/Thumbnail/utils/index.d.ts

@@ -1,3 +1,3 @@
-export * from './validate-file-size';
-export * from './validate-file-type';
+export * from './validate-file-size';
+export * from './validate-file-type';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Thumbnail/utils/validate-file-size.d.ts

@@ -1,2 +1,2 @@
-export declare function isValidFileSize(fileSize: number, maxAllowedSize: number): boolean;
+export declare function isValidFileSize(fileSize: number, maxAllowedSize: number): boolean;
 //# sourceMappingURL=validate-file-size.d.ts.map

package/dist/components/Thumbnail/utils/validate-file-type.d.ts

@@ -1,2 +1,2 @@
-export declare function isValidFileType(fileName: string): boolean;
+export declare function isValidFileType(fileName: string): boolean;
 //# sourceMappingURL=validate-file-type.d.ts.map

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

@@ -1,5 +1,5 @@
-export declare const TWENTYFOUR_HOUR_LIST: string[];
-export declare const AMPM_HOUR_LIST: string[];
-export declare const MINUTE_LIST: string[];
-export declare const TIMEPERIODS: string[];
+export declare const TWENTYFOUR_HOUR_LIST: string[];
+export declare const AMPM_HOUR_LIST: string[];
+export declare const MINUTE_LIST: string[];
+export declare const TIMEPERIODS: string[];
 //# sourceMappingURL=constants.d.ts.map

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

@@ -1,5 +1,5 @@
-import { InputHTMLAttributes } from 'react';
-import { TimeInputProps } from './types';
-import { InputGroupProps } from '../Input/types';
-export declare const TimeInput: import("react").ForwardRefExoticComponent<InputGroupProps & InputHTMLAttributes<HTMLInputElement> & TimeInputProps & import("react").RefAttributes<HTMLInputElement>>;
+import { InputHTMLAttributes } from 'react';
+import { TimeInputProps } from './types';
+import { InputGroupProps } from '../Input/types';
+export declare const TimeInput: import("react").ForwardRefExoticComponent<InputGroupProps & InputHTMLAttributes<HTMLInputElement> & TimeInputProps & import("react").RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,17 +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>, {}>;
+/// <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

@@ -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/types.d.ts

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

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

@@ -1,9 +1,10 @@
-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;
-};
+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;
+};
+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/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