simple-liquid-glass
Version:
A React component for creating liquid glass morphism effects with customizable distortion and blur
3 lines (2 loc) • 19.9 kB
JavaScript
import e,{useRef as t,useState as r,useEffect as n,useMemo as o,useId as a}from"react";function i(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=Array(t);r<t;r++)n[r]=e[r];return n}function l(e,t){var r="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!r){if(Array.isArray(e)||(r=p(e))||t){r&&(e=r);var n=0,o=function(){};return{s:o,n:function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}},e:function(e){throw e},f:o}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var a,i=!0,l=!1;return{s:function(){r=r.call(e)},n:function(){var e=r.next();return i=e.done,e},e:function(e){l=!0,a=e},f:function(){try{i||null==r.return||r.return()}finally{if(l)throw a}}}}function s(e,t,r){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,t);if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function c(){return c=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)({}).hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},c.apply(null,arguments)}function u(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}function d(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?u(Object(r),!0).forEach(function(t){s(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):u(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}function f(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,a,i,l=[],s=!0,c=!1;try{if(a=(r=r.call(e)).next,0===t);else for(;!(s=(n=a.call(r)).done)&&(l.push(n.value),l.length!==t);s=!0);}catch(e){c=!0,o=e}finally{try{if(!s&&null!=r.return&&(i=r.return(),Object(i)!==i))return}finally{if(c)throw o}}return l}}(e,t)||p(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function p(e,t){if(e){if("string"==typeof e)return i(e,t);var r={}.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?i(e,t):void 0}}var v=["children","mode","scale","radius","border","lightness","displace","alpha","blur","dispersion","saturation","aberrationIntensity","frost","borderColor","glassColor","autoTextColor","autoTextColorMode","perPixelTargetSelector","textOnDark","textOnLight","forceTextColor","className","style","iosMinBlur","iosBlurMode"];function m(e){if(!e)return!1;var t=e.trim(),r=/^rgba\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*(\d*\.?\d+)\s*\)$/i.exec(t);if(r){var n=parseFloat(r[1]);return n>0&&n<1}var o=/^hsla\(.*?,\s*(\d*\.?\d+)\s*\)$/i.exec(t);if(o){var a=parseFloat(o[1]);return a>0&&a<1}var i=/^hsl\(.*?\/\s*(\d*\.?\d+)\s*\)$/i.exec(t);if(i){var l=parseFloat(i[1]);return l>0&&l<1}var s=/^#([0-9a-f]{4})$/i.exec(t);if(s){var c=s[1].slice(3,4),u=parseInt(c+c,16)/255;return u>0&&u<1}var d=/^#([0-9a-f]{8})$/i.exec(t);if(d){var f=d[1].slice(6,8),p=parseInt(f,16)/255;return p>0&&p<1}return!1}var y={scale:160,radius:50,border:.05,lightness:53,displace:5,alpha:.9,blur:0,dispersion:50,saturation:140,aberrationIntensity:2,frost:.1,borderColor:"rgba(120, 120, 120, 0.7)"};function g(i){var s,u,p,g=i.children,b=i.mode,h=void 0===b?"preset":b,x=i.scale,w=void 0===x?160:x,E=i.radius,I=void 0===E?50:E,C=i.border,M=void 0===C?.05:C,P=i.lightness,A=void 0===P?53:P,S=i.displace,O=void 0===S?5:S,k=i.alpha,j=void 0===k?.9:k,B=i.blur,T=void 0===B?0:B,L=i.dispersion,R=void 0===L?50:L,q=i.saturation,z=void 0===q?140:q,F=i.aberrationIntensity,G=void 0===F?2:F,N=i.frost,D=void 0===N?.1:N,$=i.borderColor,W=void 0===$?"rgba(120, 120, 120, 0.7)":$,H=i.glassColor,U=i.autoTextColor,X=void 0!==U&&U,_=i.autoTextColorMode,J=void 0===_?"global":_,K=i.perPixelTargetSelector,Q=void 0===K?"[data-lg-autotext]":K,V=i.textOnDark,Y=void 0===V?"#ffffff":V,Z=i.textOnLight,ee=void 0===Z?"#111111":Z,te=i.forceTextColor,re=void 0!==te&&te,ne=i.className,oe=void 0===ne?"":ne,ae=i.style,ie=void 0===ae?{}:ae,le=i.iosMinBlur,se=void 0===le?2:le,ce=i.iosBlurMode,ue=void 0===ce?"auto":ce,de=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r={};for(var n in e)if({}.hasOwnProperty.call(e,n)){if(-1!==t.indexOf(n))continue;r[n]=e[n]}return r}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],-1===t.indexOf(r)&&{}.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(i,v);p="preset"===h?d(d({},y),{},{scale:w,radius:I,border:M,lightness:A,displace:O,alpha:j,blur:T,dispersion:R,saturation:z,aberrationIntensity:G,frost:D,borderColor:W,mode:"preset",blend:"difference",x:"R",y:"B"}):{mode:h,scale:w,radius:I,border:M,lightness:A,displace:O,alpha:j,blur:T,dispersion:R,saturation:z,aberrationIntensity:G,frost:D,borderColor:W,blend:"difference",x:"R",y:"B"};var fe=t(null),pe=t(null),ve=t(null),me=t([]),ye=f(r({width:400,height:200}),2),ge=ye[0],be=ye[1],he=f(r(ee),2),xe=he[0],we=he[1],Ee=t(null);Ee.current||(Ee.current="lg-text-".concat(Math.random().toString(36).slice(2,9)));var Ie=t(null);function Ce(e){var t,r=e.trim();if(t=/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)(?:\s*,\s*(\d*\.?\d+))?\s*\)$/i.exec(r))return{r:parseInt(t[1],10),g:parseInt(t[2],10),b:parseInt(t[3],10),a:void 0!==t[4]?parseFloat(t[4]):1};if(t=/^#([0-9a-f]{3})$/i.exec(r)){var n=t[1];return{r:parseInt(n[0]+n[0],16),g:parseInt(n[1]+n[1],16),b:parseInt(n[2]+n[2],16),a:1}}if(t=/^#([0-9a-f]{4})$/i.exec(r)){var o=t[1];return{r:parseInt(o[0]+o[0],16),g:parseInt(o[1]+o[1],16),b:parseInt(o[2]+o[2],16),a:parseInt(o[3]+o[3],16)/255}}if(t=/^#([0-9a-f]{6})$/i.exec(r)){var a=t[1];return{r:parseInt(a.slice(0,2),16),g:parseInt(a.slice(2,4),16),b:parseInt(a.slice(4,6),16),a:1}}if(t=/^#([0-9a-f]{8})$/i.exec(r)){var i=t[1];return{r:parseInt(i.slice(0,2),16),g:parseInt(i.slice(2,4),16),b:parseInt(i.slice(4,6),16),a:parseInt(i.slice(6,8),16)/255}}return null}Ie.current||(Ie.current="lg-perpixel-".concat(Math.random().toString(36).slice(2,9))),n(function(){if(fe.current){var e=function(){if(fe.current){var e=fe.current.getBoundingClientRect(),t=e.width,r=e.height;0!==t&&0!==r&&be({width:t,height:r})}};e();var t=new ResizeObserver(e);return t.observe(fe.current),function(){return t.disconnect()}}},[]),n(function(){var e,t;if(X&&"perPixel"!==J){var r=function(){var e,t,r=null!==(e=null===(t=fe.current)||void 0===t?void 0:t.parentElement)&&void 0!==e?e:null;if(r){var n=function(e){for(var t=e;t;){var r=getComputedStyle(t).backgroundColor,n=r?Ce(r):null;if(n&&n.a>0)return n;t=t.parentElement}var o=getComputedStyle(document.body).backgroundColor;return o?Ce(o):null}(r);if(n){var o,a,i=(o={r:n.r,g:n.g,b:n.b},.2126*(a=[o.r,o.g,o.b].map(function(e){return e/255}).map(function(e){return e<=.03928?e/12.92:Math.pow((e+.055)/1.055,2.4)}))[0]+.7152*a[1]+.0722*a[2]<.5);we(i?Y:ee)}else we(ee)}};r();var n=function(){return r()};window.addEventListener("resize",n),window.addEventListener("scroll",n,!0);for(var o=[],a=[],i=null!==(e=null===(t=fe.current)||void 0===t?void 0:t.parentElement)&&void 0!==e?e:null;i;)a.push(i),i=i.parentElement;a.push(document.body);for(var l=0,s=a;l<s.length;l++){var c=s[l];if(c){var u=new MutationObserver(r);u.observe(c,{attributes:!0,attributeFilter:["class","style"]}),o.push(u)}}return function(){window.removeEventListener("resize",n),window.removeEventListener("scroll",n,!0),o.forEach(function(e){return e.disconnect()})}}},[X,J,Y,ee]),n(function(){if(X&&"perPixel"===J){var e=ve.current;if(e){var t=function(e){if(e.hasAttribute("data-lg-no-autotext"))return!1;if(e.hasAttribute("data-lg-autotext")||e.hasAttribute("data-lg-autotext-auto"))return!1;var t=getComputedStyle(e);return"hidden"!==t.visibility&&"none"!==t.display&&Array.from(e.childNodes).some(function(e){return e.nodeType===Node.TEXT_NODE&&!!e.textContent&&e.textContent.trim().length>0})};!function(){for(var r=e.querySelectorAll("*"),n=0,o=Array.from(r);n<o.length;n++){var a=o[n];t(a)&&a.setAttribute("data-lg-autotext-auto","")}}();var r=new MutationObserver(function(e){var r,n=l(e);try{for(n.s();!(r=n.n()).done;){var o=r.value;if("childList"===o.type)o.addedNodes.forEach(function(e){if(1===e.nodeType){var r=e;t(r)&&r.setAttribute("data-lg-autotext-auto",""),r.querySelectorAll("*").forEach(function(e){var r=e;t(r)&&r.setAttribute("data-lg-autotext-auto","")})}});else if("attributes"===o.type){var a=o.target;t(a)&&a.setAttribute("data-lg-autotext-auto","")}}}catch(e){n.e(e)}finally{n.f()}});return r.observe(e,{subtree:!0,childList:!0,attributes:!0,attributeFilter:["style","class"]}),function(){r.disconnect(),e.querySelectorAll("[data-lg-autotext-auto]").forEach(function(e){return e.removeAttribute("data-lg-autotext-auto")})}}}},[X,J,Q]),n(function(){if(X&&"perPixel"===J&&fe.current&&pe.current){var e=0,t=function(){var e;if(fe.current&&pe.current){!function(){var e,t=null!==(e=ve.current)&&void 0!==e?e:fe.current,r="".concat(Q,", [data-lg-autotext], [data-lg-autotext-auto]"),n=Array.from(t.querySelectorAll(r));me.current=me.current.filter(function(e){var t=e.getAttribute("data-lg-mirror-for");return!!n.some(function(e){return e.dataset.lgMirrorId===t})||(e.remove(),!1)});for(var o=function(){var e=i[a];if(e.dataset.lgMirrorId||(e.dataset.lgMirrorId=Math.random().toString(36).slice(2,9)),me.current.find(function(t){return t.getAttribute("data-lg-mirror-for")===e.dataset.lgMirrorId}))return 1;var t=document.createElement("span");t.setAttribute("data-lg-mirror",""),t.setAttribute("data-lg-mirror-for",e.dataset.lgMirrorId),t.style.position="fixed",t.style.pointerEvents="none",t.style.mixBlendMode="difference",t.style.color="#fff",t.style.whiteSpace="pre-wrap",t.style.zIndex="2147483647",document.body.appendChild(t),me.current.push(t)},a=0,i=n;a<i.length;a++)o()}();for(var t=fe.current.getBoundingClientRect(),r=null!==(e=ve.current)&&void 0!==e?e:fe.current,n="".concat(Q,", [data-lg-autotext], [data-lg-autotext-auto]"),o=Array.from(r.querySelectorAll(n)),a=["linear-gradient(#fff 0 0)"],i=["0 0"],l=["100% 100%"],s=["no-repeat"],c=0,u=o;c<u.length;c++){var d=u[c].getBoundingClientRect(),f=Math.max(0,d.left-t.left),p=Math.max(0,d.top-t.top),v=Math.max(0,Math.min(t.right,d.right)-Math.max(t.left,d.left)),m=Math.max(0,Math.min(t.bottom,d.bottom)-Math.max(t.top,d.top));v<=0||m<=0||(a.push("linear-gradient(#000 0 0)"),i.push("".concat(f,"px ").concat(p,"px")),l.push("".concat(v,"px ").concat(m,"px")),s.push("no-repeat"))}var y=a.join(","),g=i.join(","),b=l.join(","),h=s.join(","),x=new Array(Math.max(0,a.length-1)).fill("exclude").join(","),w=new Array(Math.max(0,a.length-1)).fill("xor").join(","),E=pe.current;E.style.setProperty("mask-image",y),E.style.setProperty("mask-position",g),E.style.setProperty("mask-size",b),E.style.setProperty("mask-repeat",h),x&&E.style.setProperty("mask-composite",x),w&&E.style.setProperty("-webkit-mask-composite",w);for(var I=function(){var e=M[C],t=e.dataset.lgMirrorId,r=me.current.find(function(e){return e.getAttribute("data-lg-mirror-for")===t});if(!r)return 1;var n=e.getBoundingClientRect(),o=getComputedStyle(e);r.textContent=e.textContent||"",r.style.left="".concat(n.left,"px"),r.style.top="".concat(n.top,"px"),r.style.width="".concat(n.width,"px"),r.style.height="".concat(n.height,"px"),r.style.font=o.font,r.style.lineHeight=o.lineHeight,r.style.letterSpacing=o.letterSpacing,r.style.textTransform=o.textTransform,r.style.textShadow="none",r.style.textAlign=o.textAlign,r.style.display="flex",r.style.alignItems=o.display.includes("flex")?o.alignItems:"center",r.style.justifyContent=o.display.includes("flex")?o.justifyContent:"center"},C=0,M=o;C<M.length;C++)I();for(var P=0,A=o;P<A.length;P++){A[P].style.setProperty("color","transparent","important")}}},r=function(){e||(e=requestAnimationFrame(function(){e=0,t()}))};t();var n=new ResizeObserver(function(){return r()});n.observe(fe.current);var o=function(){for(var e,t=null!==(e=ve.current)&&void 0!==e?e:fe.current,r="".concat(Q,", [data-lg-autotext], [data-lg-autotext-auto]"),o=0,a=Array.from(t.querySelectorAll(r));o<a.length;o++){var i=a[o];n.observe(i)}};o();var a=new MutationObserver(function(e){e.some(function(e){return!(pe.current&&e.target===pe.current&&"style"===e.attributeName)})&&(r(),o())});a.observe(fe.current,{subtree:!0,childList:!0,attributes:!0,attributeFilter:["style","class"]});var i=function(){return r()},s=function(){return r()};return window.addEventListener("scroll",i,!0),window.addEventListener("pointermove",s,!0),window.addEventListener("resize",s),function(){n.disconnect(),a.disconnect(),window.removeEventListener("scroll",i,!0),window.removeEventListener("pointermove",s,!0),window.removeEventListener("resize",s),e&&cancelAnimationFrame(e),pe.current&&(pe.current.style.removeProperty("mask-image"),pe.current.style.removeProperty("mask-position"),pe.current.style.removeProperty("mask-size"),pe.current.style.removeProperty("mask-repeat"),pe.current.style.removeProperty("mask-composite"),pe.current.style.removeProperty("-webkit-mask-composite"));var t=fe.current;if(t)for(var r=0,o=Array.from(t.querySelectorAll(Q));r<o.length;r++){o[r].style.removeProperty("color")}var c,u=l(me.current);try{for(u.s();!(c=u.n()).done;){c.value.remove()}}catch(e){u.e(e)}finally{u.f()}me.current=[]}}},[X,J,Q]);var Me=Math.min(p.radius,ge.width/2,ge.height/2),Pe=o(function(){var e=ge.width,t=ge.height,r=e/2,n=t/2,o=Math.min(r,n)*(.5*p.border),a=Math.min(p.radius,e/2,t/2)/2,i='\n <svg viewBox="0 0 '.concat(r," ").concat(n,'" xmlns="http://www.w3.org/2000/svg">\n <defs>\n <linearGradient id="red" x1="100%" y1="0%" x2="0%" y2="0%">\n <stop offset="0%" stop-color="#0000"/>\n <stop offset="100%" stop-color="red"/>\n </linearGradient>\n <linearGradient id="blue" x1="0%" y1="0%" x2="0%" y2="100%">\n <stop offset="0%" stop-color="#0000"/>\n <stop offset="100%" stop-color="blue"/>\n </linearGradient>\n </defs>\n <rect x="0" y="0" width="').concat(r,'" height="').concat(n,'" fill="black"/>\n <rect x="0" y="0" width="').concat(r,'" height="').concat(n,'" rx="').concat(a,'" fill="url(#red)" />\n <rect x="0" y="0" width="').concat(r,'" height="').concat(n,'" rx="').concat(a,'" fill="url(#blue)" style="mix-blend-mode: ').concat(p.blend,'" />\n <rect x="').concat(o,'" y="').concat(o,'" width="').concat(r-2*o,'" height="').concat(n-2*o,'" rx="').concat(a,'" fill="hsl(0 0% ').concat(p.lightness,"% / ").concat(p.alpha,')" style="filter:blur(').concat(p.displace,'px)" />\n </svg>\n '),l=encodeURIComponent(i);return"data:image/svg+xml,".concat(l)},[ge,p]),Ae=a(),Se="liquid-glass-filter-".concat(Ae),Oe=H&&m(H)?H:"hsl(0 0% 100% / ".concat(p.frost,")");H&&!m(H)&&console.warn("[LiquidGlass] `glassColor` must be semi-transparent (alpha between 0 and 1). Falling back to frost-based color.");var ke=function(){if("undefined"==typeof navigator||"undefined"==typeof window)return!1;var e=navigator.userAgent||"",t=navigator.vendor||"",r=/Android/i.test(e),n=/(iPad|iPhone|iPod)/i.test(e),o=/Macintosh/i.test(e)&&navigator.maxTouchPoints>1,a=/Apple/i.test(t),i=void 0!==window.webkit,l=/Mobile/i.test(e);return!r&&(n||o)&&a&&i&&l}(),je=ke&&"auto"===ue?Math.max(T,se):T,Be=ke&&"auto"===ue?"blur(".concat(je,"px) saturate(").concat(p.saturation,"%)"):"saturate(".concat(p.saturation,"%) url(#").concat(Se,")"),Te={width:"100%",height:"100%",borderRadius:Me,position:"absolute",zIndex:1,background:X&&"perPixel"===J?"transparent":Oe,backdropFilter:Be,WebkitBackdropFilter:Be,overflow:"hidden"},Le={position:"absolute",inset:0,borderRadius:Me,zIndex:2,pointerEvents:"none",background:"linear-gradient(315deg, ".concat(p.borderColor," 0%, rgba(120, 120, 120, 0) 30%, rgba(120, 120, 120, 0) 70%, ").concat(p.borderColor," 100%) border-box"),mask:"linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0)",maskComposite:"exclude",WebkitMask:"linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0)",WebkitMaskComposite:"xor",border:"1px solid transparent"},Re=d({width:"100%",height:"100%",position:"relative"},ie);return e.createElement("div",c({ref:fe,className:oe,style:Re},de),e.createElement("div",{style:Te,ref:pe},e.createElement("svg",{className:"liquid-glass-filter",style:{width:"100%",height:"100%",pointerEvents:"none",position:"absolute",inset:0},xmlns:"http://www.w3.org/2000/svg"},e.createElement("defs",null,e.createElement("filter",{id:Se,colorInterpolationFilters:"sRGB"},e.createElement("feImage",{href:Pe,x:"0",y:"0",width:"100%",height:"100%",result:"map"}),e.createElement("feDisplacementMap",{in:"SourceGraphic",in2:"map",scale:p.scale+p.dispersion*p.aberrationIntensity,xChannelSelector:p.x,yChannelSelector:p.y,result:"dispRed"}),e.createElement("feColorMatrix",{in:"dispRed",type:"matrix",values:"1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0",result:"red"}),e.createElement("feDisplacementMap",{in:"SourceGraphic",in2:"map",scale:p.scale,xChannelSelector:p.x,yChannelSelector:p.y,result:"dispGreen"}),e.createElement("feColorMatrix",{in:"dispGreen",type:"matrix",values:"0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 1 0",result:"green"}),e.createElement("feDisplacementMap",{in:"SourceGraphic",in2:"map",scale:p.scale-p.dispersion*p.aberrationIntensity,xChannelSelector:p.x,yChannelSelector:p.y,result:"dispBlue"}),e.createElement("feColorMatrix",{in:"dispBlue",type:"matrix",values:"0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 1 0",result:"blue"}),e.createElement("feBlend",{in:"red",in2:"green",mode:"screen",result:"rg"}),e.createElement("feBlend",{in:"rg",in2:"blue",mode:"screen",result:"output"}),e.createElement("feGaussianBlur",{in:"output",stdDeviation:p.blur}))))),e.createElement("div",{className:"liquid-glass-border",style:Le}),g&&e.createElement("div",{style:{position:"relative",zIndex:3,width:"100%",height:"100%",color:X&&"perPixel"!==J?xe:void 0,transition:"color 300ms ease"},ref:ve,className:[re&&X&&"perPixel"!==J&&null!==(s=Ee.current)&&void 0!==s?s:"",X&&"perPixel"===J&&null!==(u=Ie.current)&&void 0!==u?u:""].filter(Boolean).join(" ")||void 0},re&&X&&"perPixel"!==J&&e.createElement("style",null,"\n .".concat(Ee.current,", .").concat(Ee.current," * { transition: color 300ms ease; }\n .").concat(Ee.current," { color: ").concat(xe," !important; }\n .").concat(Ee.current," * { color: ").concat(xe," !important; }\n ")),X&&"perPixel"===J&&e.createElement("style",null,"\n .".concat(Ie.current," ").concat(Q,",\n .").concat(Ie.current," [data-lg-autotext],\n .").concat(Ie.current," [data-lg-autotext-auto] {\n position: relative;\n z-index: 4;\n color: #fff !important;\n mix-blend-mode: difference !important;\n filter: grayscale(1) contrast(1000) !important;\n transition: filter 200ms ease, color 200ms ease;\n }\n ")),g))}g.displayName="LiquidGlass";export{g as LiquidGlass,g as default};
//# sourceMappingURL=index.esm.js.map