@tap-payments/os-micro-frontend-shared 0.1.441 → 0.1.442

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.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.js

@@ -1 +1,2 @@
-export{a as default}from'../../chunk-62CGUEB4.js';import'../../chunk-OYEIM6ED.js';import'../../chunk-RWXGVZUC.js';
+import CardEmptyState from './CardEmptyState';
+export default CardEmptyState;

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.js

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

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.js

@@ -1 +1,2 @@
-export{a as default}from'../../chunk-DJYRLVOD.js';import'../../chunk-5AIEKGEA.js';import'../../chunk-RWXGVZUC.js';
+import CardHeadline from './CardHeadline';
+export default CardHeadline;

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 { CHECKED_ICON, UNCHECKED_ICON } 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: props.disabled ? UNCHECKED_ICON : CHECKED_ICON }, props)));
+}
+export default memo(CheckboxInput);

package/build/components/Checkbox/index.js

@@ -1 +1,2 @@
-export{a as default}from'../../chunk-GMRNI4U5.js';import'../../chunk-OYEIM6ED.js';import'../../chunk-RWXGVZUC.js';
+import Checkbox from './Checkbox';
+export default Checkbox;

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.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.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.js

@@ -1 +1,4 @@
-export{a as Chip,b as GroupIconChip,c as GroupIconChips}from'../../chunk-VJLQXTHX.js';import'../../chunk-L3M6OM4B.js';import'../../chunk-RWXGVZUC.js';
+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/style.js

@@ -0,0 +1,76 @@
+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 { Box, styled } from '@mui/material';
+import { motion } from 'framer-motion';
+import { forwardRef } from 'react';
+export const ChipStyled = styled(forwardRef((props, ref) => {
+    const _a = props, { className, variant = 'text' } = _a, restProps = __rest(_a, ["className", "variant"]);
+    const calcClassName = `${className || ''} CustomVariant_${variant}`;
+    return _jsx(Box, Object.assign({ ref: ref }, restProps, { className: calcClassName }));
+}), {
+    shouldForwardProp: (prop) => prop !== 'icon',
+})(({ theme, variant = 'text', icon }) => {
+    return Object.assign(Object.assign(Object.assign(Object.assign({ border: `1px solid ${theme.palette.divider}`, borderRadius: '30px', backgroundColor: theme.palette.background.paper, display: 'flex', alignItems: 'center', justifyContent: 'center' }, (icon && { justifyContent: 'flex-start', gap: theme.spacing(1) })), (variant === 'text' && {
+        padding: `${theme.spacing(0.75)} ${theme.spacing(1)}`,
+        height: '30px',
+        maxWidth: '150px',
+    })), (variant === 'circular' && {
+        height: 24,
+        width: 24,
+    })), (variant === 'pill-icon' && {
+        height: 24,
+        width: 36,
+    }));
+});
+export const StyledSourceCell = styled('span')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    gap: theme.spacing(1),
+}));
+export const SourcesContainer = styled(motion.span, { shouldForwardProp: (prop) => prop !== 'sourcesCount' })(({ sourcesCount }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    position: 'absolute',
+    minWidth: `${sourcesCount * 6 + 36}px `,
+    minHeight: '24px',
+    cursor: 'pointer',
+    backgroundColor: 'transparent',
+    borderRadius: '16px',
+}));
+// eslint-disable-next-line react-refresh/only-export-components
+export const defaultGetSourceAnimation = (params) => {
+    const { index, xDelta = 39, shadow, itemsCount = 0, expandDirection = 'RIGHT' } = params;
+    const startDisplacement = (itemsCount - 1) * 6;
+    const result = {
+        start: {
+            x: index * 6,
+            transition: {
+                duration: 0.3,
+                type: 'tween',
+                ease: 'easeIn',
+            },
+        },
+        animate: {
+            x: expandDirection === 'RIGHT' ? index * xDelta : startDisplacement + -1 * ((itemsCount - 1 - index) * xDelta),
+            transition: {
+                duration: 0.3,
+                type: 'tween',
+                ease: 'easeOut',
+            },
+            boxShadow: shadow,
+        },
+    };
+    return result;
+};

package/build/components/Chip/type.js

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

package/build/components/CircularProgressWithLabel/CircularProgressWithLabel.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { LoadingText, LoadingIcon, Wrapper, LoadingTextWrapper } from './style';
+function CircularProgressWithLabel(props) {
+    return (_jsxs(Wrapper, { children: [_jsx(LoadingIcon, Object.assign({ variant: "determinate" }, props)), _jsx(LoadingTextWrapper, { children: _jsx(LoadingText, Object.assign({ variant: "caption", color: "text.secondary" }, { children: `${Math.round(props.value)}%` })) })] }));
+}
+export default memo(CircularProgressWithLabel);

package/build/components/CircularProgressWithLabel/index.js

@@ -1 +1,2 @@
-export{a as default}from'../../chunk-S2BQCMBY.js';import'../../chunk-RWXGVZUC.js';
+import CircularProgressWithLabel from './CircularProgressWithLabel';
+export default CircularProgressWithLabel;

package/build/components/CircularProgressWithLabel/style.js

@@ -0,0 +1,31 @@
+import { Typography } from '@mui/material';
+import Box from '@mui/material/Box';
+import CircularProgress, { circularProgressClasses } from '@mui/material/CircularProgress';
+import { styled, alpha } from '@mui/material/styles';
+export const LoadingIcon = styled(CircularProgress)(({ theme }) => ({
+    color: theme.palette.common.blue,
+    background: alpha(theme.palette.info.dark, 0.05),
+    borderRadius: '50%',
+    [`& .${circularProgressClasses.circle}`]: {
+        strokeLinecap: 'round',
+    },
+}));
+export const LoadingText = styled(Typography)(() => ({
+    fontSize: '14px',
+    fontWeight: 700,
+    color: '#3B4152',
+}));
+export const Wrapper = styled(Box)(() => ({
+    position: 'relative',
+    display: 'inline-flex',
+}));
+export const LoadingTextWrapper = styled(Box)(() => ({
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+    position: 'absolute',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+}));

package/build/components/Collapse/Collapse.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 MUICollapse from '@mui/material/Collapse';
+export default function Collapse(_a) {
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    return (_jsx(MUICollapse, Object.assign({ unmountOnExit: true, timeout: 500 }, rest, { children: children })));
+}

package/build/components/Collapse/index.js

@@ -1 +1,2 @@
-export{a as default}from'../../chunk-QGXXI4EO.js';import'../../chunk-RWXGVZUC.js';
+import Collapse from './Collapse';
+export default Collapse;

package/build/components/ColorPicker/ColorPicker.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from 'react';
+import Box from '@mui/material/Box';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { EditButton, StyledCloseButtonWrapper } from './style';
+import { closeXIcon } from '../../constants/index.js';
+import ColorPickerPanel from './ColorPickerPanel';
+import { Popper } from '@mui/material';
+const DEFAULT_OPTIONS = {
+    hideReset: false,
+    disableAlpha: false,
+};
+const ColorPicker = ({ value = '#ffffff', onChange, onReset, sx, options = DEFAULT_OPTIONS, disabled = false }) => {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const { disableAlpha = false, hideReset = false } = Object.assign(Object.assign({}, DEFAULT_OPTIONS), options);
+    const rootRef = useRef(null);
+    const handleOpen = useCallback(() => {
+        if (disabled)
+            return;
+        setAnchorEl(rootRef.current);
+    }, [disabled]);
+    const handleCancel = useCallback(() => {
+        if (disabled)
+            return;
+        setAnchorEl(null);
+    }, [disabled]);
+    const handleConfirm = useCallback((newValue) => {
+        onChange(disableAlpha ? newValue.substring(0, 7) : newValue);
+        setAnchorEl(null);
+    }, [onChange, disableAlpha]);
+    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: () => setAnchorEl(null) }, { children: _jsxs(Stack, Object.assign({ ref: rootRef, bgcolor: "grey.400", borderRadius: "4px", p: "4px", pr: "12px", direction: "row", justifyContent: "space-between", spacing: 1, alignItems: "center", className: "color-picker", sx: sx }, { children: [_jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center", className: "color-picker__controls-wrapper" }, { children: [_jsx(Box, { borderRadius: "5px", width: 32, height: 32, sx: { backgroundColor: value }, className: "color-picker__viewer" }), _jsxs(Box, Object.assign({ className: "color-picker__actions-wrapper" }, { children: [_jsx(Typography, Object.assign({ className: "color-picker__label", fontWeight: 500, fontSize: 9, color: "text.primary", textTransform: "uppercase" }, { children: value })), _jsx(EditButton, Object.assign({ className: "color-picker__edit-btn", type: "button", onClick: handleOpen, disabled: disabled }, { children: "Edit" }))] }))] })), !hideReset ? (_jsx(StyledCloseButtonWrapper, Object.assign({ className: "color-picker__close-btn", type: "button", disabled: disabled, onClick: onReset }, { children: _jsx(Box, { component: "img", src: closeXIcon, width: 10, height: 10 }) }))) : (_jsx("div", {})), _jsx(Popper, Object.assign({ anchorEl: anchorEl, open: !!anchorEl, placement: "top" }, { children: _jsx(ColorPickerPanel, { initialValue: value, onCancel: handleCancel, onConfirm: handleConfirm, disableAlpha: disableAlpha }) }))] })) })));
+};
+export default ColorPicker;

package/build/components/ColorPicker/ColorPickerPanel.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 { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { RgbaColorPicker, RgbColorPicker } from 'react-colorful';
+import Stack from '@mui/material/Stack';
+import Divider from '@mui/material/Divider';
+import { hexa2Rgba, rgba2Hexa } from '../../utils/index.js';
+import { CancelButton, ConfirmButton, Footer, StyledColorWidgetWrapper } from './style';
+import ColorSchemeSelect from './ColorSchemeSelect';
+import RGBAFields from './RGBAFields';
+import HexaFields from './HexaFields';
+const ColorPickerPanel = ({ initialValue = '#ffffff', onCancel, onConfirm, disableAlpha = false }) => {
+    const [colorScheme, setColorScheme] = useState('RGB');
+    const [color, setColor] = useState(() => {
+        const _a = hexa2Rgba(initialValue).value, { alpha: a } = _a, rest = __rest(_a, ["alpha"]);
+        return Object.assign(Object.assign({}, rest), { a });
+    });
+    const { t } = useTranslation();
+    const handleCancel = useCallback(() => {
+        const _a = hexa2Rgba(initialValue).value, { alpha: a } = _a, rest = __rest(_a, ["alpha"]);
+        setColor(Object.assign(Object.assign({}, rest), { a }));
+        onCancel();
+    }, [initialValue, onCancel]);
+    const handleConfirm = useCallback(() => {
+        const { a: alpha } = color, rest = __rest(color, ["a"]);
+        onConfirm(rgba2Hexa(Object.assign(Object.assign({}, rest), { alpha: disableAlpha ? 1 : alpha })));
+    }, [color, onConfirm, disableAlpha]);
+    const handleColorChange = useCallback((newColor) => {
+        if (disableAlpha) {
+            setColor(Object.assign(Object.assign({}, newColor), { a: 1 }));
+        }
+        else {
+            setColor(newColor);
+        }
+    }, [disableAlpha]);
+    const handleRGBAFieldsChange = useCallback((newColor) => {
+        setColor(Object.assign(Object.assign({}, newColor), { a: newColor.a / 100 }));
+    }, []);
+    const handleHexaFieldsChange = useCallback((newColor) => {
+        setColor(Object.assign(Object.assign({}, newColor), { a: newColor.a }));
+    }, []);
+    const PickerArea = disableAlpha ? RgbColorPicker : RgbaColorPicker;
+    return (_jsxs(StyledColorWidgetWrapper, Object.assign({ className: "color-picker__widget" }, { children: [_jsx(PickerArea, { color: color, onChange: handleColorChange }), _jsxs(Stack, Object.assign({ mt: 2, spacing: 1, direction: "row" }, { children: [_jsx(ColorSchemeSelect, { scheme: colorScheme, setScheme: setColorScheme }), colorScheme === 'RGB' ? (_jsx(RGBAFields, { value: Object.assign(Object.assign({}, color), { a: Math.round(color.a * 100) }), onChange: handleRGBAFieldsChange, disableAlpha: disableAlpha })) : (_jsx(HexaFields, { value: Object.assign(Object.assign({}, color), { a: color.a }), onChange: handleHexaFieldsChange, disableAlpha: disableAlpha }))] })), _jsx(Divider, { sx: { my: '12px' } }), _jsxs(Footer, Object.assign({ className: "color-picker__widget-actions" }, { children: [_jsx(CancelButton, Object.assign({ className: "color-picker__widget-actions__cancel", onClick: handleCancel }, { children: t('cancel') })), _jsx(ConfirmButton, Object.assign({ className: "color-picker__widget-actions__confirm", onClick: handleConfirm }, { children: t('okay') }))] }))] })));
+};
+export default ColorPickerPanel;

package/build/components/ColorPicker/ColorSchemeSelect.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useCallback } from 'react';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import Popper from '@mui/material/Popper';
+import Box from '@mui/material/Box';
+import { blackHeadingDownArrow } from '../../constants/index.js';
+import { ColorSchemeButton, ColorSchemeList } from './style';
+import MenuItem from '@mui/material/MenuItem';
+const ColorSchemeSelect = ({ scheme, setScheme }) => {
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const open = !!anchorEl;
+    const handleToggle = useCallback((event) => {
+        setAnchorEl(anchorEl ? null : event.currentTarget);
+    }, [anchorEl]);
+    const handleClose = useCallback(() => {
+        setAnchorEl(null);
+    }, []);
+    const handleSelect = useCallback((selectedScheme) => {
+        handleClose();
+        setScheme(selectedScheme);
+    }, [handleClose, setScheme]);
+    return (_jsxs(_Fragment, { children: [_jsxs(ColorSchemeButton, Object.assign({ component: "button", active: open, onClick: handleToggle }, { children: [scheme, _jsx(Box, { component: "img", sx: { transform: open ? 'rotateZ(180deg)' : 'rotateZ(0)', transition: '200ms transform ease-out' }, src: blackHeadingDownArrow })] })), _jsx(Popper, Object.assign({ anchorEl: anchorEl, open: !!anchorEl, placement: "bottom", disablePortal: true, keepMounted: true, modifiers: [
+                    {
+                        name: 'offset',
+                        options: {
+                            offset: [0, 4],
+                        },
+                    },
+                ] }, { children: _jsx(ClickAwayListener, Object.assign({ onClickAway: (event) => {
+                        if (anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.contains(event.target))
+                            return;
+                        handleClose();
+                    } }, { children: _jsxs(ColorSchemeList, { children: [_jsx(MenuItem, Object.assign({ onClick: () => handleSelect('RGB') }, { children: "RGB" })), _jsx(MenuItem, Object.assign({ onClick: () => handleSelect('HEX') }, { children: "HEX" }))] }) })) }))] }));
+};
+export default ColorSchemeSelect;