@tap-payments/os-micro-frontend-shared 0.0.183 → 0.0.184

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 !important',
+        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/CardEmptyState/CardEmptyState.d.ts

@@ -0,0 +1,2 @@
+import { CardEmptyStateProps } from './type';
+export default function CardEmptyState({ heading, message, ...props }: CardEmptyStateProps): import("react/jsx-runtime").JSX.Element;

package/build/components/CardEmptyState/CardEmptyState.js

@@ -0,0 +1,20 @@
+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 { useTranslation } from 'react-i18next';
+import { emptyIcon } from '../../constants/index.js';
+import { StyledContainer, StyledImage, EmptyListHeading, EmptyListMessage } from './style';
+export default function CardEmptyState(_a) {
+    var { heading, message } = _a, props = __rest(_a, ["heading", "message"]);
+    const { t } = useTranslation();
+    return (_jsxs(StyledContainer, Object.assign({}, props, { children: [_jsx(StyledImage, { src: emptyIcon, alt: "empty container" }), _jsx(EmptyListHeading, { children: t(heading) }), _jsx(EmptyListMessage, { children: t(message) })] })));
+}

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

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

package/build/components/CardEmptyState/index.js

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

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const StyledContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").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").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const StyledImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const EmptyListHeading: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+export declare const EmptyListMessage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;

package/build/components/CardEmptyState/style.js

@@ -0,0 +1,35 @@
+import { Box, styled } from '@mui/material';
+export const StyledContainer = styled(Box)(() => ({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#F6F8FACC',
+    gap: '0.5rem',
+    height: '100%',
+}));
+export const StyledImage = styled('img')(() => ({
+    width: '2rem',
+    height: '2rem',
+}));
+export const EmptyListHeading = styled('h1')(({ theme }) => {
+    var _a;
+    return ({
+        fontWeight: 600,
+        fontSize: '1rem',
+        color: (_a = theme.palette.text) === null || _a === void 0 ? void 0 : _a.primary,
+        padding: 0,
+        margin: 0,
+    });
+});
+export const EmptyListMessage = styled('p')(({ theme }) => {
+    var _a;
+    return ({
+        fontWeight: 400,
+        fontSize: '0.75rem',
+        color: (_a = theme.palette.text) === null || _a === void 0 ? void 0 : _a.primary,
+        padding: 0,
+        margin: 0,
+        opacity: 0.5,
+    });
+});

package/build/components/CardEmptyState/type.d.ts

@@ -0,0 +1,5 @@
+import { BoxProps } from '@mui/material';
+export interface CardEmptyStateProps extends BoxProps {
+    heading: string;
+    message: string;
+}

package/build/components/CardEmptyState/type.js

@@ -0,0 +1 @@
+export {};

package/build/components/CardHeadline/CardHeadline.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface WelcomeTextProps {
+    headline: string;
+    subHeadline: string;
+}
+declare function CardHeadline({ headline, subHeadline }: WelcomeTextProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof CardHeadline>;
+export default _default;

package/build/components/CardHeadline/CardHeadline.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import Text from '../Text';
+const Wrapper = styled(Box)(({ theme }) => ({
+    textAlign: 'center',
+    color: theme.palette.text.primary,
+}));
+const HeadlineText = styled(Text)(({ theme }) => (Object.assign(Object.assign({}, theme.typography.h3), { marginBottom: '7px', lineHeight: '48px', fontWeight: theme.typography.fontWeightMedium, textTransform: 'capitalize' })));
+const SubHeadlineText = styled(Text)(({ theme }) => (Object.assign(Object.assign({}, theme.typography.h5), { lineHeight: '29px', opacity: 0.3, fontWeight: theme.typography.fontWeightMedium })));
+function CardHeadline({ headline, subHeadline }) {
+    return (_jsxs(Wrapper, { children: [headline && _jsx(HeadlineText, { children: headline }), subHeadline && _jsx(SubHeadlineText, { children: subHeadline })] }));
+}
+export default memo(CardHeadline);

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

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

package/build/components/CardHeadline/index.js

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

package/build/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { CheckboxProps } from '@mui/material';
+declare function CheckboxInput(props: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof CheckboxInput>;
+export default _default;

package/build/components/Checkbox/Checkbox.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { Checkbox } from '@mui/material';
+import { checkboxIcon, unCheckedIcon } from '../../constants/index.js';
+function CheckboxInput(props) {
+    return (_jsx(Checkbox, Object.assign({ disableRipple: true, sx: (theme) => ({
+            '[data-testid="IndeterminateCheckBoxIcon"]': {
+                fill: theme.palette.info.dark,
+                width: '14px !important',
+                height: '16px !important',
+            },
+        }), checkedIcon: _jsx("img", { src: props.disabled ? unCheckedIcon : checkboxIcon, alt: "checked" }) }, props)));
+}
+export default memo(CheckboxInput);

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

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

package/build/components/Checkbox/index.js

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

package/build/components/Chip/Chip.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ChipProps } from './type';
+declare const Chip: import("react").ForwardRefExoticComponent<Omit<ChipProps, "ref"> & import("react").RefAttributes<import("@mui/types").OverridableComponent<import("@mui/system").BoxTypeMap<{}, "div", import("@mui/material").Theme>>>>;
+export default Chip;

package/build/components/Chip/Chip.js

@@ -0,0 +1,20 @@
+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 { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { ChipStyled } from './style';
+const Chip = forwardRef((_a, ref) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    const { icon } = props;
+    return (_jsxs(ChipStyled, Object.assign({ ref: ref }, props, { children: [_jsx(_Fragment, { children: icon }), children] })));
+});
+export default Chip;

package/build/components/Chip/GroupIconChip.d.ts

@@ -0,0 +1,3 @@
+import { GroupIconChipProps } from './type';
+declare const GroupIconChip: ({ order, children, getSourceAnimation: customGetSourceAnimation, sourceCount, expandDirection }: GroupIconChipProps) => import("react/jsx-runtime").JSX.Element;
+export default GroupIconChip;

package/build/components/Chip/GroupIconChip.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import ImageWrapper from '../ImageWrapper';
+import { useTheme } from '@mui/material';
+import { defaultGetSourceAnimation } from './style';
+const GroupIconChip = ({ order, children, getSourceAnimation: customGetSourceAnimation, sourceCount, expandDirection }) => {
+    const getSourceAnimation = customGetSourceAnimation || defaultGetSourceAnimation;
+    const theme = useTheme();
+    const variants = useMemo(() => getSourceAnimation({
+        index: order,
+        shadow: theme.shadows[4],
+        itemsCount: sourceCount,
+        expandDirection,
+    }), [order, theme.shadows, getSourceAnimation, sourceCount, expandDirection]);
+    return (_jsx(ImageWrapper, Object.assign({ order: order, variants: variants }, { children: children })));
+};
+export default GroupIconChip;

package/build/components/Chip/GroupIconChips.d.ts

@@ -0,0 +1,3 @@
+import { GroupIconChipsProps } from './type';
+declare const GroupIconChips: ({ children, className, getSourceAnimation, expandDirection }: GroupIconChipsProps) => import("react/jsx-runtime").JSX.Element;
+export default GroupIconChips;

package/build/components/Chip/GroupIconChips.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { SourcesContainer, StyledSourceCell } from './style';
+import GroupIconChip from './GroupIconChip';
+const GroupIconChips = ({ children, className, getSourceAnimation, expandDirection }) => {
+    const sourceCount = React.Children.count(children);
+    const [cellDimentions, setCellDimentions] = useState({ width: 0, height: 0 });
+    const animationContainerRef = useRef(null);
+    useEffect(() => {
+        if (!animationContainerRef.current)
+            return;
+        const animationContainer = animationContainerRef.current;
+        setCellDimentions({
+            width: animationContainer.clientWidth,
+            height: animationContainer.clientHeight,
+        });
+    }, []);
+    const overrideChildren = useMemo(() => React.Children.map(children, (child) => {
+        if (!React.isValidElement(child) || child.type !== GroupIconChip) {
+            console.error(`⚠️ WARNING: "${GroupIconChips.name}" must contains only children of type "${GroupIconChip.name}"`);
+            return child;
+        }
+        return React.cloneElement(child, Object.assign(Object.assign({}, child.props), { sourceCount,
+            getSourceAnimation,
+            expandDirection }));
+    }), [children, getSourceAnimation, sourceCount, expandDirection]);
+    return (_jsx(StyledSourceCell, Object.assign({ "data-testid": "styled-source-cell", sx: Object.assign({}, cellDimentions) }, { children: _jsx(SourcesContainer, Object.assign({ ref: animationContainerRef, layout: true, className: className, whileHover: "animate", animate: "start", sourcesCount: sourceCount, variants: {
+                animate: {
+                    width: sourceCount * (6 + 32),
+                    zIndex: 50,
+                },
+            }, style: {
+                zIndex: 29,
+            } }, { children: overrideChildren })) })));
+};
+export default GroupIconChips;

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

@@ -0,0 +1,4 @@
+export { default as Chip } from './Chip';
+export { default as GroupIconChips } from './GroupIconChips';
+export { default as GroupIconChip } from './GroupIconChip';
+export * from './type';

package/build/components/Chip/index.js

@@ -0,0 +1,4 @@
+export { default as Chip } from './Chip';
+export { default as GroupIconChips } from './GroupIconChips';
+export { default as GroupIconChip } from './GroupIconChip';
+export * from './type';