@gofynd/theme-template 2.0.2 → 2.0.4

package/dist/page-layouts/login/component/login-otp/login-otp.js

@@ -1 +1 @@
-!function webpackUniversalModuleDefinition(e,o){"object"==typeof exports&&"object"==typeof module?module.exports=o(require("fdk-core/utils"),require("google-libphonenumber"),require("react"),require("react-hook-form"),require("react-international-phone")):"function"==typeof define&&define.amd?define("firestone",["fdk-core/utils","google-libphonenumber","react","react-hook-form","react-international-phone"],o):"object"==typeof exports?exports.firestone=o(require("fdk-core/utils"),require("google-libphonenumber"),require("react"),require("react-hook-form"),require("react-international-phone")):e.firestone=o(e["fdk-core/utils"],e["google-libphonenumber"],e.react,e["react-hook-form"],e["react-international-phone"])}("undefined"!=typeof self?self:this,((e,o,t,r,n)=>(()=>{"use strict";var a={4129:(e,o,t)=>{t.d(o,{default:()=>$});var r={};t.r(r),t.d(r,{SP:()=>x,rg:()=>k,kc:()=>C,nM:()=>E,uo:()=>S,QZ:()=>I,QM:()=>N,mw:()=>O});var n=t(9155),a=t.n(n),l=t(3215),c=t(5072),d=t.n(c),s=t(7825),p=t.n(s),u=t(7659),m=t.n(u),b=t(5056),_=t.n(b),h=t(540),g=t.n(h),f=t(1113),v=t.n(f),y=t(8384),w={};w.styleTagTransform=v(),w.setAttributes=_(),w.insert=m().bind(null,"head"),w.domAPI=p(),w.insertStyleElement=g();d()(y.A,w);y.A&&y.A.locals&&y.A.locals;var x="mobile-number__dialCodePreview___E0m4Z",k="mobile-number__errorInput___TKkzT",C="mobile-number__errorText___lRww6",E="mobile-number__inputTitle___QKLCn",S="mobile-number__mobileInputContainer___deIgv",I="mobile-number__mobileInputWrapper___Na12n",N="mobile-number__mobileNumberInput___iRnFG",O="mobile-number__required___yHCeh",q=t(618),T=t(447);function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var o=1;o<arguments.length;o++){var t=arguments[o];for(var r in t)({}).hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},_extends.apply(null,arguments)}const $=function MobileNumber(e){let{name:o="",mobile:t="",countryCode:c="91",disable:d=!1,isShowLabel:s=!0,isRequired:p,allowDropdown:u=!0,isFocused:m=!1,placeholder:b="",label:_="",error:h,onChange:g,inputClassName:f,containerClassName:v,labelClassName:y,inputContainerClassName:w,inputProps:$,height:P="48px",textColor:z="var(--textBody, #3c3131)",backgroundColor:M="var(--pageBackground, #f8f8f8)",fontSize:j="14px",countryIso:B,...A}=e;const{t:F}=(0,T.useGlobalTranslation)("translation"),R=(0,n.useId)(),D=(0,n.useRef)(null),L=q.PhoneNumberUtil.getInstance(),isPhoneValid=(e,o)=>{try{return L.isValidNumber(L.parseAndKeepRawInput(e,o))}catch(e){return!1}};return(0,n.useEffect)((()=>{m&&document.getElementById(R)?.focus()}),[R,m]),(0,n.useEffect)((()=>{B&&D?.current?.setCountry&&D?.current?.setCountry(B)}),[B,D?.current,t]),a().createElement("div",{className:`${I} ${h?k:""} ${v||""}`},s&&a().createElement("label",{className:`${E} ${y||""}`,htmlFor:R},_||F("resource.common.mobile"),"optional"===p?` (${F("resource.common.optional_lower")})`:a().createElement("span",{className:O}," * ")),a().createElement(l.PhoneInput,_extends({name:o,defaultCountry:"in",value:`+${c}${t}`,onChange:(e,o)=>{let{country:t}=o;var r,n;g?.({mobile:(r=e,n=t?.dialCode,r?.replace(new RegExp(`^\\+${n}`),"")),countryCode:t?.dialCode,isValidNumber:isPhoneValid(e)})},forceDialCode:!0,ref:D,style:{"--react-international-phone-height":P,"--react-international-phone-text-color":z,"--react-international-phone-border-radius":"4px","--react-international-phone-border-color":""+(h?"var(--errorText, #b24141)":"var(--dividerStokes, #d4d1d1)"),"--react-international-phone-background-color":M,"--react-international-phone-dropdown-item-background-color":"var(--pageBackground)","--react-international-phone-selected-dropdown-item-background-color":"var(--highlightColor)","--react-international-phone-dropdown-top":`calc(${P} + 4px)`,"--react-international-phone-font-size":j,"--react-international-phone-country-selector-border-color":""+(h?"var(--errorText, #b24141)":"var(--dividerStokes, #d4d1d1)"),direction:"ltr"},countrySelectorStyleProps:{buttonContentWrapperStyle:{gap:"4px"},buttonStyle:{padding:"0 8px"},buttonClassName:`${r.countryButton}`,dropdownStyleProps:{style:{zIndex:999}}},disabled:d,className:`${S} ${w||""}`,inputClassName:`${N} ${f||""}`,inputProps:{id:R,autoComplete:"tel",...$},placeholder:b,hideDropdown:!u,dialCodePreviewStyleProps:{className:x},disableDialCodePrefill:!0,disableDialCodeAndPrefix:!0,showDisabledDialCodeAndPrefix:!0},A)),h&&a().createElement("span",{className:C},h.message))}},8384:(e,o,t)=>{t.d(o,{A:()=>c});var r=t(1601),n=t.n(r),a=t(6314),l=t.n(a)()(n());l.push([e.id,".react-international-phone-country-selector{position:relative}.react-international-phone-country-selector-button{display:flex;height:var(--react-international-phone-height, 36px);box-sizing:border-box;align-items:center;justify-content:center;padding:0;border:1px solid var(--react-international-phone-country-selector-border-color, var(--react-international-phone-border-color, gainsboro));margin:0;appearance:button;-webkit-appearance:button;background-color:var(--react-international-phone-country-selector-background-color, var(--react-international-phone-background-color, white));cursor:pointer;text-transform:none;user-select:none}.react-international-phone-country-selector-button:hover{background-color:var(--react-international-phone-country-selector-background-color-hover, whitesmoke)}.react-international-phone-country-selector-button--hide-dropdown{cursor:auto}.react-international-phone-country-selector-button--hide-dropdown:hover{background-color:transparent}.react-international-phone-country-selector-button__button-content{display:flex;align-items:center;justify-content:center}.react-international-phone-country-selector-button__flag-emoji{margin:0 4px}.react-international-phone-country-selector-button__flag-emoji--disabled{opacity:.75}.react-international-phone-country-selector-button__dropdown-arrow{border-top:var(--react-international-phone-country-selector-arrow-size, 4px) solid var(--react-international-phone-country-selector-arrow-color, #777);border-right:var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent;border-left:var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent;margin-right:4px;transition:all .1s ease-out}.react-international-phone-country-selector-button__dropdown-arrow--active{transform:rotateX(180deg)}.react-international-phone-country-selector-button__dropdown-arrow--disabled{border-top-color:var(--react-international-phone-disabled-country-selector-arrow-color, #999)}.react-international-phone-country-selector-button--disabled{background-color:var(--react-international-phone-disabled-country-selector-background-color, var(--react-international-phone-disabled-background-color, whitesmoke));cursor:auto}.react-international-phone-country-selector-button--disabled:hover{background-color:var(--react-international-phone-disabled-country-selector-background-color, var(--react-international-phone-disabled-background-color, whitesmoke))}.react-international-phone-flag-emoji{width:var(--react-international-phone-flag-width, 24px);height:var(--react-international-phone-flag-height, 24px);box-sizing:border-box}.react-international-phone-country-selector-dropdown{position:absolute;z-index:1;top:var(--react-international-phone-dropdown-top, 44px);left:var(--react-international-phone-dropdown-left, 0);display:flex;width:300px;max-height:200px;flex-direction:column;padding:4px 0;margin:0;background-color:var(--react-international-phone-dropdown-item-background-color, var(--react-international-phone-background-color, white));box-shadow:var(--react-international-phone-dropdown-shadow, 2px 2px 16px rgba(0, 0, 0, .25));color:var(--react-international-phone-dropdown-item-text-color, var(--react-international-phone-text-color, #222));list-style:none;overflow-y:scroll}.react-international-phone-country-selector-dropdown__preferred-list-divider{height:1px;border:none;margin:var(--react-international-phone-dropdown-preferred-list-divider-margin, 0);background:var(--react-international-phone-dropdown-preferred-list-divider-color, var(--react-international-phone-border-color, gainsboro))}.react-international-phone-country-selector-dropdown__list-item{display:flex;min-height:var(--react-international-phone-dropdown-item-height, 28px);box-sizing:border-box;align-items:center;padding:2px 8px}.react-international-phone-country-selector-dropdown__list-item-flag-emoji{margin-right:8px}.react-international-phone-country-selector-dropdown__list-item-country-name{overflow:hidden;margin-right:8px;font-size:var(--react-international-phone-dropdown-item-font-size, 14px);text-overflow:ellipsis;white-space:nowrap}.react-international-phone-country-selector-dropdown__list-item-dial-code{color:var(--react-international-phone-dropdown-item-dial-code-color, gray);font-size:var(--react-international-phone-dropdown-item-font-size, 14px)}.react-international-phone-country-selector-dropdown__list-item:hover{background-color:var(--react-international-phone-selected-dropdown-item-background-color, var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke));cursor:pointer}.react-international-phone-country-selector-dropdown__list-item--selected,.react-international-phone-country-selector-dropdown__list-item--focused{background-color:var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke);color:var(--react-international-phone-selected-dropdown-item-text-color, var(--react-international-phone-text-color, #222))}.react-international-phone-country-selector-dropdown__list-item--selected .react-international-phone-country-selector-dropdown__list-item-dial-code,.react-international-phone-country-selector-dropdown__list-item--focused .react-international-phone-country-selector-dropdown__list-item-dial-code{color:var(--react-international-phone-selected-dropdown-item-dial-code-color, var(--react-international-phone-dropdown-item-dial-code-color, gray))}.react-international-phone-country-selector-dropdown__list-item--focused{background-color:var(--react-international-phone-selected-dropdown-item-background-color, var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke))}.react-international-phone-dial-code-preview{display:flex;align-items:center;justify-content:center;padding:0 8px;border:1px solid var(--react-international-phone-dial-code-preview-border-color, var(--react-international-phone-border-color, gainsboro));margin-right:-1px;background-color:var(--react-international-phone-dial-code-preview-background-color, var(--react-international-phone-background-color, white));color:var(--react-international-phone-dial-code-preview-text-color, var(--react-international-phone-text-color, #222));font-size:var(--react-international-phone-dial-code-preview-font-size, var(--react-international-phone-font-size, 13px))}.react-international-phone-dial-code-preview--disabled{background-color:var(--react-international-phone-dial-code-preview-disabled-background-color, var(--react-international-phone-disabled-background-color, whitesmoke));color:var(--react-international-phone-dial-code-preview-disabled-text-color, var(--react-international-phone-disabled-text-color, #666))}.react-international-phone-input-container{display:flex}.react-international-phone-input-container .react-international-phone-country-selector-button{border-radius:var(--react-international-phone-border-radius, 4px);margin-right:-1px;border-bottom-right-radius:0;border-top-right-radius:0}.react-international-phone-input-container .react-international-phone-input{overflow:visible;height:var(--react-international-phone-height, 36px);box-sizing:border-box;padding:0 8px;border:1px solid var(--react-international-phone-border-color, gainsboro);border-radius:var(--react-international-phone-border-radius, 4px);margin:0;background-color:var(--react-international-phone-background-color, white);border-bottom-left-radius:0;border-top-left-radius:0;color:var(--react-international-phone-text-color, #222);font-family:inherit;font-size:var(--react-international-phone-font-size, 13px)}.react-international-phone-input-container .react-international-phone-input:focus{outline:none}.react-international-phone-input-container .react-international-phone-input--disabled{background-color:var(--react-international-phone-disabled-background-color, whitesmoke);color:var(--react-international-phone-disabled-text-color, #666)}\n",""]);const c=l},6314:e=>{e.exports=function(e){var o=[];return o.toString=function toString(){return this.map((function(o){var t="",r=void 0!==o[5];return o[4]&&(t+="@supports (".concat(o[4],") {")),o[2]&&(t+="@media ".concat(o[2]," {")),r&&(t+="@layer".concat(o[5].length>0?" ".concat(o[5]):""," {")),t+=e(o),r&&(t+="}"),o[2]&&(t+="}"),o[4]&&(t+="}"),t})).join("")},o.i=function i(e,t,r,n,a){"string"==typeof e&&(e=[[null,e,void 0]]);var l={};if(r)for(var c=0;c<this.length;c++){var d=this[c][0];null!=d&&(l[d]=!0)}for(var s=0;s<e.length;s++){var p=[].concat(e[s]);r&&l[p[0]]||(void 0!==a&&(void 0===p[5]||(p[1]="@layer".concat(p[5].length>0?" ".concat(p[5]):""," {").concat(p[1],"}")),p[5]=a),t&&(p[2]?(p[1]="@media ".concat(p[2]," {").concat(p[1],"}"),p[2]=t):p[2]=t),n&&(p[4]?(p[1]="@supports (".concat(p[4],") {").concat(p[1],"}"),p[4]=n):p[4]="".concat(n)),o.push(p))}},o}},1601:e=>{e.exports=function(e){return e[1]}},5072:e=>{var o=[];function getIndexByIdentifier(e){for(var t=-1,r=0;r<o.length;r++)if(o[r].identifier===e){t=r;break}return t}function modulesToDom(e,t){for(var r={},n=[],a=0;a<e.length;a++){var l=e[a],c=t.base?l[0]+t.base:l[0],d=r[c]||0,s="".concat(c," ").concat(d);r[c]=d+1;var p=getIndexByIdentifier(s),u={css:l[1],media:l[2],sourceMap:l[3],supports:l[4],layer:l[5]};if(-1!==p)o[p].references++,o[p].updater(u);else{var m=addElementStyle(u,t);t.byIndex=a,o.splice(a,0,{identifier:s,updater:m,references:1})}n.push(s)}return n}function addElementStyle(e,o){var t=o.domAPI(o);t.update(e);return function updater(o){if(o){if(o.css===e.css&&o.media===e.media&&o.sourceMap===e.sourceMap&&o.supports===e.supports&&o.layer===e.layer)return;t.update(e=o)}else t.remove()}}e.exports=function(e,t){var r=modulesToDom(e=e||[],t=t||{});return function update(e){e=e||[];for(var n=0;n<r.length;n++){var a=getIndexByIdentifier(r[n]);o[a].references--}for(var l=modulesToDom(e,t),c=0;c<r.length;c++){var d=getIndexByIdentifier(r[c]);0===o[d].references&&(o[d].updater(),o.splice(d,1))}r=l}}},7659:e=>{var o={};e.exports=function insertBySelector(e,t){var r=function getTarget(e){if(void 0===o[e]){var t=document.querySelector(e);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(e){t=null}o[e]=t}return o[e]}(e);if(!r)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");r.appendChild(t)}},540:e=>{e.exports=function insertStyleElement(e){var o=document.createElement("style");return e.setAttributes(o,e.attributes),e.insert(o,e.options),o}},5056:(e,o,t)=>{e.exports=function setAttributesWithoutAttributes(e){var o=t.nc;o&&e.setAttribute("nonce",o)}},7825:e=>{e.exports=function domAPI(e){if("undefined"==typeof document)return{update:function update(){},remove:function remove(){}};var o=e.insertStyleElement(e);return{update:function update(t){!function apply(e,o,t){var r="";t.supports&&(r+="@supports (".concat(t.supports,") {")),t.media&&(r+="@media ".concat(t.media," {"));var n=void 0!==t.layer;n&&(r+="@layer".concat(t.layer.length>0?" ".concat(t.layer):""," {")),r+=t.css,n&&(r+="}"),t.media&&(r+="}"),t.supports&&(r+="}");var a=t.sourceMap;a&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),o.styleTagTransform(r,e,o.options)}(o,e,t)},remove:function remove(){!function removeStyleElement(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(o)}}}},1113:e=>{e.exports=function styleTagTransform(e,o){if(o.styleSheet)o.styleSheet.cssText=e;else{for(;o.firstChild;)o.removeChild(o.firstChild);o.appendChild(document.createTextNode(e))}}},447:o=>{o.exports=e},618:e=>{e.exports=o},9155:e=>{e.exports=t},1862:e=>{e.exports=r},3215:e=>{e.exports=n}},l={};function __webpack_require__(e){var o=l[e];if(void 0!==o)return o.exports;var t=l[e]={id:e,exports:{}};return a[e](t,t.exports,__webpack_require__),t.exports}__webpack_require__.n=e=>{var o=e&&e.__esModule?()=>e.default:()=>e;return __webpack_require__.d(o,{a:o}),o},__webpack_require__.d=(e,o)=>{for(var t in o)__webpack_require__.o(o,t)&&!__webpack_require__.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:o[t]})},__webpack_require__.o=(e,o)=>Object.prototype.hasOwnProperty.call(e,o),__webpack_require__.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},__webpack_require__.nc=void 0;var c={};return(()=>{__webpack_require__.r(c),__webpack_require__.d(c,{default:()=>v});var e=__webpack_require__(9155),o=__webpack_require__.n(e),t=__webpack_require__(1862),r="login-otp__alertError___FvgBm",n="login-otp__changeBtn___yaRV5",a="login-otp__error___gM8rr",l="login-otp__formReq___I6wQg",d="login-otp__loginInput___EkjKI",s="login-otp__loginInputGroup____7Nbd",p="login-otp__loginInputTitle___oQ_Yc",u="login-otp__otpInput___XqbBx",m="login-otp__otpSentMsg___fJ8Ee",b="login-otp__otpTitle___xsIPE",_="login-otp__resendOtpBtn___dLIn7",h="login-otp__verifyOtpBtn___UCOSR",g=__webpack_require__(4129),f=__webpack_require__(447);function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var o=1;o<arguments.length;o++){var t=arguments[o];for(var r in t)({}).hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},_extends.apply(null,arguments)}const v=function LoginOtp(e){let{mobileInfo:r={countryCode:"91",mobile:"",isValidNumber:!1},submittedMobile:n="",setSubmittedMobile:a=(()=>{}),otpResendTime:l=0,otpError:c=null,isFormSubmitSuccess:d=!1,setIsFormSubmitSuccess:s=(()=>{}),onLoginFormSubmit:p=(()=>{}),onOtpSubmit:u=(()=>{}),onResendOtpClick:m=(()=>{})}=e;const{t:b}=(0,f.useGlobalTranslation)("translation"),{handleSubmit:_,control:h,getValues:v,reset:y,setValue:w}=(0,t.useForm)({mode:"onChange",defaultValues:{phone:r},reValidateMode:"onChange"});return o().createElement("div",{className:"login-otp__loginOtpWrapper___IDiOX"},d?o().createElement(OtpForm,{submittedMobile:n,mobileInfo:v(),otpResendTime:l,error:c,onOtpSubmit:u,onResendOtpClick:m,onChangeButton:()=>{y(),s(!1),a("")}}):o().createElement("form",{onSubmit:_(p)},o().createElement(t.Controller,{name:"phone",control:h,rules:{validate:e=>!!e.isValidNumber||b("resource.common.enter_valid_phone_number")},render:e=>{let{field:t,fieldState:{error:r}}=e;return o().createElement(g.default,{name:t?.name,mobile:t.value.mobile,countryCode:t.value.countryCode,error:r,isFocused:r?.message,onChange:e=>{w("phone",e)}})}}),o().createElement("button",{className:"login-otp__sendOtpBtn___m6A1L",type:"submit"},b("resource.auth.login.get_otp"))))};function OtpForm(c){let{submittedMobile:g="",mobileInfo:v={},otpResendTime:y,error:w,onOtpSubmit:x=(()=>{}),onResendOtpClick:k=(()=>{}),onChangeButton:C=(()=>{})}=c;const{t:E}=(0,f.useGlobalTranslation)("translation"),S=(0,e.useId)(),{handleSubmit:I,register:N,formState:{errors:O},setError:q,watch:T,clearErrors:$,resetField:P}=(0,t.useForm)(),z=T("mobileOtp"),M=y>0;(0,e.useEffect)((()=>{const e=document?.getElementById?.(S);e&&e?.focus()}),[]),(0,e.useEffect)((()=>{z&&z.length<4&&$("root")}),[z]),(0,e.useEffect)((()=>{w?q("root",w):$("root")}),[w]),(0,e.useLayoutEffect)((()=>{window?.scrollTo({top:0})}),[]);return o().createElement(o().Fragment,null,o().createElement("form",{className:s,onSubmit:I(x)},o().createElement("h3",{className:b},E("resource.localization.verify_account")),o().createElement("p",{className:m},`${E("resource.common.otp_sent_to")} ${g}`,o().createElement("button",{type:"button",className:n,onClick:C},E("resource.common.change_caps"))),o().createElement("div",{className:d},o().createElement("label",{className:`${p} ${O?.root||O?.mobileOtp?a:""}`,htmlFor:S},E("resource.common.enter_otp")," ",o().createElement("span",{className:`${l}`},"*")),o().createElement("input",_extends({id:S,type:"text",inputMode:"numeric",pattern:"\\d*",maxLength:4,onInput:e=>{e.target.value=e.target.value.replace(/[^0-9]/g,"").slice(0,4)},className:`${u} ${O?.root||O?.mobileOtp?a:""}`},N("mobileOtp",{required:{message:E("resource.common.enter_valid_otp"),value:!0},maxLength:4}))),(O?.root||O?.mobileOtp)&&o().createElement("div",{className:r},o().createElement("span",null,O?.root?.message||O?.mobileOtp?.message))),o().createElement("button",{className:h,type:"submit"},E("resource.common.continue"))),o().createElement("button",{className:_,onClick:()=>{P("mobileOtp"),k(v)},disabled:M},`${E("resource.common.resend_otp")}${M?` (${y}S)`:""}`))}})(),c})()));
+!function webpackUniversalModuleDefinition(e,o){"object"==typeof exports&&"object"==typeof module?module.exports=o(require("fdk-core/utils"),require("google-libphonenumber"),require("react"),require("react-hook-form"),require("react-international-phone")):"function"==typeof define&&define.amd?define("firestone",["fdk-core/utils","google-libphonenumber","react","react-hook-form","react-international-phone"],o):"object"==typeof exports?exports.firestone=o(require("fdk-core/utils"),require("google-libphonenumber"),require("react"),require("react-hook-form"),require("react-international-phone")):e.firestone=o(e["fdk-core/utils"],e["google-libphonenumber"],e.react,e["react-hook-form"],e["react-international-phone"])}("undefined"!=typeof self?self:this,((e,o,t,r,n)=>(()=>{"use strict";var a={4129:(e,o,t)=>{t.d(o,{default:()=>$});var r={};t.r(r),t.d(r,{SP:()=>x,rg:()=>k,kc:()=>C,nM:()=>E,uo:()=>S,QZ:()=>I,QM:()=>N,mw:()=>O});var n=t(9155),a=t.n(n),l=t(3215),c=t(5072),d=t.n(c),s=t(7825),p=t.n(s),u=t(7659),m=t.n(u),b=t(5056),_=t.n(b),h=t(540),g=t.n(h),f=t(1113),v=t.n(f),y=t(8384),w={};w.styleTagTransform=v(),w.setAttributes=_(),w.insert=m().bind(null,"head"),w.domAPI=p(),w.insertStyleElement=g();d()(y.A,w);y.A&&y.A.locals&&y.A.locals;var x="mobile-number__dialCodePreview___E0m4Z",k="mobile-number__errorInput___TKkzT",C="mobile-number__errorText___lRww6",E="mobile-number__inputTitle___QKLCn",S="mobile-number__mobileInputContainer___deIgv",I="mobile-number__mobileInputWrapper___Na12n",N="mobile-number__mobileNumberInput___iRnFG",O="mobile-number__required___yHCeh",q=t(618),T=t(447);function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var o=1;o<arguments.length;o++){var t=arguments[o];for(var r in t)({}).hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},_extends.apply(null,arguments)}const $=function MobileNumber(e){let{name:o="",mobile:t="",countryCode:c="91",disable:d=!1,isShowLabel:s=!0,isRequired:p,allowDropdown:u=!0,isFocused:m=!1,placeholder:b="",label:_="",error:h,onChange:g,inputClassName:f,containerClassName:v,labelClassName:y,inputContainerClassName:w,inputProps:$,height:P="48px",textColor:z="var(--textBody, #3c3131)",backgroundColor:M="var(--pageBackground, #f8f8f8)",fontSize:j="14px",countryIso:B,...A}=e;const{t:F}=(0,T.useGlobalTranslation)("translation"),R=(0,n.useId)(),D=(0,n.useRef)(null),L=q.PhoneNumberUtil.getInstance(),isPhoneValid=(e,o)=>{try{return L.isValidNumber(L.parseAndKeepRawInput(e,o))}catch(e){return!1}};return(0,n.useEffect)((()=>{m&&document.getElementById(R)?.focus()}),[R,m]),(0,n.useEffect)((()=>{B&&D?.current?.setCountry&&D?.current?.setCountry(B)}),[B,D?.current,t]),a().createElement("div",{className:`${I} ${h?k:""} ${v||""}`},s&&a().createElement("label",{className:`${E} ${y||""}`,htmlFor:R},_||F("resource.common.mobile"),"optional"===p?` (${F("resource.common.optional_lower")})`:a().createElement("span",{className:O}," * ")),a().createElement(l.PhoneInput,_extends({name:o,defaultCountry:"in",value:`+${c}${t}`,onChange:(e,o)=>{let{country:t}=o;var r,n;g?.({mobile:(r=e,n=t?.dialCode,r?.replace(new RegExp(`^\\+${n}`),"")),countryCode:t?.dialCode,isValidNumber:isPhoneValid(e)})},forceDialCode:!0,ref:D,style:{"--react-international-phone-height":P,"--react-international-phone-text-color":z,"--react-international-phone-border-radius":"4px","--react-international-phone-border-color":""+(h?"var(--errorText, #b24141)":"var(--dividerStokes, #d4d1d1)"),"--react-international-phone-background-color":M,"--react-international-phone-dropdown-item-background-color":"var(--pageBackground)","--react-international-phone-selected-dropdown-item-background-color":"var(--highlightColor)","--react-international-phone-dropdown-top":`calc(${P} + 4px)`,"--react-international-phone-font-size":j,"--react-international-phone-country-selector-border-color":""+(h?"var(--errorText, #b24141)":"var(--dividerStokes, #d4d1d1)"),direction:"ltr"},countrySelectorStyleProps:{buttonContentWrapperStyle:{gap:"4px"},buttonStyle:{padding:"0 8px"},buttonClassName:`${r.countryButton}`,dropdownStyleProps:{style:{zIndex:999}}},disabled:d,className:`${S} ${w||""}`,inputClassName:`${N} ${f||""}`,inputProps:{id:R,autoComplete:"tel",...$},placeholder:b,hideDropdown:!u,dialCodePreviewStyleProps:{className:x},disableDialCodePrefill:!0,disableDialCodeAndPrefix:!0,showDisabledDialCodeAndPrefix:!0},A)),h&&a().createElement("span",{className:C},h.message))}},8384:(e,o,t)=>{t.d(o,{A:()=>c});var r=t(1601),n=t.n(r),a=t(6314),l=t.n(a)()(n());l.push([e.id,".react-international-phone-country-selector{position:relative}.react-international-phone-country-selector-button{display:flex;height:var(--react-international-phone-height, 36px);box-sizing:border-box;align-items:center;justify-content:center;padding:0;border:1px solid var(--react-international-phone-country-selector-border-color, var(--react-international-phone-border-color, gainsboro));margin:0;appearance:button;-webkit-appearance:button;background-color:var(--react-international-phone-country-selector-background-color, var(--react-international-phone-background-color, white));cursor:pointer;text-transform:none;user-select:none}.react-international-phone-country-selector-button:hover{background-color:var(--react-international-phone-country-selector-background-color-hover, whitesmoke)}.react-international-phone-country-selector-button--hide-dropdown{cursor:auto}.react-international-phone-country-selector-button--hide-dropdown:hover{background-color:transparent}.react-international-phone-country-selector-button__button-content{display:flex;align-items:center;justify-content:center}.react-international-phone-country-selector-button__flag-emoji{margin:0 4px}.react-international-phone-country-selector-button__flag-emoji--disabled{opacity:.75}.react-international-phone-country-selector-button__dropdown-arrow{border-top:var(--react-international-phone-country-selector-arrow-size, 4px) solid var(--react-international-phone-country-selector-arrow-color, #777);border-right:var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent;border-left:var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent;margin-right:4px;transition:all .1s ease-out}.react-international-phone-country-selector-button__dropdown-arrow--active{transform:rotateX(180deg)}.react-international-phone-country-selector-button__dropdown-arrow--disabled{border-top-color:var(--react-international-phone-disabled-country-selector-arrow-color, #999)}.react-international-phone-country-selector-button--disabled{background-color:var(--react-international-phone-disabled-country-selector-background-color, var(--react-international-phone-disabled-background-color, whitesmoke));cursor:auto}.react-international-phone-country-selector-button--disabled:hover{background-color:var(--react-international-phone-disabled-country-selector-background-color, var(--react-international-phone-disabled-background-color, whitesmoke))}.react-international-phone-flag-emoji{width:var(--react-international-phone-flag-width, 24px);height:var(--react-international-phone-flag-height, 24px);box-sizing:border-box}.react-international-phone-country-selector-dropdown{position:absolute;z-index:1;top:var(--react-international-phone-dropdown-top, 44px);left:var(--react-international-phone-dropdown-left, 0);display:flex;width:300px;max-height:200px;flex-direction:column;padding:4px 0;margin:0;background-color:var(--react-international-phone-dropdown-item-background-color, var(--react-international-phone-background-color, white));box-shadow:var(--react-international-phone-dropdown-shadow, 2px 2px 16px rgba(0, 0, 0, .25));color:var(--react-international-phone-dropdown-item-text-color, var(--react-international-phone-text-color, #222));list-style:none;overflow-y:scroll}.react-international-phone-country-selector-dropdown__preferred-list-divider{height:1px;border:none;margin:var(--react-international-phone-dropdown-preferred-list-divider-margin, 0);background:var(--react-international-phone-dropdown-preferred-list-divider-color, var(--react-international-phone-border-color, gainsboro))}.react-international-phone-country-selector-dropdown__list-item{display:flex;min-height:var(--react-international-phone-dropdown-item-height, 28px);box-sizing:border-box;align-items:center;padding:2px 8px}.react-international-phone-country-selector-dropdown__list-item-flag-emoji{margin-right:8px}.react-international-phone-country-selector-dropdown__list-item-country-name{overflow:hidden;margin-right:8px;font-size:var(--react-international-phone-dropdown-item-font-size, 14px);text-overflow:ellipsis;white-space:nowrap}.react-international-phone-country-selector-dropdown__list-item-dial-code{color:var(--react-international-phone-dropdown-item-dial-code-color, gray);font-size:var(--react-international-phone-dropdown-item-font-size, 14px)}.react-international-phone-country-selector-dropdown__list-item:hover{background-color:var(--react-international-phone-selected-dropdown-item-background-color, var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke));cursor:pointer}.react-international-phone-country-selector-dropdown__list-item--selected,.react-international-phone-country-selector-dropdown__list-item--focused{background-color:var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke);color:var(--react-international-phone-selected-dropdown-item-text-color, var(--react-international-phone-text-color, #222))}.react-international-phone-country-selector-dropdown__list-item--selected .react-international-phone-country-selector-dropdown__list-item-dial-code,.react-international-phone-country-selector-dropdown__list-item--focused .react-international-phone-country-selector-dropdown__list-item-dial-code{color:var(--react-international-phone-selected-dropdown-item-dial-code-color, var(--react-international-phone-dropdown-item-dial-code-color, gray))}.react-international-phone-country-selector-dropdown__list-item--focused{background-color:var(--react-international-phone-selected-dropdown-item-background-color, var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke))}.react-international-phone-dial-code-preview{display:flex;align-items:center;justify-content:center;padding:0 8px;border:1px solid var(--react-international-phone-dial-code-preview-border-color, var(--react-international-phone-border-color, gainsboro));margin-right:-1px;background-color:var(--react-international-phone-dial-code-preview-background-color, var(--react-international-phone-background-color, white));color:var(--react-international-phone-dial-code-preview-text-color, var(--react-international-phone-text-color, #222));font-size:var(--react-international-phone-dial-code-preview-font-size, var(--react-international-phone-font-size, 13px))}.react-international-phone-dial-code-preview--disabled{background-color:var(--react-international-phone-dial-code-preview-disabled-background-color, var(--react-international-phone-disabled-background-color, whitesmoke));color:var(--react-international-phone-dial-code-preview-disabled-text-color, var(--react-international-phone-disabled-text-color, #666))}.react-international-phone-input-container{display:flex}.react-international-phone-input-container .react-international-phone-country-selector-button{border-radius:var(--react-international-phone-border-radius, 4px);margin-right:-1px;border-bottom-right-radius:0;border-top-right-radius:0}.react-international-phone-input-container .react-international-phone-input{overflow:visible;height:var(--react-international-phone-height, 36px);box-sizing:border-box;padding:0 8px;border:1px solid var(--react-international-phone-border-color, gainsboro);border-radius:var(--react-international-phone-border-radius, 4px);margin:0;background-color:var(--react-international-phone-background-color, white);border-bottom-left-radius:0;border-top-left-radius:0;color:var(--react-international-phone-text-color, #222);font-family:inherit;font-size:var(--react-international-phone-font-size, 13px)}.react-international-phone-input-container .react-international-phone-input:focus{outline:none}.react-international-phone-input-container .react-international-phone-input--disabled{background-color:var(--react-international-phone-disabled-background-color, whitesmoke);color:var(--react-international-phone-disabled-text-color, #666)}\n",""]);const c=l},6314:e=>{e.exports=function(e){var o=[];return o.toString=function toString(){return this.map((function(o){var t="",r=void 0!==o[5];return o[4]&&(t+="@supports (".concat(o[4],") {")),o[2]&&(t+="@media ".concat(o[2]," {")),r&&(t+="@layer".concat(o[5].length>0?" ".concat(o[5]):""," {")),t+=e(o),r&&(t+="}"),o[2]&&(t+="}"),o[4]&&(t+="}"),t})).join("")},o.i=function i(e,t,r,n,a){"string"==typeof e&&(e=[[null,e,void 0]]);var l={};if(r)for(var c=0;c<this.length;c++){var d=this[c][0];null!=d&&(l[d]=!0)}for(var s=0;s<e.length;s++){var p=[].concat(e[s]);r&&l[p[0]]||(void 0!==a&&(void 0===p[5]||(p[1]="@layer".concat(p[5].length>0?" ".concat(p[5]):""," {").concat(p[1],"}")),p[5]=a),t&&(p[2]?(p[1]="@media ".concat(p[2]," {").concat(p[1],"}"),p[2]=t):p[2]=t),n&&(p[4]?(p[1]="@supports (".concat(p[4],") {").concat(p[1],"}"),p[4]=n):p[4]="".concat(n)),o.push(p))}},o}},1601:e=>{e.exports=function(e){return e[1]}},5072:e=>{var o=[];function getIndexByIdentifier(e){for(var t=-1,r=0;r<o.length;r++)if(o[r].identifier===e){t=r;break}return t}function modulesToDom(e,t){for(var r={},n=[],a=0;a<e.length;a++){var l=e[a],c=t.base?l[0]+t.base:l[0],d=r[c]||0,s="".concat(c," ").concat(d);r[c]=d+1;var p=getIndexByIdentifier(s),u={css:l[1],media:l[2],sourceMap:l[3],supports:l[4],layer:l[5]};if(-1!==p)o[p].references++,o[p].updater(u);else{var m=addElementStyle(u,t);t.byIndex=a,o.splice(a,0,{identifier:s,updater:m,references:1})}n.push(s)}return n}function addElementStyle(e,o){var t=o.domAPI(o);t.update(e);return function updater(o){if(o){if(o.css===e.css&&o.media===e.media&&o.sourceMap===e.sourceMap&&o.supports===e.supports&&o.layer===e.layer)return;t.update(e=o)}else t.remove()}}e.exports=function(e,t){var r=modulesToDom(e=e||[],t=t||{});return function update(e){e=e||[];for(var n=0;n<r.length;n++){var a=getIndexByIdentifier(r[n]);o[a].references--}for(var l=modulesToDom(e,t),c=0;c<r.length;c++){var d=getIndexByIdentifier(r[c]);0===o[d].references&&(o[d].updater(),o.splice(d,1))}r=l}}},7659:e=>{var o={};e.exports=function insertBySelector(e,t){var r=function getTarget(e){if(void 0===o[e]){var t=document.querySelector(e);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(e){t=null}o[e]=t}return o[e]}(e);if(!r)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");r.appendChild(t)}},540:e=>{e.exports=function insertStyleElement(e){var o=document.createElement("style");return e.setAttributes(o,e.attributes),e.insert(o,e.options),o}},5056:(e,o,t)=>{e.exports=function setAttributesWithoutAttributes(e){var o=t.nc;o&&e.setAttribute("nonce",o)}},7825:e=>{e.exports=function domAPI(e){if("undefined"==typeof document)return{update:function update(){},remove:function remove(){}};var o=e.insertStyleElement(e);return{update:function update(t){!function apply(e,o,t){var r="";t.supports&&(r+="@supports (".concat(t.supports,") {")),t.media&&(r+="@media ".concat(t.media," {"));var n=void 0!==t.layer;n&&(r+="@layer".concat(t.layer.length>0?" ".concat(t.layer):""," {")),r+=t.css,n&&(r+="}"),t.media&&(r+="}"),t.supports&&(r+="}");var a=t.sourceMap;a&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),o.styleTagTransform(r,e,o.options)}(o,e,t)},remove:function remove(){!function removeStyleElement(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(o)}}}},1113:e=>{e.exports=function styleTagTransform(e,o){if(o.styleSheet)o.styleSheet.cssText=e;else{for(;o.firstChild;)o.removeChild(o.firstChild);o.appendChild(document.createTextNode(e))}}},447:o=>{o.exports=e},618:e=>{e.exports=o},9155:e=>{e.exports=t},1862:e=>{e.exports=r},3215:e=>{e.exports=n}},l={};function __webpack_require__(e){var o=l[e];if(void 0!==o)return o.exports;var t=l[e]={id:e,exports:{}};return a[e](t,t.exports,__webpack_require__),t.exports}__webpack_require__.n=e=>{var o=e&&e.__esModule?()=>e.default:()=>e;return __webpack_require__.d(o,{a:o}),o},__webpack_require__.d=(e,o)=>{for(var t in o)__webpack_require__.o(o,t)&&!__webpack_require__.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:o[t]})},__webpack_require__.o=(e,o)=>Object.prototype.hasOwnProperty.call(e,o),__webpack_require__.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},__webpack_require__.nc=void 0;var c={};return(()=>{__webpack_require__.r(c),__webpack_require__.d(c,{default:()=>v});var e=__webpack_require__(9155),o=__webpack_require__.n(e),t=__webpack_require__(1862),r="login-otp__alertError___FvgBm",n="login-otp__changeBtn___yaRV5",a="login-otp__error___gM8rr",l="login-otp__formReq___I6wQg",d="login-otp__loginInput___EkjKI",s="login-otp__loginInputGroup____7Nbd",p="login-otp__loginInputTitle___oQ_Yc",u="login-otp__otpInput___XqbBx",m="login-otp__otpSentMsg___fJ8Ee",b="login-otp__otpTitle___xsIPE",_="login-otp__resendOtpBtn___dLIn7",h="login-otp__verifyOtpBtn___UCOSR",g=__webpack_require__(4129),f=__webpack_require__(447);function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var o=1;o<arguments.length;o++){var t=arguments[o];for(var r in t)({}).hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},_extends.apply(null,arguments)}const v=function LoginOtp(e){let{mobileInfo:r={countryCode:"91",mobile:"",isValidNumber:!1},submittedMobile:n="",setSubmittedMobile:a=(()=>{}),otpResendTime:l=0,otpError:c=null,isFormSubmitSuccess:d=!1,setIsFormSubmitSuccess:s=(()=>{}),onLoginFormSubmit:p=(()=>{}),onOtpSubmit:u=(()=>{}),onResendOtpClick:m=(()=>{}),getOtpLoading:b}=e;const{t:_}=(0,f.useGlobalTranslation)("translation"),{handleSubmit:h,control:v,getValues:y,reset:w,setValue:x}=(0,t.useForm)({mode:"onChange",defaultValues:{phone:r},reValidateMode:"onChange"});return o().createElement("div",{className:"login-otp__loginOtpWrapper___IDiOX"},d?o().createElement(OtpForm,{submittedMobile:n,mobileInfo:y(),otpResendTime:l,error:c,onOtpSubmit:u,onResendOtpClick:m,onChangeButton:()=>{w(),s(!1),a("")}}):o().createElement("form",{onSubmit:h(p)},o().createElement(t.Controller,{name:"phone",control:v,rules:{validate:e=>!!e.isValidNumber||_("resource.common.enter_valid_phone_number")},render:e=>{let{field:t,fieldState:{error:r}}=e;return o().createElement(g.default,{name:t?.name,mobile:t.value.mobile,countryCode:t.value.countryCode,error:r,isFocused:r?.message,onChange:e=>{x("phone",e)}})}}),o().createElement("button",{className:"login-otp__sendOtpBtn___m6A1L",type:"submit",disabled:b},_("resource.auth.login.get_otp"))))};function OtpForm(c){let{submittedMobile:g="",mobileInfo:v={},otpResendTime:y,error:w,onOtpSubmit:x=(()=>{}),onResendOtpClick:k=(()=>{}),onChangeButton:C=(()=>{})}=c;const{t:E}=(0,f.useGlobalTranslation)("translation"),S=(0,e.useId)(),{handleSubmit:I,register:N,formState:{errors:O},setError:q,watch:T,clearErrors:$,resetField:P}=(0,t.useForm)(),z=T("mobileOtp"),M=y>0;(0,e.useEffect)((()=>{const e=document?.getElementById?.(S);e&&e?.focus()}),[]),(0,e.useEffect)((()=>{z&&z.length<4&&$("root")}),[z]),(0,e.useEffect)((()=>{w?q("root",w):$("root")}),[w]),(0,e.useLayoutEffect)((()=>{window?.scrollTo({top:0})}),[]);return o().createElement(o().Fragment,null,o().createElement("form",{className:s,onSubmit:I(x)},o().createElement("h3",{className:b},E("resource.localization.verify_account")),o().createElement("p",{className:m},`${E("resource.common.otp_sent_to")} ${g}`,o().createElement("button",{type:"button",className:n,onClick:C},E("resource.common.change_caps"))),o().createElement("div",{className:d},o().createElement("label",{className:`${p} ${O?.root||O?.mobileOtp?a:""}`,htmlFor:S},E("resource.common.enter_otp")," ",o().createElement("span",{className:`${l}`},"*")),o().createElement("input",_extends({id:S,type:"text",inputMode:"numeric",pattern:"\\d*",maxLength:4,onInput:e=>{e.target.value=e.target.value.replace(/[^0-9]/g,"").slice(0,4)},className:`${u} ${O?.root||O?.mobileOtp?a:""}`},N("mobileOtp",{required:{message:E("resource.common.enter_valid_otp"),value:!0},maxLength:4}))),(O?.root||O?.mobileOtp)&&o().createElement("div",{className:r},o().createElement("span",null,O?.root?.message||O?.mobileOtp?.message))),o().createElement("button",{className:h,type:"submit"},E("resource.common.continue"))),o().createElement("button",{className:_,onClick:()=>{P("mobileOtp"),k(v)},disabled:M},`${E("resource.common.resend_otp")}${M?` (${y}S)`:""}`))}})(),c})()));

package/dist/page-layouts/single-checkout/payment/card-form.css

@@ -337,6 +337,10 @@ h5,
 .checkout-payment-content__container___HusGh {
   background: var(--pageBackground, #f8f8f8);
 }
+.checkout-payment-content__container___HusGh.checkout-payment-content__unsetBorder___iXIU7 {
+  border: unset;
+  padding-top: 0;
+}
 @media only screen and (min-width: 769px) {
   .checkout-payment-content__container___HusGh {
     display: flex;
@@ -471,6 +475,7 @@ h5,
   font-size: 14px;
   font-weight: 500;
   line-height: 140%;
+  height: 18px;
 }
 @media only screen and (max-width: 768px) {
   .checkout-payment-content__container___HusGh .checkout-payment-content__navigationLink___jrTvz .checkout-payment-content__linkWrapper___rbKAK .checkout-payment-content__link___ZIR_i .checkout-payment-content__modeName___oABQ2 {
@@ -858,6 +863,11 @@ h5,
   display: flex;
   flex-direction: column;
 }
+@media only screen and (max-width: 480px) {
+  .checkout-payment-content__container___HusGh .checkout-payment-content__cardTab___uYvQv .checkout-payment-content__newCardWrapper___p35go .checkout-payment-content__newCard___gXKVk.checkout-payment-content__addPaddingBottom___Qc5bl {
+    padding-bottom: 24px;
+  }
+}
 .checkout-payment-content__container___HusGh .checkout-payment-content__cardTab___uYvQv .checkout-payment-content__newCardWrapper___p35go .checkout-payment-content__newCard___gXKVk .checkout-payment-content__cardInputWrapper___YqlSP {
   display: flex;
   flex-direction: column;
@@ -1009,12 +1019,12 @@ h5,
   margin-bottom: 16px;
 }
 .checkout-payment-content__container___HusGh .checkout-payment-content__cardTab___uYvQv .checkout-payment-content__newCardWrapper___p35go .checkout-payment-content__saveNewCard___cPi2y {
-  padding: 8px;
-  border-radius: 5px;
+  padding: 16px;
+  border-radius: var(--buttonRadius, 0px);
   background-color: var(--primaryColor);
   border: none;
   width: 100%;
-  margin-top: 24px;
+  margin-top: 16px;
   font-weight: 600;
   font-size: 14px;
   text-transform: uppercase;
@@ -1023,12 +1033,12 @@ h5,
   line-height: 140%;
 }
 .checkout-payment-content__container___HusGh .checkout-payment-content__cardTab___uYvQv .checkout-payment-content__newCardWrapper___p35go .checkout-payment-content__saveNewCard___cPi2y[disabled] {
-  padding: 8px;
-  border-radius: 5px;
+  padding: 16px;
+  border-radius: var(--buttonRadius, 0px);
   background-color: var(--primaryColor);
   border: none;
   width: 100%;
-  margin-top: 24px;
+  margin-top: 16px;
   font-weight: 600;
   font-size: 14px;
   text-transform: uppercase;
@@ -1199,7 +1209,7 @@ h5,
 .checkout-payment-content__container___HusGh .checkout-payment-content__modeOption___onKtJ .checkout-payment-content__modeItemWrapper___IlJf3 .checkout-payment-content__modeItem___M6Obf .checkout-payment-content__moreModeArrow___yBQbk {
   transform: rotate(270deg);
 }
-[dir='rtl'] .checkout-payment-content__container___HusGh .checkout-payment-content__modeOption___onKtJ .checkout-payment-content__modeItemWrapper___IlJf3 .checkout-payment-content__modeItem___M6Obf .checkout-payment-content__moreModeArrow___yBQbk {
+[dir="rtl"] .checkout-payment-content__container___HusGh .checkout-payment-content__modeOption___onKtJ .checkout-payment-content__modeItemWrapper___IlJf3 .checkout-payment-content__modeItem___M6Obf .checkout-payment-content__moreModeArrow___yBQbk {
   transform: rotate(90deg);
 }
 .checkout-payment-content__container___HusGh .checkout-payment-content__modeOption___onKtJ .checkout-payment-content__modeItemWrapper___IlJf3 .checkout-payment-content__modeItem___M6Obf .checkout-payment-content__otherModeArrow___ulm30 {
@@ -1276,6 +1286,12 @@ h5,
   align-items: center;
   border: 1px solid var(--dividerStokes);
   border-radius: 100px;
+  width: 38px;
+  height: 38px;
+  padding: 8px 4px;
+}
+.checkout-payment-content__container___HusGh .checkout-payment-content__upiApp___M2sjF .checkout-payment-content__logo___jNLmQ:last-child {
+  padding: unset;
 }
 .checkout-payment-content__container___HusGh .checkout-payment-content__upiApp___M2sjF .checkout-payment-content__displayName___dLKMP {
   flex: 1;
@@ -1502,7 +1518,8 @@ h5,
   text-transform: uppercase;
   cursor: pointer;
   line-height: 140%;
-  margin: 24px 0;
+  margin-top: 16px;
+  margin-bottom: 24px;
 }
 .checkout-payment-content__container___HusGh .checkout-payment-content__upiPay___CycYi .checkout-payment-content__payBtn___dgcAp:hover {
   background-color: var(--buttonPrimaryL1, #71653a);
@@ -1939,7 +1956,7 @@ h5,
   display: flex;
   align-items: center;
 }
-[dir='rtl'] .checkout-payment-content__moreModeIcon___Hjipo {
+[dir="rtl"] .checkout-payment-content__moreModeIcon___Hjipo {
   transform: rotate(90deg);
 }
 .checkout-payment-content__moreModeIcon___Hjipo svg {
@@ -2037,6 +2054,10 @@ h5,
     display: none;
   }
 }
+.checkout-payment-content__mopIcon___koORc {
+  width: 24px;
+  height: 24px;
+}
 
 /**color by character**/
 /** Font family **/
@@ -2937,4 +2958,7 @@ h5,
 .sticky-pay-now__checkoutButton___mtO42 {
   gap: 12px;
 }
+.sticky-pay-now__buttonWidth___nKraw {
+  width: 100%;
+}