update-

package.json

 {
 	"name": "boxdialer",
-	"version": "4.8.68",
+	"version": "4.8.69",
 	"description": "",
 	"main": "src/boxDialer.js",
 	"scripts": {

src/components/ModalPhoneNumpad/style.js

@@ -3,7 +3,7 @@
 import styled from 'styled-components';
 import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace';
 import { boxDialerWidjetPosition } from '../../lib/boxDialerWidjetPosition';
-import {sizePixelPixelSizeFunc} from "../../lib/sizeContext"
+import { sizePixelPixelSizeFunc } from '../../lib/sizeContext';
 
 const ModalPhoneNumpadStyle = styled.div`
 	box-shadow: 0 0 20px #00000047;
@@ -15,8 +15,9 @@ const ModalPhoneNumpadStyle = styled.div`
 	width: 230px;
 	position: fixed;
 	bottom: 120px;
-	transition: ${({switchAnim})=> typeof switchAnim !== 'undefined' ? switchAnim ? '0.2s' : '0s' : '0.2s' };
-	${({switchAnim})=> console.log('switchAnim: ', switchAnim)}
+	transition: ${({ switchAnim }) =>
+		typeof switchAnim !== 'undefined' ? (switchAnim ? '0.2s' : '0s') : '0.2s'};
+	${({ switchAnim }) => console.log('switchAnim: ', switchAnim)}
 	z-index: 9999;
 	${({ hiddenValue, position, variant }) =>
 		hiddenValue
@@ -28,7 +29,7 @@ const ModalPhoneNumpadStyle = styled.div`
 	grid-template-rows: 40px 1fr;
 	grid-gap: 15px;
 	cursor: default;
-	.settingIcon{
+	.settingIcon {
 		position: absolute;
 		font-size: 11px;
 		cursor: pointer;
@@ -103,7 +104,7 @@ const NumberButton = styled.div`
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	${({sizeContext})=> sizePixelPixelSizeFunc(sizeContext, 22)}
+	${({ sizeContext }) => sizePixelPixelSizeFunc(sizeContext, 22)}
 	cursor: pointer;
 	height: 33px;
 	position: relative;
@@ -113,8 +114,9 @@ const NumberButton = styled.div`
 				? 'orange'
 				: status === 'connected' && '#a0c13d'
 			: '#0000007d'};
-	transition: ${({switchAnim})=> typeof switchAnim !== 'undefined' ? switchAnim ? '0.3s' : '0s' : '0.3s' };
-	
+	transition: ${({ switchAnim }) =>
+		typeof switchAnim !== 'undefined' ? (switchAnim ? '0.3s' : '0s') : '0.3s'};
+
 	.callIcon {
 		color: #0000007d;
 	}
@@ -169,7 +171,6 @@ NumberButton.CallButton = styled.div`
 		display: flex;
 		align-items: center;
 		.icon {
-	
 			margin: 0 auto;
 			border: 4px solid transparent;
 			width: 8px;
@@ -210,8 +211,9 @@ NumberButton.CallButtonModal = styled.div`
 	padding: 3px 3px 15px 3px;
 	border-top-left-radius: 8px;
 	border-top-right-radius: 8px;
-	transition: ${({switchAnim})=> typeof switchAnim !== 'undefined' ? switchAnim ? '0.1s' : '0s' : '0.1s' };
-	
+	transition: ${({ switchAnim }) =>
+		typeof switchAnim !== 'undefined' ? (switchAnim ? '0.1s' : '0s') : '0.1s'};
+
 	clip-path: polygon(100% 0, 100% 93%, 57% 93%, 50% 100%, 43% 93%, 0 93%, 0 0);
 	${({ visiblevalue }) =>
 		visiblevalue
@@ -236,7 +238,12 @@ NumberButton.CallButtonModalInset = styled.div`
 	.num_item {
 		text-wrap: nowrap;
 		color: #000;
-		transition: ${({switchAnim})=> typeof switchAnim !== 'undefined' ? switchAnim ? '0.2s' : '0s' : '0.2s' };
+		transition: ${({ switchAnim }) =>
+			typeof switchAnim !== 'undefined'
+				? switchAnim
+					? '0.2s'
+					: '0s'
+				: '0.2s'};
 		padding: 5px 10px;
 		font-size: 14px;
 		margin: 2px 0;