@tap-payments/click-to-pay-button-web 0.0.1-test

package/build/components/OTPInput/OTPInput.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { styled } from '@mui/material/styles';
+import { useAppTheme } from '../../hooks';
+import { getFontFormat, getProperty } from '../../utils';
+import { useMask, format } from '@react-input/mask';
+import { OTPFieldErrorType } from '../../@types';
+const DIGIT_WIDTH = 50;
+const MASK_SPACINGS = [...Array(10)].join(' ');
+const InputWrapper = styled('div')({
+    '--input-width': `${DIGIT_WIDTH}px`,
+    height: 48,
+    overflow: 'hidden',
+    boxSizing: 'border-box',
+    borderRadius: 10,
+});
+const Input = styled('input')({
+    position: 'relative',
+    textAlign: 'center',
+    width: '100%',
+    height: '100%',
+    fontSize: 20,
+    border: 'none',
+    padding: 0,
+    ':focus': {
+        outline: 'none',
+    },
+});
+const combineClasses = (...args) => args.filter(Boolean).join(' ');
+const getCalcStyles = (appTheme, digits) => {
+    const TapOtpViewThemeObj = appTheme.TapOtpView;
+    const textColor = getProperty(TapOtpViewThemeObj.OtpController.textColor, appTheme.GlobalValues.Colors);
+    const backgroundColor = getProperty(TapOtpViewThemeObj.OtpController.backgroundColor, appTheme.GlobalValues.Colors);
+    const borderColor = getProperty(TapOtpViewThemeObj.OtpController.borderColor, appTheme.GlobalValues.Colors);
+    const activeBorderColor = getProperty(TapOtpViewThemeObj.OtpController.activeBorderColor, appTheme.GlobalValues.Colors);
+    const activeBackgroundColor = getProperty(TapOtpViewThemeObj.OtpController.backgroundColor, appTheme.GlobalValues.Colors);
+    const activeBackgroundColorError = 'rgba(234, 97, 28, 0.04)';
+    const font = getFontFormat(TapOtpViewThemeObj.OtpController.textFont);
+    const width = `calc(var(--input-width) * ${digits})`;
+    return {
+        inputWrapper: {
+            border: `1px solid ${borderColor}`,
+            width,
+            backgroundColor,
+            '&.focus': {
+                border: `1px solid ${activeBorderColor}`,
+            },
+            transition: 'all 0.3s ease !important',
+            '&.error': {
+                backgroundColor: activeBackgroundColorError,
+                border: '1px solid #EA611C',
+                '&.focus': {
+                    border: '1px solid #EA611C',
+                    backgroundColor: activeBackgroundColorError,
+                },
+            },
+        },
+        input: {
+            transition: 'all 0.3s ease !important',
+            color: textColor,
+            backgroundColor: 'transparent',
+            font,
+            '&:focus': {
+                backgroundColor: activeBackgroundColor,
+            },
+            '&.error': {
+                backgroundColor: activeBackgroundColorError,
+                '&.focus': {
+                    backgroundColor: activeBackgroundColorError,
+                },
+            },
+        },
+    };
+};
+const OTPInput = (props) => {
+    const { value: rawValue, onChange, maxLengthDigits, minLengthDigits, error, errorType, shouldAutoFocus } = props;
+    const [isFocused, setIsFocused] = useState(false);
+    const { theme: appTheme } = useAppTheme();
+    const placeholderMask = useMemo(() => [...Array(minLengthDigits)].map(() => '-').join(MASK_SPACINGS), [minLengthDigits]);
+    const mask = useMemo(() => [...Array(maxLengthDigits)].map(() => '_').join(MASK_SPACINGS), [maxLengthDigits]);
+    const maskOptions = useMemo(() => ({
+        mask,
+        replacement: { _: /\d/ },
+    }), [mask]);
+    const inputRef = useMask(maskOptions);
+    const value = useMemo(() => format(rawValue || '', maskOptions), [rawValue, maskOptions]);
+    const inputWrapperClasses = useMemo(() => combineClasses(isFocused && 'focus', error && 'error', errorType === OTPFieldErrorType.INVALID && 'error-invalid', errorType === OTPFieldErrorType.LOCKED && 'error-locked'), [isFocused, error, errorType]);
+    const inputClasses = useMemo(() => combineClasses(error && 'error', errorType === OTPFieldErrorType.INVALID && 'error-invalid', errorType === OTPFieldErrorType.LOCKED && 'error-locked'), [error, errorType]);
+    const calcStyles = useMemo(() => getCalcStyles(appTheme, maxLengthDigits), [maxLengthDigits, appTheme]);
+    const handleChange = event => {
+        const { value: newVal } = event.target;
+        const formattedValue = newVal.replace(new RegExp(MASK_SPACINGS, 'g'), '');
+        onChange === null || onChange === void 0 ? void 0 : onChange(formattedValue, event);
+    };
+    return (_jsx(InputWrapper, { "data-testid": "otp-input-wrapper", className: inputWrapperClasses, sx: calcStyles.inputWrapper, children: _jsx(Input, { "data-selector": "OTPInput", className: inputClasses, autoFocus: shouldAutoFocus, ref: inputRef, sx: calcStyles.input, disabled: error && errorType === OTPFieldErrorType.LOCKED, "data-testid": "otp-input-field", value: value, onChange: handleChange, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), placeholder: isFocused ? '' : placeholderMask }) }));
+};
+export default OTPInput;

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

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

package/build/components/OTPInput/index.js

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

package/build/components/OTPInputAdapter/OTPInputAdapter.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { type OTPInputProps } from 'react-otp-input';
+export declare enum OTPFieldErrorType {
+    INVALID = "invalid",
+    LOCKED = "locked"
+}
+interface OTPInputAdapterProps extends Omit<OTPInputProps, 'renderInput'> {
+    open?: boolean;
+    error?: boolean;
+    errorType?: OTPFieldErrorType | null;
+    type?: React.HTMLInputTypeAttribute;
+}
+declare const _default: React.NamedExoticComponent<OTPInputAdapterProps>;
+export default _default;

package/build/components/OTPInputAdapter/OTPInputAdapter.js

@@ -0,0 +1,146 @@
+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 React, { useMemo, useRef } from 'react';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import OtpInput from 'react-otp-input';
+import { useAppTheme } from '../../hooks/useAppTheme';
+import { getFontFormat, getProperty } from '../../utils';
+export var OTPFieldErrorType;
+(function (OTPFieldErrorType) {
+    OTPFieldErrorType["INVALID"] = "invalid";
+    OTPFieldErrorType["LOCKED"] = "locked";
+})(OTPFieldErrorType || (OTPFieldErrorType = {}));
+const styles = {
+    getInputField: (overrideTheme) => {
+        const { borderColor, backgroundColor, textColor, font, activeBorderColor, activeBackgroundColor, activeBorderColorError, activeBackgroundColorError, } = overrideTheme;
+        return {
+            pointerEvents: 'auto',
+            outline: 'none !important',
+            boxSizing: 'border-box !important',
+            padding: '0 !important',
+            margin: '0 !important',
+            display: 'flex !important',
+            justifyContent: 'center !important',
+            alignItems: 'center !important',
+            width: '45.167px !important',
+            height: '48px !important',
+            borderRadius: '8px !important',
+            border: `1px solid ${borderColor}`,
+            color: textColor,
+            background: backgroundColor,
+            font,
+            transition: 'all 0.3s ease !important',
+            '&:nth-of-type(3)': {
+                marginInlineEnd: '16px !important',
+            },
+            '&:focus-visible': {
+                outline: 'none !important',
+                borderRadius: '8px !important',
+                border: `1px solid ${activeBorderColor}`,
+                background: activeBackgroundColor,
+                boxShadow: '0px 0px 8px 0px rgba(0, 0, 0, 0.15)',
+            },
+            '&.error': {
+                pointerEvents: 'auto',
+                color: textColor,
+                background: backgroundColor,
+                '&.error-invalid': {
+                    '&.first-field': {
+                        border: '1px solid #EA611C',
+                        background: activeBackgroundColorError,
+                    },
+                },
+                '&.error-locked': {
+                    pointerEvents: 'none !important',
+                    border: '1px solid transparent',
+                    color: activeBorderColorError,
+                    background: activeBackgroundColorError,
+                },
+            },
+        };
+    },
+};
+const OTPInputAdapter = (_a) => {
+    var { open, error, errorType, type = 'number' } = _a, props = __rest(_a, ["open", "error", "errorType", "type"]);
+    const { theme: appTheme } = useAppTheme();
+    const inputWrappersRef = useRef([]);
+    React.useEffect(() => {
+        if (!error)
+            return;
+        const inputWrappers = inputWrappersRef.current;
+        let timer = null;
+        if (errorType === OTPFieldErrorType.INVALID) {
+            timer = setTimeout(() => {
+                var _a;
+                const inputWrapper = inputWrappers[0];
+                (_a = inputWrapper === null || inputWrapper === void 0 ? void 0 : inputWrapper.querySelector('input')) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 10);
+        }
+        return () => clearTimeout(timer);
+    }, [error, errorType]);
+    const TapOtpViewThemeObj = appTheme.TapOtpView;
+    const textColor = getProperty(TapOtpViewThemeObj.OtpController.textColor, appTheme.GlobalValues.Colors);
+    const backgroundColor = getProperty(TapOtpViewThemeObj.OtpController.backgroundColor, appTheme.GlobalValues.Colors);
+    const borderColor = getProperty(TapOtpViewThemeObj.OtpController.borderColor, appTheme.GlobalValues.Colors);
+    const activeBorderColor = getProperty(TapOtpViewThemeObj.OtpController.activeBorderColor, appTheme.GlobalValues.Colors);
+    const activeBackgroundColor = getProperty(TapOtpViewThemeObj.OtpController.backgroundColor, appTheme.GlobalValues.Colors);
+    const activeBackgroundColorError = 'rgba(234, 97, 28, 0.04)';
+    const activeBorderColorError = getProperty(TapOtpViewThemeObj.Invalid.Message.textColor, appTheme.GlobalValues.Colors);
+    const inputStyles = useMemo(() => styles.getInputField({
+        font: getFontFormat(TapOtpViewThemeObj.OtpController.textFont),
+        borderColor,
+        textColor,
+        backgroundColor,
+        activeBorderColor,
+        activeBackgroundColor,
+        activeBorderColorError,
+        activeBackgroundColorError,
+    }), [
+        TapOtpViewThemeObj.OtpController.textFont,
+        borderColor,
+        textColor,
+        backgroundColor,
+        activeBorderColor,
+        activeBackgroundColor,
+        activeBorderColorError,
+        activeBackgroundColorError,
+    ]);
+    const errorClassNames = useMemo(() => {
+        const result = [];
+        if (!error)
+            return '';
+        result.push('error');
+        if (errorType === OTPFieldErrorType.INVALID) {
+            result.push('error-invalid');
+        }
+        else if (errorType === OTPFieldErrorType.LOCKED) {
+            result.push('error-locked');
+        }
+        return result.join(' ');
+    }, [error, errorType]);
+    if (!open)
+        return null;
+    return (_jsx(OtpInput, Object.assign({ "data-selector": "OTPInput", "data-testid": "OTPInputAdapter", shouldAutoFocus: true }, props, { containerStyle: {
+            display: 'flex',
+            width: '100%',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            gap: '8px',
+            direction: 'ltr',
+        }, renderInput: (inputProps, index) => (_jsx(Stack, { justifyContent: "center", alignItems: "center", "data-testid": `otp-input-wrapper-${index}`, ref: ref => {
+                inputWrappersRef.current[index] = ref;
+            }, children: _jsx(Box, Object.assign({ component: "input" }, inputProps, { type: type, inputMode: "numeric", sx: inputStyles, disabled: error && errorType === OTPFieldErrorType.LOCKED, className: `${errorClassNames} ${index === 0 ? 'first-field' : ''}` })) })) })));
+};
+OTPInputAdapter.displayName = 'OTPInputAdapter';
+export default React.memo(OTPInputAdapter);

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

@@ -0,0 +1,3 @@
+import OTPInputAdapter from './OTPInputAdapter';
+export { OTPFieldErrorType } from './OTPInputAdapter';
+export default OTPInputAdapter;

package/build/components/OTPInputAdapter/index.js

@@ -0,0 +1,3 @@
+import OTPInputAdapter from './OTPInputAdapter';
+export { OTPFieldErrorType } from './OTPInputAdapter';
+export default OTPInputAdapter;

package/build/components/OTPTimer/OTPTimer.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface OTPTimerProps {
+    time?: number;
+    isVisible: boolean;
+    onResend: () => void;
+    labelStyle?: React.CSSProperties;
+    timerStyle?: React.CSSProperties;
+    resendButtonStyle?: React.CSSProperties;
+}
+declare const _default: React.NamedExoticComponent<Readonly<OTPTimerProps>>;
+export default _default;

package/build/components/OTPTimer/OTPTimer.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Text from '../Text';
+import { DirectionMode } from '../../@types';
+import { getFontFormat, getProperty, StringUtils } from '../../utils';
+import { useAppTheme } from '../../hooks';
+import { useTimer } from './hooks/useTimer';
+const ResendTextButton = styled('button')(() => ({
+    cursor: 'pointer',
+    appearance: 'none',
+    border: 'none',
+    backgroundColor: 'transparent',
+    display: 'flex',
+    height: '28.5px',
+    padding: '12px',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: '9.5px',
+    borderRadius: '66.5px',
+    background: 'rgba(31, 136, 208, 0.10)',
+    color: '#1F88D0',
+    fontFamily: 'Lato',
+    fontSize: '15px',
+    fontStyle: 'normal',
+    fontWeight: 400,
+    lineHeight: '100%',
+}));
+const TimerBox = styled(Box)(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '7.6px',
+}));
+const TimerValueText = styled(Text)(() => ({
+    display: 'flex',
+    minWidth: '55px',
+    height: '28.5px',
+    padding: '9.5px',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: '9.5px',
+    borderRadius: '66.5px',
+    letterSpacing: '-0.093px',
+}));
+const OTPTimer = ({ time, isVisible, onResend, labelStyle, timerStyle, resendButtonStyle, }) => {
+    const { t } = useTranslation();
+    const { theme: appTheme } = useAppTheme();
+    const { seconds } = useTimer({
+        time,
+        isVisible,
+    });
+    const formattedSeconds = `${StringUtils.padStartZero(Math.floor(seconds / 60), 2)}:${StringUtils.padStartZero(seconds % 60, 2)}`;
+    return (_jsx(_Fragment, { children: seconds > 0 ? (_jsxs(TimerBox, { children: [_jsx(Text, { sx: Object.assign({ color: getProperty(appTheme.TapOtpView.Resend.labelColor, appTheme.GlobalValues.Colors) }, labelStyle), children: t('Click2Pay.otp.resendLabel') }), _jsx(TimerValueText, { "data-testid": "OTPTimer", dir: DirectionMode.LTR, sx: Object.assign({ font: getFontFormat(appTheme.TapOtpView.Timer.textFont), color: getProperty(appTheme.TapOtpView.Timer.textColor, appTheme.GlobalValues.Colors), background: getProperty(appTheme.TapOtpView.Timer.backgroundColor, appTheme.GlobalValues.Colors) }, timerStyle), children: seconds > 0 && formattedSeconds })] })) : (_jsx(ResendTextButton, { type: "button", "data-testid": "OTPTimer_Resend_Label", onClick: onResend, sx: Object.assign({ font: getFontFormat(appTheme.TapOtpView.Resend.font), color: getProperty(appTheme.TapOtpView.Resend.color, appTheme.GlobalValues.Colors), background: getProperty(appTheme.TapOtpView.Resend.backgroundColor, appTheme.GlobalValues.Colors) }, resendButtonStyle), children: t('ActionButton.resend') })) }));
+};
+OTPTimer.displayName = 'OTPTimer';
+export default React.memo(OTPTimer);

package/build/components/OTPTimer/hooks/useTimer.d.ts

@@ -0,0 +1,8 @@
+interface UseTimerProps {
+    time?: number;
+    isVisible: boolean;
+}
+export declare function useTimer({ time, isVisible }: Readonly<UseTimerProps>): {
+    seconds: number;
+};
+export {};

package/build/components/OTPTimer/hooks/useTimer.js

@@ -0,0 +1,28 @@
+import React from 'react';
+export function useTimer({ time = 60, isVisible }) {
+    const [seconds, setSeconds] = React.useState(time);
+    React.useEffect(() => {
+        if (!isVisible)
+            return;
+        setSeconds(time);
+        const interval = setInterval(() => {
+            setSeconds(prevSeconds => {
+                if (prevSeconds > 0) {
+                    return prevSeconds - 1;
+                }
+                if (interval) {
+                    clearInterval(interval);
+                }
+                return 0;
+            });
+        }, 1000);
+        return () => {
+            if (interval) {
+                clearInterval(interval);
+            }
+        };
+    }, [isVisible, time]);
+    return {
+        seconds,
+    };
+}

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

@@ -0,0 +1 @@
+export { default as OTPTimer } from './OTPTimer';

package/build/components/OTPTimer/index.js

@@ -0,0 +1 @@
+export { default as OTPTimer } from './OTPTimer';

package/build/components/PhoneInput/PhoneInput.d.ts

@@ -0,0 +1,8 @@
+import React, { type ComponentPropsWithoutRef } from 'react';
+import { PhoneInput as PhoneInputBase } from '@tap-payments/acceptance-sdk';
+type PI = ComponentPropsWithoutRef<typeof PhoneInputBase>;
+interface PhoneInputProps extends Omit<PI, 'color'> {
+    color?: React.CSSProperties['color'];
+}
+declare const _default: React.NamedExoticComponent<Readonly<PhoneInputProps>>;
+export default _default;

package/build/components/PhoneInput/PhoneInput.js

@@ -0,0 +1,71 @@
+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 React from 'react';
+import { PhoneInput as PhoneInputBase } from '@tap-payments/acceptance-sdk';
+import { getFontFormat, getProperty } from '../../utils';
+import { useAppTheme } from '../../hooks';
+const PhoneInput = (_a) => {
+    var _b, _c, _d;
+    var { color } = _a, props = __rest(_a, ["color"]);
+    const { theme: appTheme, dir } = useAppTheme();
+    const inputBgColor = getProperty(appTheme.customerDataCollection.backgroundColor, appTheme.GlobalValues.Colors);
+    const inputTextColor = color !== null && color !== void 0 ? color : getProperty((_d = (_c = (_b = appTheme.customerDataCollection) === null || _b === void 0 ? void 0 : _b.textfields) === null || _c === void 0 ? void 0 : _c.color) !== null && _d !== void 0 ? _d : 'greyishBrown', appTheme.GlobalValues.Colors);
+    const handleKeyDown = (event) => {
+        var _a;
+        const allowedKeys = [
+            'Backspace',
+            'Delete',
+            'Tab',
+            'Escape',
+            'Enter',
+            'ArrowUp',
+            'ArrowDown',
+            'ArrowLeft',
+            'ArrowRight',
+            'Home',
+            'End',
+        ];
+        if (allowedKeys.includes(event.key))
+            return;
+        if ((event.ctrlKey || event.metaKey) && ['v', 'x', 'a'].includes(event.key))
+            return;
+        const { selectionStart, selectionEnd } = event.target;
+        const isNotNumber = Number.isNaN(Number(event.key));
+        const isReplacingSelection = selectionStart !== selectionEnd;
+        if (isNotNumber && !isReplacingSelection) {
+            event.preventDefault();
+        }
+        (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, event);
+    };
+    return (_jsx(PhoneInputBase, Object.assign({}, props, { onKeyDown: handleKeyDown, type: "number", inputMode: "tel", variant: "standard", fullWidth: true, inputProps: { inputMode: 'tel', autoComplete: 'tel-national' }, InputProps: { disableUnderline: true }, sx: Object.assign(Object.assign({ background: inputBgColor, '& input': {
+                color: inputTextColor,
+            }, 'input.MuiInputBase-input': {
+                direction: `${dir} !important`,
+                font: getFontFormat(appTheme.customerDataCollection.textfields.countryCodeLabelFont),
+                color: inputTextColor,
+            }, '& input:-webkit-autofill': {
+                WebkitBoxShadow: `0 0 0 30px ${inputBgColor} inset !important`,
+                WebkitTextFillColor: `${inputTextColor} !important`,
+            }, '& input:-webkit-autofill:hover': {
+                WebkitBoxShadow: `0 0 0 30px ${inputBgColor} inset !important`,
+                WebkitTextFillColor: `${inputTextColor} !important`,
+            }, '& input:-webkit-autofill:focus': {
+                WebkitBoxShadow: `0 0 0 30px ${inputBgColor} inset !important`,
+                WebkitTextFillColor: `${inputTextColor} !important`,
+            }, '& input:-webkit-autofill:active': {
+                WebkitBoxShadow: `0 0 0 30px ${inputBgColor} inset !important`,
+                WebkitTextFillColor: `${inputTextColor} !important`,
+            } }, props.style), props.sx) })));
+};
+PhoneInput.displayName = 'PhoneInput';
+export default React.memo(PhoneInput);

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

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

package/build/components/PhoneInput/index.js

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

package/build/components/SkeletonLoader/SkeletonLoader.d.ts

@@ -0,0 +1,4 @@
+declare const SkeletonLoader: ({ isDarkMode }: {
+    isDarkMode?: boolean | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export default SkeletonLoader;

package/build/components/SkeletonLoader/SkeletonLoader.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SkeletonLoader = ({ isDarkMode = false }) => {
+    const colors = isDarkMode
+        ? { bg: "#121212", base: "#2a2a2a", shimmer: "#3a3a3a" }
+        : { bg: "#f9f9f9", base: "#eeeeee", shimmer: "#f5f5f5" };
+    const skeletonStyles = `
+    @keyframes shimmer {
+      0% { background-position: -200% 0; }
+      100% { background-position: 200% 0; }
+    }
+
+    .sk-wrapper {
+      width: 100%;
+      max-width: 500px;
+      padding: 24px;
+      background-color: ${colors.bg};
+      border-radius: 8px;
+      margin: 0 auto;
+      transition: background-color 0.3s ease;
+    }
+
+    .sk-base {
+      background: ${colors.base};
+      background: linear-gradient(90deg, ${colors.base} 25%, ${colors.shimmer} 50%, ${colors.base} 75%);
+      background-size: 200% 100%;
+      animation: shimmer 1.5s infinite linear;
+      border-radius: 4px;
+    }
+
+    .sk-label {
+      height: 12px;
+      margin-bottom: 12px;
+    }
+
+    .sk-input {
+      width: 100%;
+      height: 65px;
+      margin-bottom: 35px;
+      border-radius: 4px;
+    }
+
+    .sk-button {
+      width: 100%;
+      height: 55px;
+      border-radius: 4px; /* Matches the updated button style */
+    }
+  `;
+    return (_jsxs("div", { className: "sk-wrapper", children: [_jsx("style", { children: skeletonStyles }), _jsx("div", { className: "sk-base sk-label", style: { width: "110px" } }), _jsx("div", { className: "sk-base sk-input" }), _jsx("div", { className: "sk-base sk-button" })] }));
+};
+export default SkeletonLoader;

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

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

package/build/components/SkeletonLoader/index.js

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

package/build/components/Text/Text.d.ts

@@ -0,0 +1,5 @@
+import { TypographyProps } from '@mui/material/Typography';
+interface IProps extends TypographyProps {
+}
+export default function Text({ children, variant, ...props }: IProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/components/Text/Text.js

@@ -0,0 +1,17 @@
+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 Typography from '@mui/material/Typography';
+export default function Text(_a) {
+    var { children, variant } = _a, props = __rest(_a, ["children", "variant"]);
+    return (_jsx(Typography, Object.assign({ id: "text", "aria-label": "text", variant: variant || 'subtitle1', fontWeight: "normal" }, props, { children: children || '' })));
+}

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

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

package/build/components/Text/index.js

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

package/build/components/TooltipAdapter/TooltipAdapter.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TooltipProps } from '@mui/material/Tooltip';
+interface TooltipAdapterProps extends TooltipProps {
+    handleClose?: () => void;
+}
+declare const _default: React.NamedExoticComponent<Readonly<TooltipAdapterProps>>;
+export default _default;

package/build/components/TooltipAdapter/TooltipAdapter.js

@@ -0,0 +1,63 @@
+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 React, { memo } from 'react';
+import { styled } from '@mui/material/styles';
+import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
+import { ClickAwayListener } from '@mui/base/ClickAwayListener';
+import { useAppTheme } from '../../hooks';
+import { getProperty } from '../../utils';
+import Box from '@mui/material/Box';
+const HtmlTooltip = styled((_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(Tooltip, Object.assign({}, props, { classes: { popper: className } })));
+})(({ theme }) => ({
+    [`& .${tooltipClasses.tooltip}`]: {
+        padding: '10.667px',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        gap: '5.333px',
+        border: '1px solid #dadde9',
+    },
+    [`& .${tooltipClasses.arrow}`]: {
+        [`&::before`]: {
+            border: '1px solid #dadde9',
+        },
+    },
+}));
+const TooltipAdapter = (_a) => {
+    var { handleClose } = _a, props = __rest(_a, ["handleClose"]);
+    const { theme: appTheme } = useAppTheme();
+    const tooltipBaseThemePath = appTheme.Click2Pay.toolTip;
+    const handleClickAway = React.useCallback(() => {
+        handleClose === null || handleClose === void 0 ? void 0 : handleClose();
+    }, []);
+    return (_jsx(ClickAwayListener, { onClickAway: handleClickAway, children: _jsx(Box, { component: "section", "data-testid": "TooltipAdapter_ClickAwayListenerContainer", "data-open": props.open, sx: {
+                position: 'relative',
+            }, children: _jsx(HtmlTooltip, Object.assign({ "data-testid": "TooltipAdapter", arrow: true, placement: "top" }, props, { sx: {
+                    [`& .${tooltipClasses.tooltip}`]: {
+                        marginBottom: '4px !important',
+                        maxWidth: `${tooltipBaseThemePath.maxWidth}px`,
+                        borderRadius: `${tooltipBaseThemePath.cornerRadius}px`,
+                        backgroundColor: getProperty(tooltipBaseThemePath.background, appTheme.GlobalValues.Colors),
+                        borderColor: getProperty(tooltipBaseThemePath.borderColor, appTheme.GlobalValues.Colors),
+                    },
+                    [`& .${tooltipClasses.arrow}`]: {
+                        color: getProperty(tooltipBaseThemePath.background, appTheme.GlobalValues.Colors),
+                        '::before': {
+                            borderColor: getProperty(tooltipBaseThemePath.borderColor, appTheme.GlobalValues.Colors),
+                        },
+                    },
+                }, children: props.children })) }) }));
+};
+TooltipAdapter.displayName = 'TooltipAdapter';
+export default memo(TooltipAdapter);