@tap-payments/os-micro-frontend-shared 0.1.39 → 0.1.40-9.fix.1

package/build/components/BetaBanner/style.js

@@ -0,0 +1,18 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+export const BannerContainer = styled(Box)(() => ({
+    color: '#1F88D0',
+    backgroundColor: '#1F88D00D',
+    padding: '8px 12px',
+    borderRadius: '4px',
+    fontSize: '11px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '2px',
+}));
+export const BoldText = styled('span')(() => ({
+    fontWeight: 700,
+}));
+export const RegularText = styled('span')(() => ({
+    fontWeight: 500,
+}));

package/build/components/BrandLogo/BrandLogo.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { BoxProps } from '@mui/material/Box';
+export interface BrandLogoProps extends BoxProps {
+    data?: Blob;
+    width?: number | string;
+    height?: number | string;
+    isError?: boolean;
+    isLoading?: boolean;
+}
+declare function BrandLogo({ data, isError, isLoading, width, height, ...props }: Readonly<BrandLogoProps>): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof BrandLogo>;
+export default _default;

package/build/components/BrandLogo/BrandLogo.js

@@ -0,0 +1,35 @@
+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 { memo, useMemo } from 'react';
+import { useTheme } from '@mui/material/styles';
+import { grayBrandIcon, pdfIcon } from '../../constants/index.js';
+import { Icon } from '../index.js';
+import { Loading } from './Loading';
+function BrandLogo(_a) {
+    var { data, isError, isLoading, width = 24, height = 24 } = _a, props = __rest(_a, ["data", "isError", "isLoading", "width", "height"]);
+    const theme = useTheme();
+    const isPdf = useMemo(() => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.type) === null || _a === void 0 ? void 0 : _a.includes('application/pdf'); }, [data]);
+    const logoUrl = useMemo(() => (data ? (window.URL ? URL : webkitURL).createObjectURL(data) : ''), [data]);
+    const imageSrc = useMemo(() => {
+        if (isError || !data)
+            return grayBrandIcon;
+        if (isPdf)
+            return pdfIcon;
+        return logoUrl;
+    }, [data, isError, isPdf, logoUrl]);
+    if (isLoading)
+        return _jsx(Loading, { width: width, height: height });
+    return (_jsx(Icon, { alt: "brand", src: imageSrc, sx: Object.assign({ borderRadius: '50%', backgroundColor: theme.palette.common.white, width,
+            height, objectFit: isPdf ? 'none' : 'contain' }, props.sx) }));
+}
+export default memo(BrandLogo);

package/build/components/BrandLogo/Loading.d.ts

@@ -0,0 +1,6 @@
+interface LoadingProps {
+    width?: number | string;
+    height?: number | string;
+}
+export declare const Loading: ({ width, height }: Readonly<LoadingProps>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/components/BrandLogo/Loading.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Skeleton } from '../index.js';
+export const Loading = ({ width, height }) => _jsx(Skeleton, { variant: "circular", width: width, height: height });

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

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

package/build/components/BrandLogo/index.js

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

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

@@ -2,4 +2,4 @@
 import { ButtonI } from './Button';
 export declare const BaseButtonStyled: import("@emotion/styled").StyledComponent<import("@mui/material/ButtonBase").ButtonBaseOwnProps & Omit<import("@mui/material/ButtonBase").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "disabled" | "style" | "className" | "classes" | "tabIndex" | "children" | "sx" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & ButtonI, {}, {}>;
+}, "disabled" | "classes" | "className" | "style" | "tabIndex" | "children" | "sx" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & ButtonI, {}, {}>;

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

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

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

@@ -11,11 +11,10 @@ export declare const ChipStyled: import("@emotion/styled").StyledComponent<impor
 export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const SourcesContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
-    id?: string | undefined;
-    slot?: string | undefined;
-    title?: string | undefined;
     color?: string | undefined;
-    className?: string | undefined;
+    content?: string | undefined;
+    translate?: "yes" | "no" | undefined;
+    id?: string | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined;
@@ -23,20 +22,21 @@ export declare const SourcesContainer: import("@emotion/styled").StyledComponent
     accessKey?: string | undefined;
     autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
     autoFocus?: boolean | undefined;
+    className?: string | undefined;
     contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
-    enterKeyHint?: "search" | "done" | "next" | "enter" | "go" | "previous" | "send" | undefined;
+    enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
+    slot?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;
     tabIndex?: number | undefined;
-    translate?: "yes" | "no" | undefined;
+    title?: string | undefined;
     radioGroup?: string | undefined;
     role?: import("react").AriaRole | undefined;
     about?: string | undefined;
-    content?: string | undefined;
     datatype?: string | undefined;
     inlist?: any;
     prefix?: string | undefined;
@@ -56,7 +56,7 @@ export declare const SourcesContainer: import("@emotion/styled").StyledComponent
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "off" | "on" | undefined;
-    inputMode?: "none" | "email" | "search" | "numeric" | "url" | "text" | "tel" | "decimal" | undefined;
+    inputMode?: "none" | "text" | "email" | "search" | "numeric" | "url" | "tel" | "decimal" | undefined;
     is?: string | undefined;
     exportparts?: string | undefined;
     part?: string | undefined;
@@ -72,7 +72,7 @@ export declare const SourcesContainer: import("@emotion/styled").StyledComponent
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "date" | "false" | "true" | "time" | "page" | "step" | "location" | undefined;
+    "aria-current"?: boolean | "page" | "date" | "false" | "true" | "time" | "step" | "location" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
@@ -82,7 +82,7 @@ export declare const SourcesContainer: import("@emotion/styled").StyledComponent
     "aria-expanded"?: (boolean | "false" | "true") | undefined;
     "aria-flowto"?: string | undefined;
     "aria-grabbed"?: (boolean | "false" | "true") | undefined;
-    "aria-haspopup"?: boolean | "false" | "true" | "dialog" | "menu" | "grid" | "listbox" | "tree" | undefined;
+    "aria-haspopup"?: boolean | "grid" | "false" | "true" | "dialog" | "listbox" | "menu" | "tree" | undefined;
     "aria-hidden"?: (boolean | "false" | "true") | undefined;
     "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
     "aria-keyshortcuts"?: string | undefined;

package/build/components/Chip/style.js

@@ -49,6 +49,7 @@ export const SourcesContainer = styled(motion.span)(({ sourcesCount }) => ({
     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;

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

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

package/build/components/ColorPicker/ColorPicker.d.ts

@@ -0,0 +1,14 @@
+import { type SxProps } from '@mui/material/styles';
+type ColorPickerProps = {
+    value?: string;
+    onChange: (value: string) => void;
+    onReset?: () => void;
+    sx?: SxProps;
+    disabled?: boolean;
+    options?: {
+        hideReset?: boolean;
+        disableAlpha?: boolean;
+    };
+};
+declare const ColorPicker: ({ value, onChange, onReset, sx, options, disabled }: ColorPickerProps) => import("react/jsx-runtime").JSX.Element;
+export default ColorPicker;

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.d.ts

@@ -0,0 +1,8 @@
+export type ColorPickerPanelProps = {
+    initialValue?: string;
+    onCancel: () => void;
+    onConfirm: (newValue: string) => void;
+    disableAlpha?: boolean;
+};
+declare const ColorPickerPanel: ({ initialValue, onCancel, onConfirm, disableAlpha }: ColorPickerPanelProps) => import("react/jsx-runtime").JSX.Element;
+export default ColorPickerPanel;

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.d.ts

@@ -0,0 +1,7 @@
+export type ColorScheme = 'RGB' | 'HEX';
+type ColorSchemeSelectProps = {
+    scheme: ColorScheme;
+    setScheme: (scheme: ColorScheme) => void;
+};
+declare const ColorSchemeSelect: ({ scheme, setScheme }: ColorSchemeSelectProps) => import("react/jsx-runtime").JSX.Element;
+export default ColorSchemeSelect;

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;

package/build/components/ColorPicker/HexaFields.d.ts

@@ -0,0 +1,8 @@
+import { RgbaColor } from 'react-colorful';
+type HexaFieldsProps = {
+    value: RgbaColor;
+    onChange: (newValue: RgbaColor) => void;
+    disableAlpha?: boolean;
+};
+declare const HexaFields: ({ value, onChange, disableAlpha }: HexaFieldsProps) => import("react/jsx-runtime").JSX.Element;
+export default HexaFields;

package/build/components/ColorPicker/HexaFields.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import Color from 'color';
+import { alpha } from '@mui/material/styles';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import InputAdornment from '@mui/material/InputAdornment';
+import { StyledInput } from './style';
+const HexaFields = ({ value, onChange, disableAlpha = false }) => {
+    const colorAsHex = useMemo(() => {
+        const color = Color.rgb(value.r, value.g, value.b, value.a);
+        return color.hex().replace('#', '');
+    }, [value]);
+    const [hexInput, setHexInput] = useState(colorAsHex);
+    const alphaPercent = Math.round(value.a * 100);
+    // Sync hexInput whenever `value` changes externally
+    useEffect(() => {
+        const newHex = Color.rgb(value.r, value.g, value.b).hex().replace('#', '');
+        setHexInput(newHex);
+    }, [value.r, value.g, value.b]);
+    const handleHexChange = (event) => {
+        let newHex = event.target.value.replace(/[^0-9a-fA-F]/g, '').toUpperCase();
+        if (newHex.length > 6)
+            newHex = newHex.slice(0, 6);
+        setHexInput(newHex);
+    };
+    const handleHexBlur = () => {
+        let formattedValue = hexInput;
+        if (formattedValue.length === 3) {
+            // Expand shorthand like FFF -> FFFFFF
+            formattedValue = formattedValue
+                .split('')
+                .map((ch) => ch + ch)
+                .join('');
+            setHexInput(formattedValue);
+        }
+        if (formattedValue.length === 6) {
+            try {
+                const newColor = Color(`#${formattedValue}`).alpha(value.a);
+                onChange({
+                    r: newColor.red(),
+                    g: newColor.green(),
+                    b: newColor.blue(),
+                    a: newColor.alpha(),
+                });
+            }
+            catch (_a) {
+                // invalid hex -> revert to current value
+                setHexInput(colorAsHex);
+            }
+        }
+        else {
+            // revert to current value if incomplete
+            setHexInput(colorAsHex);
+        }
+    };
+    const handleAlphaChange = (event) => {
+        let num = parseInt(event.target.value, 10);
+        if (isNaN(num))
+            num = 0;
+        if (num < 0)
+            num = 0;
+        if (num > 100)
+            num = 100;
+        onChange(Object.assign(Object.assign({}, value), { a: num / 100 }));
+    };
+    return (_jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "flex-start" }, { children: [_jsx(StyledInput, { value: hexInput, onChange: handleHexChange, onBlur: handleHexBlur, placeholder: "FFFFFF", sx: {
+                    flex: 1.4,
+                    '& .MuiOutlinedInput-root': {
+                        pl: 1,
+                    },
+                }, InputProps: {
+                    startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start", sx: { m: 0 } }, { children: _jsx(Typography, Object.assign({ component: "span", color: (theme) => alpha(theme.palette.text.primary, 0.5), display: "inline-block", fontSize: 12, fontWeight: 500 }, { children: "#" })) }))),
+                } }), !disableAlpha && (_jsx(StyledInput, { type: "number", value: alphaPercent, onChange: handleAlphaChange, inputProps: { min: 0, max: 100 }, sx: {
+                    flex: 0.8,
+                    '& .MuiOutlinedInput-root': {
+                        pr: 1,
+                    },
+                }, InputProps: {
+                    endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end", sx: { m: 0 } }, { children: _jsx(Typography, Object.assign({ component: "span", color: "text.primary", display: "inline-block", fontSize: 12, fontWeight: 500 }, { children: "%" })) }))),
+                } }))] })));
+};
+export default HexaFields;

package/build/components/ColorPicker/RGBAFields.d.ts

@@ -0,0 +1,8 @@
+import { RgbaColor } from 'react-colorful';
+type RGBAFieldsProps = {
+    value: RgbaColor;
+    onChange: (newValue: RgbaColor) => void;
+    disableAlpha?: boolean;
+};
+declare const RGBAFields: ({ value, onChange, disableAlpha }: RGBAFieldsProps) => import("react/jsx-runtime").JSX.Element;
+export default RGBAFields;

package/build/components/ColorPicker/RGBAFields.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from 'react';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import InputAdornment from '@mui/material/InputAdornment';
+import { StyledInput } from './style';
+const RGBAFields = ({ value, onChange, disableAlpha = false }) => {
+    const [internalValue, setInternalValue] = useState(value);
+    const { r, g, b, a } = internalValue;
+    useEffect(() => {
+        setInternalValue(value);
+    }, [value]);
+    const handleValueBoundaries = useCallback((num, max) => {
+        if (isNaN(num))
+            num = 0;
+        if (num < 0)
+            num = 0;
+        if (num > max)
+            num = max;
+        console.log('num', num);
+        return num;
+    }, []);
+    const handleChange = useCallback((key, max) => (event) => {
+        setInternalValue(Object.assign(Object.assign({}, internalValue), { [key]: handleValueBoundaries(+event.target.value, max) }));
+    }, [internalValue, handleValueBoundaries]);
+    const handleBlur = useCallback((key, max) => {
+        onChange(Object.assign(Object.assign({}, internalValue), { [key]: handleValueBoundaries(internalValue[key], max) }));
+    }, [onChange, internalValue, handleValueBoundaries]);
+    return (_jsxs(Stack, Object.assign({ direction: "row", spacing: 1 }, (disableAlpha && { flex: 1 }), { children: [_jsx(StyledInput, Object.assign({ type: "number", value: r, onBlur: () => handleBlur('r', 255), onChange: handleChange('r', 255), inputProps: { min: 0, max: 255, style: { textAlign: 'center' } }, variant: "outlined", size: "small" }, (disableAlpha && { sx: { flex: 1 } }))), _jsx(StyledInput, Object.assign({ type: "number", value: g, onBlur: () => handleBlur('g', 255), onChange: handleChange('g', 255), inputProps: { min: 0, max: 255, style: { textAlign: 'center' } }, variant: "outlined", size: "small" }, (disableAlpha && { sx: { flex: 1 } }))), _jsx(StyledInput, Object.assign({ type: "number", value: b, onBlur: () => handleBlur('b', 255), onChange: handleChange('b', 255), inputProps: { min: 0, max: 255, style: { textAlign: 'center' } }, variant: "outlined", size: "small" }, (disableAlpha && { sx: { flex: 1 } }))), !disableAlpha && (_jsx(StyledInput, { type: "number", value: a, onBlur: () => handleBlur('a', 100), onChange: handleChange('a', 100), inputProps: { min: 0, max: 100, style: { textAlign: 'center' } }, variant: "outlined", sx: {
+                    '& .MuiOutlinedInput-root': {
+                        pr: 1,
+                    },
+                }, InputProps: {
+                    endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end", sx: { m: 0 } }, { children: _jsx(Typography, Object.assign({ component: "span", display: "inline-block", fontSize: 12, fontWeight: 500 }, { children: "%" })) }))),
+                }, size: "small" }))] })));
+};
+export default RGBAFields;

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

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

package/build/components/ColorPicker/index.js

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