@tap-payments/auth-jsconnect 2.11.15-development → 2.11.17-development

package/build/components/ArabicDatePicker/arabicAr.js

@@ -0,0 +1,32 @@
+var arabic_ar = {
+    name: 'arabic_ar',
+    months: [
+        ['محرم', 'محرم'],
+        ['صفر', 'صفر'],
+        ['ربیع الاول', 'ربیع الاول'],
+        ['ربیع الثانی', 'ربیع الثانی'],
+        ['جمادی الاول', 'جمادی الاول'],
+        ['جمادی الثانی', 'جمادی الثانی'],
+        ['رجب', 'رجب'],
+        ['شعبان', 'شعبان'],
+        ['رمضان', 'رمضان'],
+        ['شوال', 'شوال'],
+        ['ذی القعده ', 'ذی القعده'],
+        ['ذی الحجه', 'ذی الحجه']
+    ],
+    weekDays: [
+        ['السّبت', 'سب'],
+        ['الأحد', 'اح'],
+        ['الإثنينِ', 'ثن'],
+        ['الثلاثاء', 'ثل'],
+        ['الأربعاء', 'ار'],
+        ['الخميس', 'خم'],
+        ['الجمعة', 'جم']
+    ],
+    digits: ['٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩'],
+    meridiems: [
+        ['قبل الظهر', 'ق.ظ'],
+        ['بعد الظهر', 'ب.ظ']
+    ]
+};
+export default arabic_ar;

package/build/components/ArabicDatePicker/arabicEn.d.ts

@@ -0,0 +1,8 @@
+declare const arabic_en: {
+    name: string;
+    months: string[][];
+    weekDays: string[][];
+    digits: string[];
+    meridiems: string[][];
+};
+export default arabic_en;

package/build/components/ArabicDatePicker/arabicEn.js

@@ -0,0 +1,32 @@
+var arabic_en = {
+    name: 'arabic_en',
+    months: [
+        ['Muharram', 'Mu'],
+        ['Safar', 'Sa'],
+        ['Rabi`al-Awwal', 'RI'],
+        ['Rabi`ath-Thani', 'RII'],
+        ['Jumada l-Ula', 'JI'],
+        ['Jumada t-Tania', 'JII'],
+        ['Rajab', 'Ra'],
+        ['Sha`ban', 'Sh'],
+        ['Ramadan', 'Ra'],
+        ['Shawwal', 'Sh'],
+        ['Dhu l-Qa`da ', 'DhQ'],
+        ['Dhu l-Hijja', 'DhH']
+    ],
+    weekDays: [
+        ['as-sabt', 'Sab'],
+        ["al-'ahad", 'Aha'],
+        ["al-'ithnayn", 'Ith'],
+        ['ath-thalatha', 'Tha'],
+        ["al-'arb`a'", 'Arb'],
+        ['al-khamis', 'Kha'],
+        ['al-jum`a', 'Jum']
+    ],
+    digits: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
+    meridiems: [
+        ['AM', 'am'],
+        ['PM', 'pm']
+    ]
+};
+export default arabic_en;

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

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

package/build/components/ArabicDatePicker/index.js

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

package/build/components/ArabicDatePicker/style.css

@@ -0,0 +1,93 @@
+.rmdp-wrapper {
+	box-shadow: none !important;
+	width: 100% !important;
+	z-index: 0 !important;
+}
+.rmdp-day-picker {
+	padding-inline: 0px !important;
+}
+
+.rmdp-day-picker > div {
+	width: 100%;
+}
+.rmdp-day {
+	color: #3a4154 !important;
+}
+
+.rmdp-calendar {
+	width: 100%;
+	padding: 0 !important;
+	padding-bottom: 15px !important;
+	padding-top: 12px !important;
+}
+
+.rmdp-day.rmdp-selected span:not(.highlight) {
+	/* background: radial-gradient(circle closest-side, #3a4154 0%, #3a4154 98%, rgba(0, 0, 0, 0) 100%) !important; */
+	color: #ffffff !important;
+	background-color: black !important;
+}
+.rmdp-week,
+.rmdp-ym {
+	justify-content: start !important;
+}
+.rmdp-day span,
+.rmdp-week-day {
+	flex: 0 0 14.2857%;
+}
+.rmdp-week-day {
+	color: #abaeb6 !important;
+	font-weight: 400 !important;
+	font-size: 0.75em !important;
+	text-transform: uppercase;
+}
+.rmdp-day:not(.rmdp-disabled):not(.rmdp-day-hidden) span:hover {
+	background-color: #fafafa !important;
+	/* border-radius: 50%; */
+	color: #3a4154 !important;
+	/* background: radial-gradient(circle closest-side, #fafafa 0, #fafafa 98%, transparent 100%) !important; */
+}
+.rmdp-day.rmdp-disabled {
+	background-color: #f0f0f0 !important;
+}
+.rmdp-day.rmdp-selected span:not(.highlight):hover {
+	color: #ffffff !important;
+	background-color: black !important;
+}
+.rmdp-arrow-container:hover {
+	background-color: unset !important;
+	box-shadow: unset !important;
+}
+.rmdp-arrow {
+	border: solid #000 !important;
+	border-width: 0 1px 1px 0 !important;
+}
+.rmdp-day.rmdp-today span {
+	background-color: unset !important;
+	color: #000 !important;
+}
+.rmdp-header {
+	margin-bottom: 12px;
+}
+.rmdp-day-picker .rmdp-day {
+	height: 40px !important;
+	width: 40px !important;
+	flex: 0 0 14.2857%;
+}
+.rmdp-day-picker .rmdp-day span {
+	height: 36px !important;
+	width: 36px !important;
+}
+.rmdp-month-picker .rmdp-ym .rmdp-day {
+	margin: unset;
+}
+.rmdp-month-picker .rmdp-ym .rmdp-day,
+.rmdp-week-day {
+	height: 100%;
+}
+.rmdp-year-picker .rmdp-ym .rmdp-day {
+	margin: unset;
+}
+.rmdp-year-picker .rmdp-ym .rmdp-day,
+.rmdp-week-day {
+	height: 100%;
+}

package/build/components/Button/Button.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { ButtonProps as MUIButtonProps } from '@mui/material/Button';
+export interface ButtonStyledProps {
+    touched?: boolean;
+    outLineColor?: string;
+}
+export interface ButtonProps extends MUIButtonProps {
+    outLineColor?: string;
+}
+declare const _default: React.MemoExoticComponent<{
+    ({ children, startIcon, outLineColor, endIcon, ...rest }: ButtonProps): JSX.Element;
+    defaultProps: {};
+}>;
+export default _default;

package/build/components/Button/Button.js

@@ -0,0 +1,97 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 } from "react/jsx-runtime";
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import { styled, alpha } from '@mui/material/styles';
+var ButtonStyled = styled(Button, {
+    shouldForwardProp: function (prop) { return !['outLineColor', 'touched'].includes(prop.toString()); }
+})(function (_a) {
+    var _b;
+    var theme = _a.theme, touched = _a.touched, outLineColor = _a.outLineColor;
+    return ({
+        '&.MuiButton-contained': {
+            color: theme.palette.common.white,
+            backgroundColor: theme.palette.primary.main,
+            '&:hover': {
+                backgroundColor: theme.palette.primary.main
+            },
+            '&:active': {
+                backgroundColor: theme.palette.primary.main
+            },
+            ':disabled': {
+                backgroundColor: alpha(theme.palette.primary.main, 0.3),
+                borderColor: alpha(theme.palette.primary.main, 0.2),
+                color: theme.palette.common.white
+            },
+            '& .MuiButton-endIcon': {
+                margin: theme.spacing(0)
+            },
+            '& .MuiButton-startIcon': {
+                margin: theme.spacing(0)
+            }
+        },
+        minHeight: theme.spacing(5.5),
+        maxHeight: theme.spacing(5.5),
+        borderRadius: theme.spacing(4.1),
+        fontWeight: 'bold',
+        lineHeight: 1.7,
+        display: 'flex',
+        justifyContent: 'space-between',
+        paddingInlineStart: theme.spacing(0.75),
+        textTransform: 'none',
+        '&.MuiButton-outlined': (_b = {
+                backgroundColor: theme.palette.common.white,
+                border: "1px solid ".concat(!!outLineColor ? outLineColor : theme.palette.primary.main),
+                color: !!outLineColor ? outLineColor : theme.palette.primary.main,
+                '&:hover': {
+                    backgroundColor: !!outLineColor ? outLineColor : theme.palette.primary.main,
+                    color: theme.palette.common.white,
+                    img: {
+                        filter: 'brightness(0) invert(1)'
+                    }
+                }
+            },
+            _b[theme.breakpoints.down('sm')] = {
+                '&:hover': {
+                    backgroundColor: touched ? (!!outLineColor ? outLineColor : theme.palette.primary.main) : theme.palette.common.white,
+                    color: touched ? theme.palette.common.white : !!outLineColor ? outLineColor : theme.palette.primary.main,
+                    img: {
+                        filter: touched ? 'brightness(0) invert(1)' : 'none'
+                    }
+                }
+            },
+            _b['&:disabled'] = {
+                backgroundColor: theme.palette.common.white,
+                color: alpha(!!outLineColor ? outLineColor : theme.palette.primary.main, 0.3)
+            },
+            _b)
+    });
+});
+var ButtonComponent = function (_a) {
+    var children = _a.children, startIcon = _a.startIcon, outLineColor = _a.outLineColor, endIcon = _a.endIcon, rest = __rest(_a, ["children", "startIcon", "outLineColor", "endIcon"]);
+    var _b = React.useState(false), isTouched = _b[0], setIsTouched = _b[1];
+    return (_jsx(ButtonStyled, __assign({ onTouchStart: function () { return setIsTouched(true); }, touched: isTouched, outLineColor: outLineColor, variant: 'contained', startIcon: startIcon || _jsx("span", {}), endIcon: endIcon || _jsx("span", {}), disableFocusRipple: true, disableElevation: true, disableRipple: true, disableTouchRipple: true, fullWidth: true }, rest, { children: children })));
+};
+ButtonComponent.defaultProps = {};
+export default React.memo(ButtonComponent);

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

@@ -0,0 +1,4 @@
+import Button from './Button';
+import { ButtonProps } from './Button';
+export type { ButtonProps };
+export default Button;

package/build/components/Button/index.js

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

package/build/components/CheckBox/CheckBox.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { CheckboxProps } from '@mui/material/Checkbox/Checkbox';
+export type { CheckboxProps };
+declare const _default: React.MemoExoticComponent<({ ...rest }: CheckboxProps) => JSX.Element>;
+export default _default;

package/build/components/CheckBox/CheckBox.js

@@ -0,0 +1,39 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 } from "react/jsx-runtime";
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import Checkbox from '@mui/material/Checkbox/Checkbox';
+var CheckBoxStyled = styled(Checkbox)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        paddingInlineStart: theme.spacing(2.5),
+        paddingInlineEnd: theme.spacing(1.25),
+        marginBlockStart: theme.spacing(1.9)
+    });
+});
+var CheckBoxComponent = function (_a) {
+    var rest = __rest(_a, []);
+    return _jsx(CheckBoxStyled, __assign({}, rest));
+};
+export default React.memo(CheckBoxComponent);

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

@@ -0,0 +1,4 @@
+import CheckBox from './CheckBox';
+import { CheckboxProps } from './CheckBox';
+export type { CheckboxProps };
+export default CheckBox;

package/build/components/CheckBox/index.js

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

package/build/components/Collapse/Collapse.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { CollapseProps as MUICollapseProps } from '@mui/material/Collapse';
+export interface CollapseProps extends MUICollapseProps {
+}
+export default function Collapse({ children, ...rest }: CollapseProps): JSX.Element;

package/build/components/Collapse/Collapse.js

@@ -0,0 +1,28 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 } from "react/jsx-runtime";
+import MUICollapse from '@mui/material/Collapse';
+export default function Collapse(_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return (_jsx(MUICollapse, __assign({ unmountOnExit: true, timeout: 500 }, rest, { children: children })));
+}

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

@@ -0,0 +1,3 @@
+import Collapse, { CollapseProps } from './Collapse';
+export type { CollapseProps };
+export default Collapse;

package/build/components/Collapse/index.js

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

package/build/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { CalendarProps } from 'react-calendar';
+import 'react-calendar/dist/Calendar.css';
+import './customStyle.css';
+export interface DatePickerProps extends CalendarProps {
+    open?: boolean;
+    onDateChange?: (date: string) => void;
+    onClick?: () => void;
+    onDatePicked?: () => void;
+    disabled?: boolean;
+    readOnly?: boolean;
+    dir?: string;
+    isDob?: boolean;
+    isVerified?: boolean;
+}
+declare const _default: React.MemoExoticComponent<({ onDateChange, disabled, readOnly, onClick, onDatePicked, dir, defaultValue, isDob, isVerified, open, minDate, maxDate, ...rest }: DatePickerProps) => JSX.Element>;
+export default _default;

package/build/components/DatePicker/DatePicker.js

@@ -0,0 +1,111 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 React, { useEffect, useState, memo } from 'react';
+import Calendar from 'react-calendar';
+import 'react-calendar/dist/Calendar.css';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import Divider from '@mui/material/Divider';
+import Collapse from '../Collapse';
+import Icon from '../Icon';
+import { ICONS_NAMES } from '../../constants';
+import { convertToEnglishDateFormat, getEighteenYearsAgo, scrollDown, scrollUp } from '../../utils';
+import { EndAdornmentExpanded } from '../../features/shared/EndAdornment';
+import Input from '../Input';
+import Text from '../Text';
+import './customStyle.css';
+var ContainerIcon = styled(Icon, { shouldForwardProp: function (prop) { return prop !== 'disabled'; } })(function (_a) {
+    var theme = _a.theme, disabled = _a.disabled;
+    return (__assign(__assign({ marginInlineStart: theme.spacing(2.5) }, theme.typography.h6), { cursor: disabled ? 'auto' : 'pointer', width: theme.spacing(2.25), height: theme.spacing(2.25) }));
+});
+var Container = styled(Box, { shouldForwardProp: function (prop) { return prop !== 'disabled'; } })(function (_a) {
+    var theme = _a.theme, disabled = _a.disabled;
+    return ({
+        cursor: disabled ? 'auto' : 'pointer',
+        opacity: disabled ? '0.6' : '1',
+        fontFamily: theme.typography.fontFamily
+    });
+});
+var InputFieldStyled = styled(Input)(function (_a) {
+    var theme = _a.theme, disabled = _a.disabled;
+    return ({
+        cursor: disabled ? 'auto' : 'pointer',
+        '&::placeholder': __assign(__assign({ opacity: 1, color: theme.palette.text.primary, lineHeight: theme.spacing(2.125) }, theme.typography.body2), { fontWeight: theme.typography.fontWeightLight }),
+        '& .MuiInputBase-input': {
+            WebkitTextFillColor: 'inherit',
+            cursor: disabled ? 'auto' : 'pointer'
+        }
+    });
+});
+var ArrowIcon = styled(Text, { shouldForwardProp: function (prop) { return prop !== 'disabled'; } })(function (_a) {
+    var theme = _a.theme, disabled = _a.disabled;
+    return ({
+        cursor: disabled ? 'auto' : 'pointer',
+        marginInlineEnd: theme.spacing(2.5),
+        display: 'flex'
+    });
+});
+var DatePicker = function (_a) {
+    var onDateChange = _a.onDateChange, disabled = _a.disabled, readOnly = _a.readOnly, onClick = _a.onClick, onDatePicked = _a.onDatePicked, dir = _a.dir, defaultValue = _a.defaultValue, isDob = _a.isDob, isVerified = _a.isVerified, open = _a.open, minDate = _a.minDate, maxDate = _a.maxDate, rest = __rest(_a, ["onDateChange", "disabled", "readOnly", "onClick", "onDatePicked", "dir", "defaultValue", "isDob", "isVerified", "open", "minDate", "maxDate"]);
+    var _b = useState(), date = _b[0], setDate = _b[1];
+    var _c = React.useState(null), anchor = _c[0], setAnchor = _c[1];
+    var _d = React.useState(open), openCalender = _d[0], setOpenCalender = _d[1];
+    useEffect(function () {
+        if (defaultValue)
+            setDate(defaultValue);
+    }, [defaultValue]);
+    var calenderIcon = _jsx(ContainerIcon, { disabled: disabled, src: ICONS_NAMES.SWITCH_CALENDER });
+    var defaultMax = new Date();
+    var defaultMin = new Date('1900-01-01');
+    var toggleCalender = function (event) {
+        var elementId = 'animation-flow-template-content';
+        if (anchor || openCalender) {
+            onDatePicked === null || onDatePicked === void 0 ? void 0 : onDatePicked();
+            setTimeout(function () { return scrollDown(elementId); }, 500);
+            setOpenCalender(false);
+            return setAnchor(null);
+        }
+        setAnchor(event.currentTarget);
+        setOpenCalender(true);
+        setTimeout(function () { return scrollUp(elementId); }, 550);
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    };
+    var handleOnDateChange = function (date) {
+        setDate(date);
+        onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(convertToEnglishDateFormat(date));
+        setAnchor(null);
+        setOpenCalender(false);
+        onDatePicked === null || onDatePicked === void 0 ? void 0 : onDatePicked();
+    };
+    var getEndAdornment = function () {
+        if (disabled && !isVerified)
+            return '';
+        return _jsx(EndAdornmentExpanded, { isVerified: isVerified, anchorEl: anchor });
+    };
+    return (_jsxs(Container, __assign({ disabled: disabled, id: 'container-calendar' }, { children: [_jsx(InputFieldStyled, { endAdornment: _jsx(ArrowIcon, __assign({ disabled: disabled }, { children: getEndAdornment() })), value: date ? convertToEnglishDateFormat(date) : '', placeholder: 'YYYY-MM-DD', onClick: function (e) {
+                    if (!disabled)
+                        toggleCalender(e);
+                }, startAdornment: calenderIcon, disabled: disabled, readOnly: readOnly, dir: dir }), _jsxs(Collapse, __assign({ in: openCalender }, { children: [_jsx(Calendar, __assign({}, rest, { value: date || (isDob ? new Date(getEighteenYearsAgo()) : undefined), calendarType: 'Hebrew', onChange: handleOnDateChange, locale: rest.locale, maxDate: maxDate || defaultMax, minDate: minDate || defaultMin })), _jsx(Divider, {})] }))] })));
+};
+export default memo(DatePicker);

package/build/components/DatePicker/customStyle.css

@@ -0,0 +1,86 @@
+.date_picker_input {
+	cursor: pointer;
+}
+
+.react-calendar {
+	width: 100%;
+	border: none;
+	padding: 15px 0px 15px 0px;
+}
+
+.react-calendar__navigation {
+	display: flex;
+	position: relative;
+}
+.react-calendar__navigation__label__labelText {
+	font-family: 'Lato', 'Roboto';
+}
+.react-calendar__navigation button:enabled:hover,
+.react-calendar__navigation button:enabled:focus {
+	background-color: #ffffff;
+}
+.react-calendar__navigation__prev-button {
+	top: 20px;
+	left: 86px;
+}
+
+.react-calendar__navigation__next-button {
+	top: 0px;
+	left: 86px;
+}
+
+.react-calendar__navigation__prev2-button {
+	top: 20px;
+	right: 13px;
+}
+
+.react-calendar__navigation__next2-button {
+	top: 0px;
+	right: 13px;
+}
+
+.react-calendar__navigation__arrow {
+	background-color: transparent !important;
+}
+
+abbr[title] {
+	text-decoration: none;
+	font-weight: 400;
+	color: #abaeb6;
+}
+
+.react-calendar__tile {
+	transition: all 0.5s ease;
+}
+
+.react-calendar__tile:enabled:hover,
+.react-calendar__tile:enabled:focus {
+	background-color: transparent;
+}
+
+.react-calendar__tile:enabled:hover {
+	background: radial-gradient(circle closest-side, #fafafa 0%, #fafafa 98%, rgba(0, 0, 0, 0) 100%);
+}
+
+.react-calendar__month-view__days__day--weekend,
+.react-calendar__tile {
+	color: #3a4154;
+}
+.react-calendar__tile--hasActive {
+	background: radial-gradient(circle closest-side, #fafafa 0%, #fafafa 98%, rgba(0, 0, 0, 0) 100%);
+}
+
+.react-calendar__tile--active,
+.react-calendar__tile--active:enabled:hover,
+.react-calendar__tile--active:enabled:focus {
+	background-color: transparent;
+	background: radial-gradient(circle closest-side, #3a4154 0%, #3a4154 98%, rgba(0, 0, 0, 0) 100%);
+	color: #ffffff;
+}
+.react-calendar__tile--now {
+	background-color: transparent;
+}
+.react-calendar__navigation button:disabled {
+	background-color: #ffffff;
+	color: #3a4154;
+}

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

@@ -0,0 +1,3 @@
+import DatePicker, { DatePickerProps } from './DatePicker';
+export type { DatePickerProps };
+export default DatePicker;

package/build/components/DatePicker/index.js

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

package/build/components/DeviceCard/DeviceCard.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { CardProps } from '@mui/material/Card';
+export interface DeviceCardProps extends CardProps {
+    image?: string;
+    name: string;
+    deviceId: string;
+    deviceIdLabel?: string;
+    isLinked?: boolean;
+    pairedWith?: string;
+    badge?: boolean;
+    border?: boolean;
+    loading?: boolean;
+    arrow?: boolean;
+    endAdornment?: React.ReactNode;
+}
+export declare const DeviceCard: ({ image, name, deviceId, deviceIdLabel, isLinked, pairedWith, onClick, badge, border, arrow, loading, endAdornment, ...rest }: DeviceCardProps) => JSX.Element;
+declare const _default: React.MemoExoticComponent<({ image, name, deviceId, deviceIdLabel, isLinked, pairedWith, onClick, badge, border, arrow, loading, endAdornment, ...rest }: DeviceCardProps) => JSX.Element>;
+export default _default;