@tap-payments/os-micro-frontend-shared 0.1.50 → 0.1.53

package/build/components/StatusChip/StatusChip.js

@@ -14,7 +14,7 @@ import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AnimatePresence, motion } from 'framer-motion';
 import { copyText as copyTextHandler } from '../../utils/index.js';
-import { blueCopyIcon, greenCheckIcon } from '../../constants/index.js';
+import { copyIcon, greenCheckIcon } from '../../constants/index.js';
 import { unknownGeographyColors } from './constants';
 import { ChipStyled, Wrapper, CopyWrapper } from './style';
 const StatusChip = (_a) => {
@@ -40,6 +40,6 @@ 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.2 : 0 } }, { 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 }, onClick: handleCopy, src: showCopy ? greenCheckIcon : blueCopyIcon, style: Object.assign({ height: 12, width: 12, objectFit: 'contain' }, (showCopy && { filter: 'none' })) }) })) })] })) }))] })));
+                    }, 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: Object.assign({ height: 12, width: 12, objectFit: 'contain' }, (showCopy && { filter: 'none' })) }) })) })] })) }))] })));
 };
 export default StatusChip;

package/build/components/StatusChip/style.js

@@ -1,15 +1,10 @@
 import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
-import { SELECTION_COLORS } from '../../utils/index.js';
 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' }, (isSelected && {
-        color: SELECTION_COLORS.primary,
-        borderColor: SELECTION_COLORS.primary,
-        img: {
-            filter: 'brightness(0) saturate(100%) invert(44%) sepia(54%) saturate(1203%) hue-rotate(170deg) brightness(91%) contrast(84%)',
-        },
+    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',
     }));
 });
 export const Wrapper = styled(Box)(() => ({

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.50",
+  "version": "0.1.53",
   "testVersion": 0,
   "type": "module",
   "main": "build/index.js",