simple-liquid-glass
Version:
A React component for creating liquid glass morphism effects with customizable distortion and blur
3 lines (2 loc) • 20 kB
JavaScript
;Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function t(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 r(e,t){var r="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!r){if(Array.isArray(e)||(r=s(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 n(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 o(){return o=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},o.apply(null,arguments)}function a(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 i(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?a(Object(r),!0).forEach(function(t){n(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):a(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}function l(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)||s(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 s(e,r){if(e){if("string"==typeof e)return t(e,r);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?t(e,r):void 0}}var c=["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 u(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 d={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 f(t){var n,a,s,f=t.children,p=t.mode,v=void 0===p?"preset":p,m=t.scale,y=void 0===m?160:m,g=t.radius,b=void 0===g?50:g,h=t.border,x=void 0===h?.05:h,w=t.lightness,E=void 0===w?53:w,I=t.displace,M=void 0===I?5:I,C=t.alpha,P=void 0===C?.9:C,S=t.blur,A=void 0===S?0:S,O=t.dispersion,k=void 0===O?50:O,j=t.saturation,B=void 0===j?140:j,R=t.aberrationIntensity,L=void 0===R?2:R,T=t.frost,q=void 0===T?.1:T,G=t.borderColor,z=void 0===G?"rgba(120, 120, 120, 0.7)":G,F=t.glassColor,N=t.autoTextColor,D=void 0!==N&&N,$=t.autoTextColorMode,W=void 0===$?"global":$,_=t.perPixelTargetSelector,H=void 0===_?"[data-lg-autotext]":_,U=t.textOnDark,X=void 0===U?"#ffffff":U,J=t.textOnLight,K=void 0===J?"#111111":J,Q=t.forceTextColor,V=void 0!==Q&&Q,Y=t.className,Z=void 0===Y?"":Y,ee=t.style,te=void 0===ee?{}:ee,re=t.iosMinBlur,ne=void 0===re?2:re,oe=t.iosBlurMode,ae=void 0===oe?"auto":oe,ie=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}(t,c);s="preset"===v?i(i({},d),{},{scale:y,radius:b,border:x,lightness:E,displace:M,alpha:P,blur:A,dispersion:k,saturation:B,aberrationIntensity:L,frost:q,borderColor:z,mode:"preset",blend:"difference",x:"R",y:"B"}):{mode:v,scale:y,radius:b,border:x,lightness:E,displace:M,alpha:P,blur:A,dispersion:k,saturation:B,aberrationIntensity:L,frost:q,borderColor:z,blend:"difference",x:"R",y:"B"};var le=e.useRef(null),se=e.useRef(null),ce=e.useRef(null),ue=e.useRef([]),de=l(e.useState({width:400,height:200}),2),fe=de[0],pe=de[1],ve=l(e.useState(K),2),me=ve[0],ye=ve[1],ge=e.useRef(null);ge.current||(ge.current="lg-text-".concat(Math.random().toString(36).slice(2,9)));var be=e.useRef(null);function he(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}be.current||(be.current="lg-perpixel-".concat(Math.random().toString(36).slice(2,9))),e.useEffect(function(){if(le.current){var e=function(){if(le.current){var e=le.current.getBoundingClientRect(),t=e.width,r=e.height;0!==t&&0!==r&&pe({width:t,height:r})}};e();var t=new ResizeObserver(e);return t.observe(le.current),function(){return t.disconnect()}}},[]),e.useEffect(function(){var e,t;if(D&&"perPixel"!==W){var r=function(){var e,t,r=null!==(e=null===(t=le.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?he(r):null;if(n&&n.a>0)return n;t=t.parentElement}var o=getComputedStyle(document.body).backgroundColor;return o?he(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);ye(i?X:K)}else ye(K)}};r();var n=function(){return r()};window.addEventListener("resize",n),window.addEventListener("scroll",n,!0);for(var o=[],a=[],i=null!==(e=null===(t=le.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()})}}},[D,W,X,K]),e.useEffect(function(){if(D&&"perPixel"===W){var e=ce.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 n=new MutationObserver(function(e){var n,o=r(e);try{for(o.s();!(n=o.n()).done;){var a=n.value;if("childList"===a.type)a.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"===a.type){var i=a.target;t(i)&&i.setAttribute("data-lg-autotext-auto","")}}}catch(e){o.e(e)}finally{o.f()}});return n.observe(e,{subtree:!0,childList:!0,attributes:!0,attributeFilter:["style","class"]}),function(){n.disconnect(),e.querySelectorAll("[data-lg-autotext-auto]").forEach(function(e){return e.removeAttribute("data-lg-autotext-auto")})}}}},[D,W,H]),e.useEffect(function(){if(D&&"perPixel"===W&&le.current&&se.current){var e=0,t=function(){var e;if(le.current&&se.current){!function(){var e,t=null!==(e=ce.current)&&void 0!==e?e:le.current,r="".concat(H,", [data-lg-autotext], [data-lg-autotext-auto]"),n=Array.from(t.querySelectorAll(r));ue.current=ue.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)),ue.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),ue.current.push(t)},a=0,i=n;a<i.length;a++)o()}();for(var t=le.current.getBoundingClientRect(),r=null!==(e=ce.current)&&void 0!==e?e:le.current,n="".concat(H,", [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=se.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=C[M],t=e.dataset.lgMirrorId,r=ue.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"},M=0,C=o;M<C.length;M++)I();for(var P=0,S=o;P<S.length;P++){S[P].style.setProperty("color","transparent","important")}}},n=function(){e||(e=requestAnimationFrame(function(){e=0,t()}))};t();var o=new ResizeObserver(function(){return n()});o.observe(le.current);var a=function(){for(var e,t=null!==(e=ce.current)&&void 0!==e?e:le.current,r="".concat(H,", [data-lg-autotext], [data-lg-autotext-auto]"),n=0,a=Array.from(t.querySelectorAll(r));n<a.length;n++){var i=a[n];o.observe(i)}};a();var i=new MutationObserver(function(e){e.some(function(e){return!(se.current&&e.target===se.current&&"style"===e.attributeName)})&&(n(),a())});i.observe(le.current,{subtree:!0,childList:!0,attributes:!0,attributeFilter:["style","class"]});var l=function(){return n()},s=function(){return n()};return window.addEventListener("scroll",l,!0),window.addEventListener("pointermove",s,!0),window.addEventListener("resize",s),function(){o.disconnect(),i.disconnect(),window.removeEventListener("scroll",l,!0),window.removeEventListener("pointermove",s,!0),window.removeEventListener("resize",s),e&&cancelAnimationFrame(e),se.current&&(se.current.style.removeProperty("mask-image"),se.current.style.removeProperty("mask-position"),se.current.style.removeProperty("mask-size"),se.current.style.removeProperty("mask-repeat"),se.current.style.removeProperty("mask-composite"),se.current.style.removeProperty("-webkit-mask-composite"));var t=le.current;if(t)for(var n=0,a=Array.from(t.querySelectorAll(H));n<a.length;n++){a[n].style.removeProperty("color")}var c,u=r(ue.current);try{for(u.s();!(c=u.n()).done;){c.value.remove()}}catch(e){u.e(e)}finally{u.f()}ue.current=[]}}},[D,W,H]);var xe=Math.min(s.radius,fe.width/2,fe.height/2),we=e.useMemo(function(){var e=fe.width,t=fe.height,r=e/2,n=t/2,o=Math.min(r,n)*(.5*s.border),a=Math.min(s.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(s.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(s.lightness,"% / ").concat(s.alpha,')" style="filter:blur(').concat(s.displace,'px)" />\n </svg>\n '),l=encodeURIComponent(i);return"data:image/svg+xml,".concat(l)},[fe,s]),Ee=e.useId(),Ie="liquid-glass-filter-".concat(Ee),Me=F&&u(F)?F:"hsl(0 0% 100% / ".concat(s.frost,")");F&&!u(F)&&console.warn("[LiquidGlass] `glassColor` must be semi-transparent (alpha between 0 and 1). Falling back to frost-based color.");var Ce=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}(),Pe=Ce&&"auto"===ae?Math.max(A,ne):A,Se=Ce&&"auto"===ae?"blur(".concat(Pe,"px) saturate(").concat(s.saturation,"%)"):"saturate(".concat(s.saturation,"%) url(#").concat(Ie,")"),Ae={width:"100%",height:"100%",borderRadius:xe,position:"absolute",zIndex:1,background:D&&"perPixel"===W?"transparent":Me,backdropFilter:Se,WebkitBackdropFilter:Se,overflow:"hidden"},Oe={position:"absolute",inset:0,borderRadius:xe,zIndex:2,pointerEvents:"none",background:"linear-gradient(315deg, ".concat(s.borderColor," 0%, rgba(120, 120, 120, 0) 30%, rgba(120, 120, 120, 0) 70%, ").concat(s.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"},ke=i({width:"100%",height:"100%",position:"relative"},te);return e.createElement("div",o({ref:le,className:Z,style:ke},ie),e.createElement("div",{style:Ae,ref:se},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:Ie,colorInterpolationFilters:"sRGB"},e.createElement("feImage",{href:we,x:"0",y:"0",width:"100%",height:"100%",result:"map"}),e.createElement("feDisplacementMap",{in:"SourceGraphic",in2:"map",scale:s.scale+s.dispersion*s.aberrationIntensity,xChannelSelector:s.x,yChannelSelector:s.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:s.scale,xChannelSelector:s.x,yChannelSelector:s.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:s.scale-s.dispersion*s.aberrationIntensity,xChannelSelector:s.x,yChannelSelector:s.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:s.blur}))))),e.createElement("div",{className:"liquid-glass-border",style:Oe}),f&&e.createElement("div",{style:{position:"relative",zIndex:3,width:"100%",height:"100%",color:D&&"perPixel"!==W?me:void 0,transition:"color 300ms ease"},ref:ce,className:[V&&D&&"perPixel"!==W&&null!==(n=ge.current)&&void 0!==n?n:"",D&&"perPixel"===W&&null!==(a=be.current)&&void 0!==a?a:""].filter(Boolean).join(" ")||void 0},V&&D&&"perPixel"!==W&&e.createElement("style",null,"\n .".concat(ge.current,", .").concat(ge.current," * { transition: color 300ms ease; }\n .").concat(ge.current," { color: ").concat(me," !important; }\n .").concat(ge.current," * { color: ").concat(me," !important; }\n ")),D&&"perPixel"===W&&e.createElement("style",null,"\n .".concat(be.current," ").concat(H,",\n .").concat(be.current," [data-lg-autotext],\n .").concat(be.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 ")),f))}f.displayName="LiquidGlass",exports.LiquidGlass=f,exports.default=f;
//# sourceMappingURL=index.cjs.map