@tap-payments/os-micro-frontend-shared 0.1.105 → 0.1.106

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 Tap Payments
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2025 Tap Payments
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,12 +1,12 @@
-# os-micro-frontend-shared
-
-## Publishing Workflow
-
-1. Update version in package.json
-2. Commit changes
-3. Create and push a tag:
-
-```bash
-npm version patch  # or minor, major
-git push origin main --tags
-```
+# os-micro-frontend-shared
+
+## Publishing Workflow
+
+1. Update version in package.json
+2. Commit changes
+3. Create and push a tag:
+
+```bash
+npm version patch  # or minor, major
+git push origin main --tags
+```

package/build/components/ColorPicker/ColorPicker.js

@@ -1,50 +1,26 @@
-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, useRef, useState } from 'react';
-import { RgbaColorPicker } from 'react-colorful';
-import { useTranslation } from 'react-i18next';
 import Box from '@mui/material/Box';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
-import Divider from '@mui/material/Divider';
-import Popper from '@mui/material/Popper';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
-import { CancelButton, ConfirmButton, Footer, StyledCloseButtonWrapper, StyledColorWidgetWrapper } from './style';
+import { StyledCloseButtonWrapper } from './style';
 import { closeXIcon } from '../../constants/index.js';
-import { hexa2Rgba, rgba2Hexa } from '../../utils/index.js';
+import ColorPickerPanel from './ColorPickerPanel';
+import { Popper } from '@mui/material';
 const ColorPicker = ({ id, value = '#ffffff', onChange, onReset, sx, options }) => {
-    const { t } = useTranslation();
     const [anchorEl, setAnchorEl] = useState(null);
     const rootRef = useRef(null);
-    const [color, setColor] = useState(() => {
-        const _a = hexa2Rgba(value).value, { alpha: a } = _a, rest = __rest(_a, ["alpha"]);
-        return Object.assign(Object.assign({}, rest), { a });
-    });
     const handleOpen = useCallback(() => {
         setAnchorEl(rootRef.current);
-        const _a = hexa2Rgba(value).value, { alpha: a } = _a, rest = __rest(_a, ["alpha"]);
-        setColor(Object.assign(Object.assign({}, rest), { a }));
-    }, [value]);
+    }, []);
     const handleCancel = useCallback(() => {
-        const _a = hexa2Rgba(value).value, { alpha: a } = _a, rest = __rest(_a, ["alpha"]);
-        setColor(Object.assign(Object.assign({}, rest), { a }));
         setAnchorEl(null);
-    }, [value]);
-    const handleConfirm = useCallback(() => {
-        const { a: alpha } = color, rest = __rest(color, ["a"]);
-        onChange(rgba2Hexa(Object.assign(Object.assign({}, rest), { alpha })));
+    }, []);
+    const handleConfirm = useCallback((newValue) => {
+        onChange(newValue);
         setAnchorEl(null);
-    }, [onChange, color]);
-    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(Typography, Object.assign({ className: "color-picker__edit-btn", role: "button", onClick: handleOpen, htmlFor: id, fontWeight: 500, fontSize: 9, color: "info.dark", component: "label", sx: { textDecoration: 'underline', cursor: 'pointer' } }, { children: "Edit" }))] }))] })), !(options === null || options === void 0 ? void 0 : options.hideReset) ? (_jsx(StyledCloseButtonWrapper, Object.assign({ className: "color-picker__close-btn", type: "button", 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: _jsxs(StyledColorWidgetWrapper, Object.assign({ className: "color-picker__widget" }, { children: [_jsx(RgbaColorPicker, { color: color, onChange: setColor }), _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') }))] }))] })) }))] })) })));
+    }, [onChange]);
+    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(Typography, Object.assign({ className: "color-picker__edit-btn", role: "button", onClick: handleOpen, htmlFor: id, fontWeight: 500, fontSize: 9, color: "info.dark", component: "label", sx: { textDecoration: 'underline', cursor: 'pointer' } }, { children: "Edit" }))] }))] })), !(options === null || options === void 0 ? void 0 : options.hideReset) ? (_jsx(StyledCloseButtonWrapper, Object.assign({ className: "color-picker__close-btn", type: "button", 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 }) }))] })) })));
 };
 export default ColorPicker;

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

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

package/build/components/ColorPicker/ColorPickerPanel.js

@@ -0,0 +1,41 @@
+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 } 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 }) => {
+    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 })));
+    }, [color, onConfirm]);
+    return (_jsxs(StyledColorWidgetWrapper, Object.assign({ className: "color-picker__widget" }, { children: [_jsx(RgbaColorPicker, { color: color, onChange: setColor }), _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: (newColor) => setColor(Object.assign(Object.assign({}, newColor), { a: newColor.a / 100 })) })) : (_jsx(HexaFields, { value: Object.assign(Object.assign({}, color), { a: color.a }), onChange: (newColor) => setColor(Object.assign(Object.assign({}, newColor), { a: newColor.a })) }))] })), _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,7 @@
+import { RgbaColor } from 'react-colorful';
+type HexaFieldsProps = {
+    value: RgbaColor;
+    onChange: (newValue: RgbaColor) => void;
+};
+declare const HexaFields: ({ value, onChange }: HexaFieldsProps) => import("react/jsx-runtime").JSX.Element;
+export default HexaFields;

package/build/components/ColorPicker/HexaFields.js

@@ -0,0 +1,79 @@
+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 }) => {
+    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);
+    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) {
+            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) {
+                setHexInput(colorAsHex);
+            }
+        }
+        else {
+            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: "#" })) }))),
+                } }), _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,7 @@
+import { RgbaColor } from 'react-colorful';
+type RGBAFieldsProps = {
+    value: RgbaColor;
+    onChange: (newValue: RgbaColor) => void;
+};
+declare const RGBAFields: ({ value, onChange }: RGBAFieldsProps) => import("react/jsx-runtime").JSX.Element;
+export default RGBAFields;

package/build/components/ColorPicker/RGBAFields.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 }) => {
+    const handleChange = (key, max) => (event) => {
+        let num = parseInt(event.target.value, 10);
+        if (isNaN(num))
+            num = 0;
+        if (num < 0)
+            num = 0;
+        if (num > max)
+            num = max;
+        onChange(Object.assign(Object.assign({}, value), { [key]: num }));
+    };
+    return (_jsxs(Stack, Object.assign({ direction: "row", spacing: 1 }, { children: [_jsx(StyledInput, { type: "number", value: value.r, onChange: handleChange('r', 255), inputProps: { min: 0, max: 255, style: { textAlign: 'center' } }, variant: "outlined", size: "small" }), _jsx(StyledInput, { type: "number", value: value.g, onChange: handleChange('g', 255), inputProps: { min: 0, max: 255, style: { textAlign: 'center' } }, variant: "outlined", size: "small" }), _jsx(StyledInput, { type: "number", value: value.b, onChange: handleChange('b', 255), inputProps: { min: 0, max: 255, style: { textAlign: 'center' } }, variant: "outlined", size: "small" }), _jsx(StyledInput, { type: "number", value: value.a, 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/style.d.ts

@@ -1,14 +1,25 @@
 /// <reference types="react" />
-export declare const StyledCloseButtonWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-export declare const StyledColorWidgetWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+export declare const StyledCloseButtonWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const StyledColorWidgetWrapper: 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").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const Footer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const Footer: 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").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const ConfirmButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const ConfirmButton: 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" | "color" | "style" | "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").Theme>, {}, {}>;
-export declare const CancelButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+}, "disabled" | "color" | "style" | "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>, {}, {}>;
+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" | "color" | "style" | "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").Theme>, {}, {}>;
+}, "disabled" | "color" | "style" | "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>, {}, {}>;
+export declare const ColorSchemeButton: 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> & {
+    active?: boolean | undefined;
+}, {}, {}>;
+export declare const ColorSchemeList: import("@emotion/styled").StyledComponent<import("@mui/material/MenuList").MenuListOwnProps & import("@mui/material").ListOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & {
+    ref?: ((instance: HTMLUListElement | null) => void) | import("react").RefObject<HTMLUListElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "autoFocus" | "children" | "sx" | "variant" | "dense" | "subheader" | "disablePadding" | "autoFocusItem" | "disabledItemsFocusable" | "disableListWrap"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const StyledInput: import("@emotion/styled").StyledComponent<{
+    variant?: import("@mui/material/TextField").TextFieldVariants | undefined;
+} & Omit<import("@mui/material/TextField").FilledTextFieldProps | import("@mui/material/TextField").OutlinedTextFieldProps | import("@mui/material/TextField").StandardTextFieldProps, "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/build/components/ColorPicker/style.js

@@ -1,5 +1,8 @@
-import { Box, Button } from '@mui/material';
 import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import MenuList from '@mui/material/MenuList';
 export const StyledCloseButtonWrapper = styled('button')({
     background: 'transparent',
     border: 'none',
@@ -14,7 +17,7 @@ export const StyledCloseButtonWrapper = styled('button')({
 });
 export const StyledColorWidgetWrapper = styled(Box)(({ theme }) => ({
     boxShadow: '0px 8px 30px rgba(0, 0, 0, 0.16)',
-    minWidth: 264,
+    width: 264,
     backgroundColor: '#ffffff',
     padding: '12px',
     borderRadius: theme.spacing(1),
@@ -83,3 +86,47 @@ export const CancelButton = styled(Button)(({ theme }) => ({
         background: 'transparent',
     },
 }));
+export const ColorSchemeButton = styled(Box, {
+    shouldForwardProp: (prop) => prop !== 'active',
+})(({ theme, active }) => (Object.assign({ display: 'flex', justifyContent: 'space-between', alignItems: 'center', color: theme.palette.text.primary, border: '1px solid #F2F2F2', fontSize: 12, fontWeight: 500, backgroundColor: 'transparent', padding: '4px 8px', borderRadius: '4px', minWidth: 70, cursor: 'pointer' }, (active && {
+    border: '1px solid #1F88D0',
+    boxShadow: '0px 0px 4px 0px #1F88D080',
+}))));
+export const ColorSchemeList = styled(MenuList)({
+    backgroundColor: '#ffffff',
+    borderRadius: '4px',
+    boxShadow: '0px 8px 30px 0px #00000029',
+    minWidth: 70,
+    '& .MuiMenuItem-root': {
+        fontSize: 12,
+        fontWeight: 500,
+        padding: '4px 8px',
+    },
+});
+export const StyledInput = styled(TextField)(({ theme }) => ({
+    '& .MuiOutlinedInput-root': {
+        fontSize: '12px',
+        fontWeight: 500,
+        borderRadius: '4px',
+        '& input': {
+            padding: '4px',
+            '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
+                WebkitAppearance: 'none',
+                margin: 0,
+            },
+            '&[type=number]': {
+                MozAppearance: 'textfield',
+            },
+        },
+        '& .MuiOutlinedInput-notchedOutline': {
+            borderColor: theme.palette.divider,
+            borderWidth: '1px',
+        },
+        '&:hover, &.Mui-focused': {
+            '& .MuiOutlinedInput-notchedOutline': {
+                borderColor: theme.palette.divider,
+                borderWidth: '1px',
+            },
+        },
+    },
+}));

package/build/utils/color.js

@@ -37,12 +37,29 @@ export function getRandomGradientColor() {
     ];
     return colors[Math.trunc(Math.random() * colors.length)];
 }
+const BLACK_RGBA_COLOR = {
+    r: 0,
+    g: 0,
+    b: 0,
+    alpha: 1,
+};
 export const hexa2Rgba = (value) => {
-    const colorInstance = Color(value).rgb();
-    const { r, g, b, alpha = 1 } = colorInstance.object();
-    return {
-        value: { r, g, b, alpha },
-        stringified: `rgba(${r},${g},${b},${alpha})`,
-    };
+    try {
+        const colorInstance = Color(value).rgb();
+        const { r, g, b, alpha = 1 } = colorInstance.object();
+        return {
+            value: { r, g, b, alpha },
+            stringified: `rgba(${r},${g},${b},${alpha})`,
+        };
+    }
+    catch (error) {
+        console.error(error);
+        console.warn(`Invalid hex color: "${value}". Falling back to black.`);
+        const { r, g, b, alpha } = BLACK_RGBA_COLOR;
+        return {
+            value: BLACK_RGBA_COLOR,
+            stringified: `rgba(${r},${g},${b},${alpha})`,
+        };
+    }
 };
 export const rgba2Hexa = (value) => Color(value).hexa();

package/package.json

@@ -1,139 +1,139 @@
-{
-  "name": "@tap-payments/os-micro-frontend-shared",
-  "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.105",
-  "testVersion": 8,
-  "type": "module",
-  "main": "build/index.js",
-  "module": "build/index.js",
-  "types": "build/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./build/index.d.ts",
-      "import": "./build/index.js",
-      "require": "./build/index.js"
-    },
-    "./constants": {
-      "types": "./build/constants/index.d.ts",
-      "import": "./build/constants/index.js",
-      "require": "./build/constants/index.js"
-    },
-    "./components": {
-      "types": "./build/components/index.d.ts",
-      "import": "./build/components/index.js",
-      "require": "./build/components/index.js"
-    },
-    "./components/*": {
-      "types": "./build/components/*/index.d.ts",
-      "import": "./build/components/*/index.js",
-      "require": "./build/components/*/index.js"
-    },
-    "./hooks": {
-      "types": "./build/hooks/index.d.ts",
-      "import": "./build/hooks/index.js",
-      "require": "./build/hooks/index.js"
-    },
-    "./utils": {
-      "types": "./build/utils/index.d.ts",
-      "import": "./build/utils/index.js",
-      "require": "./build/utils/index.js"
-    },
-    "./theme": {
-      "types": "./build/theme/index.d.ts",
-      "import": "./build/theme/index.js",
-      "require": "./build/theme/index.js"
-    },
-    "./types": {
-      "types": "./build/types/index.d.ts",
-      "import": "./build/types/index.js",
-      "require": "./build/types/index.js"
-    }
-  },
-  "license": "MIT",
-  "author": {
-    "name": "Ahmed Sharkawy",
-    "email": "a.elsharkawy@tap.company"
-  },
-  "files": [
-    "build",
-    "readme.md"
-  ],
-  "scripts": {
-    "ts:build": "rm -rf build && tsc -p tsconfig.npm.json && tsc-alias -p tsconfig.npm.json",
-    "push:local": "yarn ts:build && yalc publish --push",
-    "push": "npm run ts:build && npm publish --access public",
-    "push:test": "node scripts/increment-test-version.cjs && npm run ts:build && npm publish --access public --tag test && node scripts/restore-version.cjs",
-    "dev": "vite",
-    "build": "tsc -b && vite build ",
-    "prettier": "prettier --list-different \"src/**/*.{md,mdx,ts,js,tsx,jsx,json}\"",
-    "prettier:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md,css,json}\"",
-    "lint": "eslint . --color",
-    "lint:fix": "eslint src --fix --color",
-    "preview": "vite preview",
-    "prepare": "husky"
-  },
-  "dependencies": {
-    "@emotion/react": "^11.11.0",
-    "@emotion/styled": "^11.11.0",
-    "@hookform/resolvers": "^3.3.1",
-    "@mui/material": "^5.12.3",
-    "@uiw/react-json-view": "^2.0.0-alpha.16",
-    "axios": "^1.4.0",
-    "color": "^5.0.0",
-    "dayjs": "^1.11.8",
-    "framer-motion": "10.11.0",
-    "i18next": "^22.4.15",
-    "memoize-one": "^6.0.0",
-    "re-resizable": "^6.9.9",
-    "react": "^18.2.0",
-    "react-colorful": "^5.6.1",
-    "react-currency-input-field": "^3.6.11",
-    "react-dom": "^18.2.0",
-    "react-draggable": "^4.4.6",
-    "react-dropzone": "^14.2.3",
-    "react-hook-form": "^7.45.4",
-    "react-hot-toast": "^2.4.1",
-    "react-i18next": "^12.2.2",
-    "react-lazy-load-image-component": "^1.6.3",
-    "react-multi-date-picker": "^4.1.2",
-    "react-router-dom": "^7.7.0",
-    "react-virtualized-auto-sizer": "^1.0.20",
-    "react-window": "^1.8.9",
-    "react-window-infinite-loader": "^1.0.9",
-    "react18-input-otp": "^1.1.4",
-    "recharts": "^2.15.1"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.17.0",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@types/lodash": "^4.17.15",
-    "@types/react": "^18.2.6",
-    "@types/react-dom": "^18.3.5",
-    "@types/react-lazy-load-image-component": "^1.6.4",
-    "@types/react-virtualized-auto-sizer": "^1.0.8",
-    "@types/react-window": "^1.8.5",
-    "@types/react-window-infinite-loader": "^1.0.6",
-    "@vitejs/plugin-react": "^4.3.4",
-    "eslint": "^9.17.0",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.16",
-    "globals": "^15.14.0",
-    "husky": "^8.0.3",
-    "lint-staged": "^13.2.2",
-    "prettier": "^2.8.8",
-    "tsc-alias": "^1.8.16",
-    "typescript": "5.0.2",
-    "typescript-eslint": "^8.18.2",
-    "vite": "6.0.5",
-    "vite-tsconfig-paths": "^4.2.0"
-  },
-  "lint-staged": {
-    "src/**/*.{ts,tsx,json,js,jsx}": [
-      "yarn run prettier:fix",
-      "yarn run lint"
-    ]
-  },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  }
-}
+{
+  "name": "@tap-payments/os-micro-frontend-shared",
+  "description": "Shared components and utilities for Tap Payments micro frontends",
+  "version": "0.1.106",
+  "testVersion": 0,
+  "type": "module",
+  "main": "build/index.js",
+  "module": "build/index.js",
+  "types": "build/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./build/index.d.ts",
+      "import": "./build/index.js",
+      "require": "./build/index.js"
+    },
+    "./constants": {
+      "types": "./build/constants/index.d.ts",
+      "import": "./build/constants/index.js",
+      "require": "./build/constants/index.js"
+    },
+    "./components": {
+      "types": "./build/components/index.d.ts",
+      "import": "./build/components/index.js",
+      "require": "./build/components/index.js"
+    },
+    "./components/*": {
+      "types": "./build/components/*/index.d.ts",
+      "import": "./build/components/*/index.js",
+      "require": "./build/components/*/index.js"
+    },
+    "./hooks": {
+      "types": "./build/hooks/index.d.ts",
+      "import": "./build/hooks/index.js",
+      "require": "./build/hooks/index.js"
+    },
+    "./utils": {
+      "types": "./build/utils/index.d.ts",
+      "import": "./build/utils/index.js",
+      "require": "./build/utils/index.js"
+    },
+    "./theme": {
+      "types": "./build/theme/index.d.ts",
+      "import": "./build/theme/index.js",
+      "require": "./build/theme/index.js"
+    },
+    "./types": {
+      "types": "./build/types/index.d.ts",
+      "import": "./build/types/index.js",
+      "require": "./build/types/index.js"
+    }
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Ahmed Sharkawy",
+    "email": "a.elsharkawy@tap.company"
+  },
+  "files": [
+    "build",
+    "readme.md"
+  ],
+  "scripts": {
+    "ts:build": "rm -rf build && tsc -p tsconfig.npm.json && tsc-alias -p tsconfig.npm.json",
+    "push:local": "yarn ts:build && yalc publish --push",
+    "push": "npm run ts:build && npm publish --access public",
+    "push:test": "node scripts/increment-test-version.cjs && npm run ts:build && npm publish --access public --tag test && node scripts/restore-version.cjs",
+    "dev": "vite",
+    "build": "tsc -b && vite build ",
+    "prettier": "prettier --list-different \"src/**/*.{md,mdx,ts,js,tsx,jsx,json}\"",
+    "prettier:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md,css,json}\"",
+    "lint": "eslint . --color",
+    "lint:fix": "eslint src --fix --color",
+    "preview": "vite preview",
+    "prepare": "husky"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@hookform/resolvers": "^3.3.1",
+    "@mui/material": "^5.12.3",
+    "@uiw/react-json-view": "^2.0.0-alpha.16",
+    "axios": "^1.4.0",
+    "color": "^5.0.0",
+    "dayjs": "^1.11.8",
+    "framer-motion": "10.11.0",
+    "i18next": "^22.4.15",
+    "memoize-one": "^6.0.0",
+    "re-resizable": "^6.9.9",
+    "react": "^18.2.0",
+    "react-colorful": "^5.6.1",
+    "react-currency-input-field": "^3.6.11",
+    "react-dom": "^18.2.0",
+    "react-draggable": "^4.4.6",
+    "react-dropzone": "^14.2.3",
+    "react-hook-form": "^7.45.4",
+    "react-hot-toast": "^2.4.1",
+    "react-i18next": "^12.2.2",
+    "react-lazy-load-image-component": "^1.6.3",
+    "react-multi-date-picker": "^4.1.2",
+    "react-router-dom": "^7.7.0",
+    "react-virtualized-auto-sizer": "^1.0.20",
+    "react-window": "^1.8.9",
+    "react-window-infinite-loader": "^1.0.9",
+    "react18-input-otp": "^1.1.4",
+    "recharts": "^2.15.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.17.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@types/lodash": "^4.17.15",
+    "@types/react": "^18.2.6",
+    "@types/react-dom": "^18.3.5",
+    "@types/react-lazy-load-image-component": "^1.6.4",
+    "@types/react-virtualized-auto-sizer": "^1.0.8",
+    "@types/react-window": "^1.8.5",
+    "@types/react-window-infinite-loader": "^1.0.6",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "globals": "^15.14.0",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.2.2",
+    "prettier": "^2.8.8",
+    "tsc-alias": "^1.8.16",
+    "typescript": "5.0.2",
+    "typescript-eslint": "^8.18.2",
+    "vite": "6.0.5",
+    "vite-tsconfig-paths": "^4.2.0"
+  },
+  "lint-staged": {
+    "src/**/*.{ts,tsx,json,js,jsx}": [
+      "yarn run prettier:fix",
+      "yarn run lint"
+    ]
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  }
+}