@tap-payments/os-micro-frontend-shared 0.0.121 → 0.0.123

package/build/components/Calender/Calender.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { BoxProps } from '@mui/material/Box';
+import { PopperPlacementType } from '@mui/material/Popper';
+import { CalendarProps, DateObject } from 'react-multi-date-picker';
+interface CalenderI extends CalendarProps {
+    isAr?: boolean;
+    value?: DateObject;
+    setValue?: (v: DateObject) => void;
+    enableTimePicker?: boolean;
+    placement?: PopperPlacementType;
+}
+declare function Calender({ isAr, value, setValue, enableTimePicker, placement, ...props }: CalenderI & BoxProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof Calender>;
+export default _default;

package/build/components/Calender/Calender.js

@@ -0,0 +1,56 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useState } from 'react';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import Popper from '@mui/material/Popper';
+import { useTranslation } from 'react-i18next';
+import { Calendar, DateObject } from 'react-multi-date-picker';
+import TimePicker, { getDefaultHour, getDefaultMinute } from '../Timepicker';
+import { darkLeftArrowIcon, darkRightArrowIcon } from '../../constants/index.js';
+import { ArrowButton, CalenderWrapper, SelectedDate, Wrapper, ButtonsWrapper, CancelButton, OkayButton, FooterButtonsWrapper } from './style';
+const weekDays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+function Calender(_a) {
+    var { isAr = false, value, setValue, enableTimePicker, placement } = _a, props = __rest(_a, ["isAr", "value", "setValue", "enableTimePicker", "placement"]);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [date, setDate] = useState(value ? new DateObject(new Date(value.toLocaleString())) : new DateObject(new Date()));
+    const [tempDate, setTempDate] = useState(value ? new DateObject(new Date(value.toLocaleString())) : new DateObject(new Date()));
+    const [time, setTime] = useState({ hour: getDefaultHour(), minute: getDefaultMinute() });
+    const { t } = useTranslation();
+    const open = Boolean(anchorEl);
+    const getArrow = (direction) => {
+        if (direction === 'right') {
+            return isAr ? darkLeftArrowIcon : darkRightArrowIcon;
+        }
+        return isAr ? darkRightArrowIcon : darkLeftArrowIcon;
+    };
+    const onOpen = (e) => {
+        setAnchorEl(e.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const handleSubmit = () => {
+        const dateValue = enableTimePicker ? tempDate.setHour(time.hour).setMinute(time.minute) : tempDate;
+        setDate(dateValue);
+        if (setValue)
+            setValue(dateValue);
+        handleClose();
+    };
+    const onChangeTimepicker = (newTime) => {
+        setTime(newTime);
+    };
+    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: handleClose }, { children: _jsxs(Wrapper, Object.assign({ sx: Object.assign({}, props.sx) }, { children: [_jsx(SelectedDate, Object.assign({ onClick: onOpen, open: open, className: "date-button" }, { children: date.format('MMM D, YYYY') })), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: placement }, { children: _jsxs(CalenderWrapper, Object.assign({ className: "calender-content", open: open }, { children: [_jsx(Calendar, Object.assign({ numberOfMonths: 1, format: "MMM DD", monthYearSeparator: ' ', renderButton: (direction, handleClick) => (_jsx(ArrowButton, Object.assign({ onClick: handleClick }, { children: _jsx("img", { src: getArrow(direction), alt: "arrow" }) }))), onChange: (v) => {
+                                    setTempDate(v);
+                                }, weekDays: !isAr ? weekDays : undefined, minDate: new Date(), value: date }, props)), _jsxs(ButtonsWrapper, Object.assign({ sx: Object.assign({}, (enableTimePicker && { justifyContent: 'space-between' })) }, { children: [enableTimePicker && _jsx(TimePicker, { onChange: onChangeTimepicker }), _jsxs(FooterButtonsWrapper, { children: [_jsx(CancelButton, Object.assign({ variant: "contained", onClick: handleClose }, { children: t('cancel') })), _jsx(OkayButton, Object.assign({ variant: "contained", onClick: handleSubmit }, { children: t('okay') }))] })] }))] })) }))] })) })));
+}
+export default memo(Calender);

package/build/components/Calender/index.d.ts

@@ -0,0 +1,2 @@
+import Calender from './Calender';
+export default Calender;

package/build/components/Calender/index.js

@@ -0,0 +1,2 @@
+import Calender from './Calender';
+export default Calender;

package/build/components/Calender/style.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+export declare const ArrowButton: import("@emotion/styled").StyledComponent<import("@mui/material/Button").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "disabled" | "className" | "style" | "classes" | "color" | "children" | "sx" | "tabIndex" | "size" | "variant" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "href" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const Wrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const CalenderWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    open: boolean;
+}, {}, {}>;
+export declare const SelectedDate: import("@emotion/styled").StyledComponent<import("@mui/material/Button").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "disabled" | "className" | "style" | "classes" | "color" | "children" | "sx" | "tabIndex" | "size" | "variant" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "href" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    open: boolean;
+}, {}, {}>;
+export declare const ButtonsWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const CancelButton: import("@emotion/styled").StyledComponent<import("@mui/material/Button").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "disabled" | "className" | "style" | "classes" | "color" | "children" | "sx" | "tabIndex" | "size" | "variant" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "href" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const OkayButton: import("@emotion/styled").StyledComponent<import("@mui/material/Button").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "disabled" | "className" | "style" | "classes" | "color" | "children" | "sx" | "tabIndex" | "size" | "variant" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "href" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const FooterButtonsWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/build/components/Calender/style.js

@@ -0,0 +1,171 @@
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import { styled } from '@mui/material/styles';
+export const ArrowButton = styled(Button)(() => ({
+    minWidth: 'auto',
+    padding: 0,
+    '& > img': {
+        cursor: 'pointer',
+    },
+}));
+export const Wrapper = styled(Box)(() => ({
+    position: 'relative',
+}));
+export const CalenderWrapper = styled(Box, { shouldForwardProp: (props) => props !== 'open' })(({ open, theme }) => ({
+    display: open ? 'flex' : 'none',
+    flexDirection: 'column',
+    background: theme.palette.common.white,
+    boxShadow: theme.shadows[9],
+    borderRadius: theme.spacing(1),
+    top: 37,
+    color: theme.palette.text.primary,
+    fontSize: '11px',
+    margin: '8px 0',
+    '.rmdp-calendar': {
+        padding: '8px 16px 16px',
+    },
+    '.rmdp-rtl *': {
+        fontFamily: 'Tajawal',
+    },
+    '.rmdp-rtl .sd': {
+        paddingTop: '4px',
+    },
+    '.rmdp-wrapper': {
+        position: 'relative',
+        borderRadius: '8px',
+        boxShadow: 'none',
+    },
+    '.rmdp-day span': {
+        fontSize: '11px',
+        fontWeight: 500,
+    },
+    '.rmdp-day, .rmdp-week-day': {
+        width: 40,
+        height: 40,
+        marginBottom: '2px',
+        padding: '4px',
+        fontSize: '11px',
+        color: theme.palette.grey[900],
+    },
+    '.rmdp-day-picker': {
+        padding: 0,
+    },
+    '.rmdp-day.rmdp-today span': {
+        backgroundColor: 'transparent',
+        color: theme.palette.info.dark,
+    },
+    '.rmdp-day.rmdp-today.end span, .rmdp-day.rmdp-today.end span': {
+        color: theme.palette.common.white,
+    },
+    '.rmdp-range, .rmdp-day:not(.rmdp-disabled):not(.rmdp-day-hidden) span:hover': {
+        background: theme.palette.info.light,
+        boxShadow: 'none',
+        color: theme.palette.grey[900],
+    },
+    '.rmdp-range-hover.start, .rmdp-range.start, .rmdp-range-hover.end, .rmdp-range.end, .rmdp-rtl .rmdp-range-hover.start, .rmdp-rtl .rmdp-range.start, .rmdp-rtl .rmdp-range-hover.end, .rmdp-rtl .rmdp-range.end': {
+        borderRadius: '50%',
+        background: theme.palette.background.gradient.darkShadedBlue,
+        color: theme.palette.common.white,
+    },
+    '.rmdp-range.start:after': {
+        content: '""',
+        position: 'absolute',
+        background: theme.palette.info.light,
+        height: '100%',
+        width: '50%',
+        right: 0,
+        top: 0,
+        zIndex: -1,
+    },
+    '.rmdp-rtl .rmdp-range.start:after': {
+        right: 'unset',
+        left: 0,
+    },
+    '.rmdp-range.end:after': {
+        content: '""',
+        position: 'absolute',
+        background: theme.palette.info.light,
+        height: '100%',
+        width: '50%',
+        left: 0,
+        top: 0,
+        zIndex: -1,
+    },
+    '.rmdp-rtl .rmdp-range.end:after': {
+        left: 'unset',
+        right: 0,
+    },
+    '.rmdp-week-day': {
+        color: theme.palette.grey[700],
+        marginBottom: '4px',
+        fontSize: '11px',
+        padding: '4px',
+    },
+    '.rmdp-header-values': {
+        color: theme.palette.grey[900],
+        fontSize: '12px',
+        fontWeight: 500,
+        lineHeight: '20px',
+        letterSpacing: '0.1px',
+    },
+    '.rmdp-header-values span:nth-of-type(2)': {
+        display: 'none',
+    },
+    '.rmdp-header': {
+        padding: '4px 0',
+        margin: 0,
+        fontSize: '12px',
+    },
+    '.rmdp-top-class': {
+        display: 'block !important',
+    },
+    '.rmdp-day.rmdp-selected span:not(.highlight)': {
+        background: theme.palette.info.dark,
+    },
+    '.rmdp-day.start.end': {
+        overflow: 'hidden',
+    },
+}));
+export const SelectedDate = styled(Button, { shouldForwardProp: (props) => props !== 'open' })(({ open, theme }) => (Object.assign({ color: theme.palette.text.primary, fontSize: '11px', fontWeight: 500, padding: theme.spacing(1), borderRadius: '4px', border: '1px solid', borderColor: theme.palette.divider, background: theme.palette.common.white, textTransform: 'none', height: 32 }, (open && { border: '1px solid', borderColor: theme.palette.info.dark, boxShadow: theme.shadows[7] }))));
+export const ButtonsWrapper = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    gap: 8,
+    padding: '16px',
+    borderTop: `1px solid ${theme.palette.divider}`,
+}));
+export const CancelButton = styled(Button)(({ theme }) => ({
+    textTransform: 'capitalize',
+    padding: '8px 24px',
+    width: 75,
+    height: 32,
+    fontSize: '11px',
+    background: 'transparent',
+    color: theme.palette.text.primary,
+    border: '1px solid',
+    borderColor: theme.palette.divider,
+    fontWeight: 500,
+    borderRadius: '4px',
+    '&:hover': {
+        background: 'transparent',
+        color: theme.palette.text.primary,
+    },
+}));
+export const OkayButton = styled(Button)(({ theme }) => ({
+    textTransform: 'capitalize',
+    padding: '8px 24px',
+    width: 75,
+    height: 32,
+    fontSize: '11px',
+    borderRadius: '4px',
+    fontWeight: 700,
+    background: theme.palette.info.dark,
+    '&:hover': {
+        background: theme.palette.info.dark,
+    },
+}));
+export const FooterButtonsWrapper = styled(Box)(() => ({
+    display: 'flex',
+    gap: '8px',
+}));

package/build/components/CountryFlag/CountryFlag.js

@@ -12,9 +12,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo } from 'react';
 import Box from '@mui/material/Box';
-import { defaultCountryIcon, getCountriesIcon } from '../../constants/index.js';
+import { defaultCountryIcon } from '../../constants/index.js';
 function CountryFlag(_a) {
     var { code } = _a, props = __rest(_a, ["code"]);
-    return (_jsx(Box, Object.assign({}, props, { component: "img", src: code ? getCountriesIcon(code) : defaultCountryIcon, alt: code, sx: Object.assign(Object.assign({ width: 16 }, (code && { height: 12, borderRadius: '3px' })), props.sx), loading: "lazy" })));
+    return (_jsx(Box, Object.assign({}, props, { component: "img", src: code || defaultCountryIcon, alt: code, sx: Object.assign(Object.assign({ width: 16 }, (code && { height: 12, borderRadius: '3px' })), props.sx), loading: "lazy" })));
 }
 export default memo(CountryFlag);

package/build/components/MultiSelectStatusButton/MultiSelectStatusButton.js

@@ -5,10 +5,10 @@ import { Typography, Checkbox } from '@mui/material';
 import { ChevronIcon } from '../TableHeader_V2/components/StatusButtons/ChevronIcon';
 import StyledBadge, { BadgeVariants } from '../CountBadge';
 import CountryFlag from '../CountryFlag';
-import { formatNumber } from '../../utils/index.js';
+import { formatNumber, getCurrencyCodeFlag } from '../../utils/index.js';
 import { closeXIcon } from '../../constants/index.js';
 import { ChevronContainer, Label, LabelWrapper, StyledDropdown, MenuItemContainer, CheckboxStyles, StyledStatusButton, ClearIcon, ChevronIconWrapper, } from './style';
-function MultiSelectStatusButton({ options, selectedValues, onSelectionChange, label, variant = 'inActive' }) {
+function MultiSelectStatusButton({ options = [], selectedValues, onSelectionChange, label, variant = 'inActive' }) {
     const { t } = useTranslation();
     const [anchorEl, setAnchorEl] = useState(null);
     const buttonRef = useRef(null);
@@ -63,7 +63,7 @@ function MultiSelectStatusButton({ options, selectedValues, onSelectionChange, l
     const countBadge = (_jsx(StyledBadge, Object.assign({ pointer: true, variant: variant === 'active' ? BadgeVariants.ACTIVE : BadgeVariants.INACTIVE }, { children: formatNumber(selectedValues.length > 0 ? selectedValues.length : options.length) })));
     return (_jsxs(_Fragment, { children: [_jsx(StyledStatusButton, Object.assign({ buttonVariant: variant, ref: buttonRef, sx: {
                     paddingInlineEnd: '27px',
-                }, "data-testid": "MultiSelectStatusButton", onClick: handleDropdownClick, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false) }, { children: _jsxs(LabelWrapper, { children: [_jsxs(Label, Object.assign({ variant: variant }, { children: [getDisplayLabel(), countBadge] })), _jsxs(ChevronContainer, Object.assign({ onClick: isHovered && internalSelectedValues.length > 0 ? handleClearAll : undefined, sx: {
+                }, "data-testid": "MultiSelectStatusButton", onClick: handleDropdownClick, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), disabled: !options.length }, { children: _jsxs(LabelWrapper, { children: [_jsxs(Label, Object.assign({ variant: variant }, { children: [getDisplayLabel(), countBadge] })), _jsxs(ChevronContainer, Object.assign({ onClick: isHovered && internalSelectedValues.length > 0 ? handleClearAll : undefined, sx: {
                                 '&:hover': {
                                     backgroundColor: 'transparent',
                                 },
@@ -85,7 +85,7 @@ function MultiSelectStatusButton({ options, selectedValues, onSelectionChange, l
                                     var _a;
                                     e.stopPropagation();
                                     handleOptionToggle((_a = option.status) !== null && _a !== void 0 ? _a : '', e);
-                                } }), _jsx(CountryFlag, { code: option.flagCode || option.code, sx: { border: '1px solid white', borderRadius: '3px' } }), _jsx(Typography, Object.assign({ variant: "body2" }, { children: option.name }))] })),
+                                } }), _jsx(CountryFlag, { code: getCurrencyCodeFlag(option.code), sx: { border: '1px solid white', borderRadius: '3px' } }), _jsx(Typography, Object.assign({ variant: "body2" }, { children: option.name }))] })),
                     onClick: (e) => {
                         var _a;
                         e.preventDefault();

package/build/components/MultiSelectStatusButton/style.js

@@ -8,6 +8,9 @@ export const StyledStatusButton = styled(Button, {
     ? {
         background: theme.palette.background.gradient.shadedBlue,
         color: theme.palette.common.white,
+        '&:disabled': {
+            color: theme.palette.common.white,
+        },
     }
     : {
         backgroundColor: theme.palette.common.white,
@@ -16,6 +19,9 @@ export const StyledStatusButton = styled(Button, {
         '&:hover': {
             backgroundColor: 'white',
         },
+        '&:disabled': {
+            color: theme.palette.text.primary,
+        },
     }))));
 export const FlagContainer = styled(Box)(({ theme }) => ({
     display: 'flex',

package/build/components/Timepicker/Timepicker.d.ts

@@ -0,0 +1,9 @@
+export type Time = {
+    hour: number;
+    minute: number;
+};
+interface TimePickerProps {
+    onChange?: (time: Time) => void;
+}
+export declare function TimePicker({ onChange }: TimePickerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/components/Timepicker/Timepicker.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from 'react';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import Box from '@mui/material/Box';
+import Menu from '../Menu';
+import Text from '../Text';
+import { greyUpArrowIcon, greyDownArrowIcon } from '../../constants/index.js';
+import { Arrow, Button, Period, PeriodWrapper, Wrapper, Time, TimeWrapper, Input } from './style';
+import { getDefaultHour, getDefaultMinute } from './utils';
+import { maxHour, maxMinute, periodList } from './constant';
+export function TimePicker({ onChange }) {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [period, setPeriod] = useState(new Date().getHours() >= maxHour ? 'PM' : 'AM');
+    const [hours, setHours] = useState(getDefaultHour());
+    const [minutes, setMinutes] = useState(getDefaultMinute());
+    const open = Boolean(anchorEl);
+    const onOpen = (e) => {
+        setAnchorEl(e.currentTarget);
+    };
+    const onClose = () => {
+        setAnchorEl(null);
+        onChange === null || onChange === void 0 ? void 0 : onChange({ hour: period === 'PM' ? hours + 12 : hours, minute: minutes });
+    };
+    const onClickPeriod = (selectedPeriod) => {
+        setPeriod(selectedPeriod);
+    };
+    const onChangeHours = (e) => {
+        const value = Number(e.target.value);
+        if (value > maxHour) {
+            e.preventDefault();
+            return;
+        }
+        setHours(Number(e.target.value));
+    };
+    const onIncreaseHours = () => {
+        setHours((prev) => {
+            if (prev === maxHour)
+                return 1;
+            return prev + 1;
+        });
+    };
+    const onDecreaseHours = () => {
+        setHours((prev) => {
+            if (prev === 1)
+                return maxHour;
+            return prev - 1;
+        });
+    };
+    const onChangeMinutes = (e) => {
+        const value = Number(e.target.value);
+        if (value > maxMinute) {
+            e.preventDefault();
+            return;
+        }
+        setMinutes(value);
+    };
+    const onIncreaseMinutes = () => {
+        setMinutes((prev) => {
+            if (prev === maxMinute) {
+                onIncreaseHours();
+                return 0;
+            }
+            return prev + 1;
+        });
+    };
+    const onDecreaseMinutes = () => {
+        setMinutes((prev) => {
+            if (prev === 0) {
+                onDecreaseHours();
+                return maxMinute;
+            }
+            return prev - 1;
+        });
+    };
+    const formatTime = useCallback((time) => (time < 10 ? `0${time}` : time), []);
+    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: onClose }, { children: _jsxs(Box, { children: [_jsx(Button, Object.assign({ open: open, onClick: onOpen }, { children: `${formatTime(hours)}:${formatTime(minutes)}${period.toLowerCase()}` })), _jsx(Menu, Object.assign({ open: open, anchorEl: anchorEl, placement: "top-start", sx: { marginTop: '8px', marginBottom: '8px' } }, { children: _jsxs(Wrapper, { children: [_jsxs(TimeWrapper, { children: [_jsxs(Time, { children: [_jsx(Arrow, Object.assign({ onClick: onIncreaseHours }, { children: _jsx("img", { src: greyUpArrowIcon, alt: "arrow" }) })), _jsx(Input, { value: formatTime(hours), onChange: onChangeHours }), _jsx(Arrow, Object.assign({ onClick: onDecreaseHours }, { children: _jsx("img", { src: greyDownArrowIcon, alt: "arrow" }) }))] }), _jsx(Text, { children: ":" }), _jsxs(Time, { children: [_jsx(Arrow, Object.assign({ onClick: onIncreaseMinutes }, { children: _jsx("img", { src: greyUpArrowIcon, alt: "arrow" }) })), _jsx(Input, { value: formatTime(minutes), onChange: onChangeMinutes }), _jsx(Arrow, Object.assign({ onClick: onDecreaseMinutes }, { children: _jsx("img", { src: greyDownArrowIcon, alt: "arrow" }) }))] })] }), _jsx(PeriodWrapper, { children: periodList.map((item) => (_jsx(Period, Object.assign({ onClick: () => {
+                                        onClickPeriod(item);
+                                    }, selected: period === item }, { children: item }), item))) })] }) }))] }) })));
+}

package/build/components/Timepicker/constant.d.ts

@@ -0,0 +1,3 @@
+export declare const periodList: string[];
+export declare const maxHour = 12;
+export declare const maxMinute = 59;

package/build/components/Timepicker/constant.js

@@ -0,0 +1,3 @@
+export const periodList = ['AM', 'PM'];
+export const maxHour = 12;
+export const maxMinute = 59;

package/build/components/Timepicker/index.d.ts

@@ -0,0 +1,4 @@
+import { TimePicker } from './Timepicker';
+export * from './utils';
+export * from './Timepicker';
+export default TimePicker;

package/build/components/Timepicker/index.js

@@ -0,0 +1,4 @@
+import { TimePicker } from './Timepicker';
+export * from './utils';
+export * from './Timepicker';
+export default TimePicker;

package/build/components/Timepicker/style.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+export declare const Wrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const Button: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "textAlign" | "className" | "style" | "classes" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textTransform" | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
+    component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    open: boolean;
+}, {}, {}>;
+export declare const Arrow: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const Period: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "textAlign" | "className" | "style" | "classes" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textTransform" | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
+    component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    selected: boolean;
+}, {}, {}>;
+export declare const PeriodWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const TimeWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const Time: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const Input: import("@emotion/styled").StyledComponent<Omit<Readonly<import("@mui/material").InputProps & {
+    isError?: boolean | undefined;
+    hideArrows?: boolean | undefined;
+}>, "ref"> & import("react").RefAttributes<HTMLInputElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/build/components/Timepicker/style.js

@@ -0,0 +1,45 @@
+import Box from '@mui/material/Box';
+import { styled, alpha } from '@mui/material/styles';
+import Text from '../Text';
+import InputNumber from '../InputNumber';
+export const Wrapper = styled(Box)(() => ({
+    width: 157,
+    padding: '16px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: '16px',
+}));
+export const Button = styled(Text, { shouldForwardProp: (props) => props !== 'open' })(({ theme, open }) => (Object.assign({ fontSize: '11px', fontWeight: 500, background: theme.palette.common.white, border: `1px solid ${theme.palette.divider}`, borderRadius: '19px', height: 32, width: 74, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }, (open && { boxShadow: '0px 0px 4px 0px #1F88D080', borderColor: theme.palette.info.dark }))));
+export const Arrow = styled(Box)(() => ({
+    textAlign: 'center',
+    cursor: 'pointer',
+    userSelect: 'none',
+}));
+export const Period = styled(Text, { shouldForwardProp: (props) => props !== 'selected' })(({ theme, selected }) => (Object.assign({ fontSize: '11px', fontWeight: 500, background: theme.palette.common.white, border: `1px solid ${theme.palette.divider}`, borderRadius: '4px', height: 24, width: 33, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }, (selected && {
+    borderColor: 'transparent',
+    color: theme.palette.info.dark,
+    backgroundColor: alpha(theme.palette.info.dark, 0.1),
+}))));
+export const PeriodWrapper = styled(Box)(() => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+}));
+export const TimeWrapper = styled(Box)(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: '4px',
+}));
+export const Time = styled(Box)(() => ({
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    gap: '6px',
+}));
+export const Input = styled(InputNumber)(() => ({
+    '.MuiInput-input': { fontWeight: '500', fontSize: '11px' },
+    height: 32,
+    width: 32,
+}));

package/build/components/Timepicker/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const getDefaultMinute: () => number;
+export declare const getDefaultHour: () => number;

package/build/components/Timepicker/utils.js

@@ -0,0 +1,2 @@
+export const getDefaultMinute = () => new Date().getMinutes();
+export const getDefaultHour = () => (new Date().getHours() > 12 ? new Date().getHours() - 12 : new Date().getHours());

package/build/components/index.d.ts

@@ -4,6 +4,8 @@ export { default as ActivityAreaChart, type ActivityAreaChartProps, type ChartDa
 export { default as AppWindowWrapper, type AccountHeaderProps, AccountHeaderTitle, AppWindow, type AccountHeaderTitleProps, type AppWindowProps, type WindowProps, AppWindowContext, AppWindowContextProvider, LEFT_SIDEBAR, RIGHT_SIDEBAR, VIEWER_HEIGHT, VIEWER_WIDTH, animationDuration, StyledFooter, StyledHideButton, StyledMenuLink, StyledSubmitButton, SubmitButtonWrapper, } from './AppWindowWrapper';
 export { default as BackgroundAnimation, type BlobGradient, type Blob } from './BackgroundAnimation';
 export { default as Button, PlusButton } from './Button';
+export { default as Calender } from './Calender';
+export { default as Timepicker } from './Timepicker';
 export { default as CardEmptyState, type CardEmptyStateProps } from './CardEmptyState';
 export { default as CardHeadline } from './CardHeadline';
 export { default as Checkbox } from './Checkbox';

package/build/components/index.js

@@ -4,6 +4,8 @@ export { default as ActivityAreaChart, ChartTooltip, LoadingChart, } from './Act
 export { default as AppWindowWrapper, AccountHeaderTitle, AppWindow, AppWindowContext, AppWindowContextProvider, LEFT_SIDEBAR, RIGHT_SIDEBAR, VIEWER_HEIGHT, VIEWER_WIDTH, animationDuration, StyledFooter, StyledHideButton, StyledMenuLink, StyledSubmitButton, SubmitButtonWrapper, } from './AppWindowWrapper';
 export { default as BackgroundAnimation } from './BackgroundAnimation';
 export { default as Button, PlusButton } from './Button';
+export { default as Calender } from './Calender';
+export { default as Timepicker } from './Timepicker';
 export { default as CardEmptyState } from './CardEmptyState';
 export { default as CardHeadline } from './CardHeadline';
 export { default as Checkbox } from './Checkbox';

package/build/constants/assets.d.ts

@@ -488,3 +488,5 @@ export declare const terminalDeviceFrame: string;
 export declare const blackBrushIcon: string;
 export declare const mutedOutlinedCheckIcon: string;
 export declare const outlinedPlatformIcon: string;
+export declare const greyUpArrowIcon: string;
+export declare const greyDownArrowIcon: string;

package/build/constants/assets.js

@@ -492,3 +492,5 @@ export const terminalDeviceFrame = `${lightUrl}/terminalDeviceFrame.svg`;
 export const blackBrushIcon = `${lightUrl}/blackBrushIcon.svg`;
 export const mutedOutlinedCheckIcon = `${lightUrl}/mutedOutlinedCheckIcon.svg`;
 export const outlinedPlatformIcon = `${lightUrl}/outlinedPlatformIcon.svg`;
+export const greyUpArrowIcon = `${lightUrl}/greyUpArrow.svg`;
+export const greyDownArrowIcon = `${lightUrl}/greyDownArrow.svg`;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.0.121",
+  "version": "0.0.123",
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",