@tap-payments/os-micro-frontend-shared 0.1.96-test.2 → 0.1.96-test.21

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/components/JSONViewer/components/JSONTitleBar/JSONTitleBar.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { JSONTitleBarProps } from './type';
-declare function JSONTitleBar({ title, onClose, onMaximize, maximized, id, onMouseHover, onMouseLeave, onRequestClick, isRequestExpanded, showRequestIcon, isHovered, }: JSONTitleBarProps): import("react/jsx-runtime").JSX.Element;
+declare function JSONTitleBar({ title, onClose, onMaximize, maximized, id, onMouseHover, onMouseLeave, onRequestClick, isRequestExpanded, showRequestIcon, isHovered, }: Readonly<JSONTitleBarProps>): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof JSONTitleBar>;
 export default _default;

package/build/components/JSONViewer/components/JSONTitleBar/JSONTitleBar.js

@@ -4,6 +4,6 @@ import Toolbar, { StyledHeaderWrapperStyled } from '../../../Toolbar';
 import { CloseIcon, ExpandButton, MaximizeIcon } from '../../../ToolbarIcon';
 import { jsonIcon } from '../../../../constants/index.js';
 function JSONTitleBar({ title, onClose, onMaximize, maximized = false, id, onMouseHover, onMouseLeave, onRequestClick, isRequestExpanded = false, showRequestIcon = false, isHovered = false, }) {
-    return (_jsx(StyledHeaderWrapperStyled, Object.assign({ id: id, maximized: maximized || false, sandboxMode: false }, { children: _jsx(Toolbar, { isHovered: true, onMouseEnter: onMouseHover, onMouseLeave: onMouseLeave, isMaximized: maximized, title: title, icon: jsonIcon, leftActions: _jsxs(_Fragment, { children: [_jsx(CloseIcon, { onClick: onClose }), _jsx(MaximizeIcon, { isMaximized: maximized, onClick: onMaximize }), showRequestIcon && (_jsx(ExpandButton, Object.assign({ onClick: onRequestClick, isExpanded: isRequestExpanded, isHovered: isHovered }, { children: "Request" })))] }) }) })));
+    return (_jsx(StyledHeaderWrapperStyled, Object.assign({ id: id, maximized: maximized || false }, { children: _jsx(Toolbar, { isHovered: true, onMouseEnter: onMouseHover, onMouseLeave: onMouseLeave, isMaximized: maximized, title: title, icon: jsonIcon, leftActions: _jsxs(_Fragment, { children: [_jsx(CloseIcon, { onClick: onClose }), _jsx(MaximizeIcon, { isMaximized: maximized, onClick: onMaximize }), showRequestIcon && (_jsx(ExpandButton, Object.assign({ onClick: onRequestClick, isExpanded: isRequestExpanded, isHovered: isHovered }, { children: "Request" })))] }) }) })));
 }
 export default memo(JSONTitleBar);

package/build/components/ListLayout/ListLayout.d.ts

@@ -0,0 +1,10 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import { ListLayoutStyled } from './styles';
+interface ListLayoutProps extends ComponentPropsWithoutRef<typeof ListLayoutStyled> {
+}
+declare function ListLayout({ children, ...props }: Readonly<ListLayoutProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace ListLayout {
+    var displayName: string;
+}
+declare const _default: import("react").MemoExoticComponent<typeof ListLayout>;
+export default _default;

package/build/components/ListLayout/ListLayout.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 } from "react/jsx-runtime";
+import { memo } from 'react';
+import { ListLayoutStyled } from './styles';
+function ListLayout(_a) {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return (_jsx(ListLayoutStyled, Object.assign({ component: "article", "data-testid": "ListLayout" }, props, { children: children })));
+}
+ListLayout.displayName = 'ListLayout';
+export default memo(ListLayout);

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

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

package/build/components/ListLayout/index.js

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

package/build/components/ListLayout/styles.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const ListLayoutStyled: 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/ListLayout/styles.js

@@ -0,0 +1,9 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+export const ListLayoutStyled = styled(Box)(() => ({
+    flex: 1,
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+}));

package/build/components/RightLeftExpandingCenterChip/style.js

@@ -29,7 +29,6 @@ export const LeftExpandIcon = styled(motion.span)(({ theme }) => ({
     fontSize: '10px',
     lineHeight: 1,
     color: theme.palette.text.secondary,
-    fontWeight: 'bold',
     userSelect: 'none',
 }));
 export const RightExpandIcon = styled(motion.span)(({ theme }) => ({
@@ -44,7 +43,6 @@ export const RightExpandIcon = styled(motion.span)(({ theme }) => ({
     fontSize: '10px',
     lineHeight: 1,
     color: theme.palette.text.secondary,
-    fontWeight: 'bold',
     userSelect: 'none',
 }));
 export const ExpandedSection = styled(motion.div)(({ side }) => (Object.assign(Object.assign(Object.assign({ position: 'absolute', display: 'flex', alignItems: 'center' }, (side === 'left' ? { right: '100%', flexDirection: 'row-reverse', transformOrigin: 'right center' } : {})), (side === 'right' ? { left: '100%', flexDirection: 'row', transformOrigin: 'left center' } : {})), { top: '50%', transform: 'translateY(-50%)', gap: 0, pointerEvents: 'auto', overflow: 'visible' })));

package/build/components/SearchButton/styles.d.ts

@@ -9,12 +9,12 @@ export declare const StyledInput: import("@emotion/styled").StyledComponent<{
     color?: string | undefined;
     content?: string | undefined;
     translate?: "yes" | "no" | undefined;
+    name?: string | undefined;
     value?: string | number | readonly string[] | undefined;
     list?: string | undefined;
     form?: string | undefined;
     slot?: string | undefined;
     title?: string | undefined;
-    name?: string | undefined;
     className?: string | undefined;
     pattern?: string | undefined;
     defaultChecked?: boolean | undefined;

package/build/components/StatusChip/StatusChip.d.ts

@@ -1,3 +1,3 @@
 import { ChipProps } from './type';
-declare const StatusChip: ({ children, unknownText, copyText, ...props }: ChipProps) => import("react/jsx-runtime").JSX.Element;
+declare const StatusChip: ({ children, unknownText, copyText, expandDirection, chipStyles, ...props }: ChipProps) => import("react/jsx-runtime").JSX.Element;
 export default StatusChip;

package/build/components/StatusChip/StatusChip.js

@@ -15,15 +15,15 @@ import { useTranslation } from 'react-i18next';
 import { AnimatePresence, motion } from 'framer-motion';
 import { copyText as copyTextHandler } from '../../utils/index.js';
 import { copyIcon, greenCheckIcon } from '../../constants/index.js';
-import { unknownGeographyColors } from './constants';
 import { ChipStyled, Wrapper, CopyWrapper } from './style';
+import { emptyStatusChipColors } from '../../constants/index.js';
 const StatusChip = (_a) => {
-    var { children, unknownText, copyText } = _a, props = __rest(_a, ["children", "unknownText", "copyText"]);
+    var { children, unknownText, copyText, expandDirection = 'right', chipStyles } = _a, props = __rest(_a, ["children", "unknownText", "copyText", "expandDirection", "chipStyles"]);
     const [showCopy, setShowCopy] = useState(false);
     const { t } = useTranslation();
     const isSelected = props.isSelected;
     if (!children) {
-        return (_jsx(ChipStyled, Object.assign({}, unknownGeographyColors, props, { isSelected: false, sx: (theme) => ({ borderColor: theme.palette.divider }) }, { children: unknownText ? t(unknownText) : t('unknown') })));
+        return (_jsx(ChipStyled, Object.assign({}, emptyStatusChipColors, props, { isSelected: false, sx: (theme) => ({ borderColor: theme.palette.divider }) }, { children: unknownText ? t(unknownText) : t('unknown') })));
     }
     const handleCopy = (e) => {
         e.stopPropagation();
@@ -38,12 +38,15 @@ const StatusChip = (_a) => {
             };
         }
     };
-    return (_jsxs(motion.div, Object.assign({ style: { position: 'relative' }, animate: { zIndex: isSelected ? 3 : 0 } }, { children: [_jsx(ChipStyled, Object.assign({}, props, { sx: { visibility: 'hidden', pointerEvents: 'none' } }, { children: _jsx(Wrapper, { children: children }) })), _jsx(ChipStyled, Object.assign({}, props, { isSelected: isSelected, style: { position: 'absolute', top: 0, left: 0, zIndex: isSelected ? 3 : 0 } }, { children: _jsxs(motion.div, Object.assign({ layout: "size", style: { display: 'flex', gap: '4px' }, animate: {
-                        paddingRight: isSelected && copyText ? 12 : 0,
-                    }, transition: { delay: isSelected ? 0 : 0.2, duration: 0.2 } }, { children: [_jsx(Wrapper, { children: children }), _jsx(AnimatePresence, { children: isSelected && copyText && (_jsx(CopyWrapper, { children: _jsx(motion.img, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { delay: isSelected ? 0.2 : 0, duration: 0.1 }, onClick: handleCopy, src: showCopy ? greenCheckIcon : copyIcon, style: {
-                                        height: 12,
-                                        width: 12,
-                                        objectFit: 'contain',
-                                    } }) })) })] })) }))] })));
+    const isCopyActive = isSelected && copyText;
+    return (_jsxs(motion.div, Object.assign({ style: { position: 'relative' }, animate: { zIndex: isSelected ? 3 : 0 } }, { children: [_jsx(ChipStyled, Object.assign({}, props, { sx: { visibility: 'hidden', pointerEvents: 'none' } }, { children: _jsx(Wrapper, { children: children }) })), _jsx(motion.div, Object.assign({ style: { position: 'absolute', top: 0, zIndex: isSelected ? 3 : 0 }, animate: {
+                    left: isCopyActive && expandDirection === 'left' ? -12 : 0,
+                }, transition: { delay: isSelected ? 0 : 0.2, duration: 0.2 } }, { children: _jsx(ChipStyled, Object.assign({}, props, { isSelected: isSelected }, chipStyles, { children: _jsxs(motion.div, Object.assign({ layout: "size", style: { display: 'flex', gap: '4px' }, animate: {
+                            paddingRight: isCopyActive ? 12 : 0,
+                        }, transition: { delay: isSelected ? 0 : 0.2, duration: 0.2 } }, { children: [_jsx(Wrapper, { children: children }), _jsx(AnimatePresence, { children: isCopyActive && (_jsx(CopyWrapper, { children: _jsx(motion.img, { initial: { opacity: 0, x: -5 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -2 }, transition: { delay: 0.2, duration: 0.1 }, onClick: handleCopy, src: showCopy ? greenCheckIcon : copyIcon, style: {
+                                            height: 12,
+                                            width: 12,
+                                            objectFit: 'contain',
+                                        } }) })) })] })) })) }))] })));
 };
 export default StatusChip;

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

@@ -8,9 +8,13 @@ export declare const ChipStyled: import("@emotion/styled").StyledComponent<impor
     disabled?: boolean | undefined;
     padding?: string | undefined;
     unknownText?: string | undefined;
+    minWidth?: string | undefined;
     maxWidth?: string | undefined;
     isSelected?: boolean | undefined;
     copyText?: string | undefined;
+    expandDirection?: "left" | "right" | undefined;
+    chipStyles?: object | undefined;
+    disableAnimation?: boolean | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & 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/material/OverridableComponent").CommonProps | keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & {

package/build/components/StatusChip/style.js

@@ -1,10 +1,19 @@
 import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
 export const ChipStyled = styled(Box, {
-    shouldForwardProp: (prop) => !['textColor', 'bgColor', 'borderColor', 'disabled', 'padding', 'maxWidth', 'isSelected'].includes(prop),
-})(({ theme, isSelected, textColor = theme.palette.text.primary, bgColor = '#EFF1F2', borderColor = '#EFF1F2', disabled = false, padding, maxWidth, }) => {
-    return Object.assign({ display: 'flex', alignItems: 'center', gap: '4px', height: '18px', padding: padding || '0px 9.5px', borderRadius: '30px', border: `1px solid ${borderColor}`, backgroundColor: bgColor, color: textColor, cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.5 : 1, whiteSpace: 'nowrap', fontSize: '11px', minWidth: '67px', maxWidth: maxWidth || 'none', width: 'fit-content', overflow: 'hidden', textOverflow: maxWidth ? 'ellipsis' : 'unset', boxSizing: 'border-box', borderColor: theme.palette.common.white }, (isSelected && {
-        boxShadow: 'rgb(242, 242, 242) 7px 0px 8px 2px',
+    shouldForwardProp: (prop) => !['textColor', 'bgColor', 'borderColor', 'disabled', 'minWidth', 'padding', 'maxWidth', 'isSelected', 'disableAnimation'].includes(prop),
+})(({ theme, isSelected, textColor = theme.palette.text.primary, bgColor = '#EFF1F2', borderColor = '#EFF1F2', disabled = false, padding, minWidth, maxWidth, disableAnimation, }) => {
+    return Object.assign(Object.assign({ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '4px', height: '18px', padding: padding || '0px 9.5px', borderRadius: '30px', border: `1px solid ${borderColor}`, backgroundColor: bgColor, color: textColor, cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.5 : 1, whiteSpace: 'nowrap', fontSize: '11px', minWidth: minWidth || '67px', maxWidth: maxWidth || 'none', width: 'fit-content', overflow: 'hidden', textOverflow: maxWidth ? 'ellipsis' : 'unset', boxSizing: 'border-box' }, (isSelected && {
+        boxShadow: 'white 7px 0px 8px 2px',
+    })), (disableAnimation && {
+        transition: 'none !important',
+        animation: 'none !important',
+        transform: 'none !important',
+        '& *': {
+            transition: 'none !important',
+            animation: 'none !important',
+            transform: 'none !important',
+        },
     }));
 });
 export const Wrapper = styled(Box)(() => ({
@@ -12,7 +21,6 @@ export const Wrapper = styled(Box)(() => ({
     alignItems: 'center',
     justifyContent: 'center',
     gap: '4px',
-    minWidth: 46,
     textAlign: 'center',
 }));
 export const CopyWrapper = styled(Box)(() => ({

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

@@ -7,7 +7,11 @@ export type ChipProps = PropsWithChildren<{
     disabled?: boolean;
     padding?: string;
     unknownText?: string;
+    minWidth?: string;
     maxWidth?: string;
     isSelected?: boolean;
     copyText?: string;
+    expandDirection?: 'left' | 'right';
+    chipStyles?: object;
+    disableAnimation?: boolean;
 } & BoxProps>;

package/build/components/StatusChipWithCopy/StatusChipWithCopy.d.ts

@@ -5,7 +5,8 @@ export interface StatusChipWithCopyProps extends StatusChipProps {
     copyText?: string;
     chipIndex: number;
     selectionProps: SelectionProps;
+    chipStyles?: object;
 }
-declare function StatusChipWithCopy({ children, copyText, chipIndex, selectionProps: { onClick, rowIndex, colIndex, selectedId }, ...reset }: StatusChipWithCopyProps): import("react/jsx-runtime").JSX.Element;
+declare function StatusChipWithCopy({ children, copyText, chipIndex, selectionProps: { onClick, rowIndex, colIndex, selectedId }, ...rest }: StatusChipWithCopyProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof StatusChipWithCopy>;
 export default _default;

package/build/components/StatusChipWithCopy/StatusChipWithCopy.js

@@ -14,9 +14,9 @@ import { memo, useMemo } from 'react';
 import StatusChip from '../StatusChip';
 import { checkIsSelected } from './utils';
 function StatusChipWithCopy(_a) {
-    var { children, copyText, chipIndex, selectionProps: { onClick, rowIndex, colIndex, selectedId } } = _a, reset = __rest(_a, ["children", "copyText", "chipIndex", "selectionProps"]);
+    var { children, copyText, chipIndex, selectionProps: { onClick, rowIndex, colIndex, selectedId } } = _a, rest = __rest(_a, ["children", "copyText", "chipIndex", "selectionProps"]);
     const isSelected = useMemo(() => checkIsSelected({ rowIndex, colIndex, selectedId, chipIndex }), [rowIndex, colIndex, selectedId, chipIndex]);
-    return (_jsx(StatusChip, Object.assign({}, reset, { copyText: copyText, onClick: (e) => {
+    return (_jsx(StatusChip, Object.assign({}, rest, { copyText: copyText, onClick: (e) => {
             onClick === null || onClick === void 0 ? void 0 : onClick(e, chipIndex);
         }, isSelected: isSelected }, { children: children })));
 }

package/build/components/StatusIcons/AuthorizationAutoIcons/style.js

@@ -33,7 +33,7 @@ export const PercentageContainer = styled('div')(({ theme, percentage, isCapture
     gap: theme.spacing(0.5),
 }));
 export const PiePercentage = styled('div')(({ percentage, isCapture, theme }) => ({
-    background: `conic-gradient(${isCapture ? theme.palette.info.dark : '#656565'} ${percentage}.00%, transparent 0.00%)`,
+    background: `conic-gradient(${isCapture ? theme.palette.info.dark : '#656565'} ${percentage}%, transparent 0.00%)`,
     borderRadius: '50%',
     width: '8.333px',
     height: '8.333px',

package/build/components/TableCells/CustomCells/ActionCell/constant.d.ts

@@ -28,4 +28,5 @@ export declare const actionIcons: {
     users: string;
     brand: string;
     clipboard: string;
+    viewApi: string;
 };