@gradient-ui/gradient-engine 0.6.0 → 2.0.0

package/dist/effects.cjs

@@ -1,23 +1,23 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("./utils-D83DMCMa.cjs"),D=require("./css-BVHXLMRl.cjs"),S=require("./types-BMLEvdee.cjs"),_="http://www.w3.org/2000/svg",k="http://www.w3.org/1999/xhtml",O=r=>r.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;"),X={soft:{blobCount:5,blur:40,contrast:18,duration:12e3,opacity:.76,scale:1.05},liquid:{blobCount:6,blur:46,contrast:22,duration:9200,opacity:.82,scale:1.18},ripple:{blobCount:7,blur:34,contrast:20,duration:7200,opacity:.78,scale:.94}},Y=new Set(S.GRADIENT_MORPH_BLEND_MODES),G=r=>Y.has(r),N=r=>r&&G(r)?r:S.DEFAULT_GRADIENT_MORPH_BLEND_MODE,y=(r={})=>{const a=X[r.preset??"soft"];return{blobCount:Math.max(2,Math.round(r.blobCount??a.blobCount)),blendMode:N(r.blendMode),blobOpacity:c.clamp(r.blobOpacity??1,0,1.6),blur:c.clamp(r.blur??a.blur,0,80),contrast:c.clamp(r.contrast??a.contrast,0,36),duration:r.duration??a.duration,id:r.id??"g-gradient-morph",opacity:c.clamp(r.opacity??a.opacity),scale:c.clamp(r.scale??a.scale,.4,2)}},L=(r,a)=>{var t,i;return((t=r.stops[a%r.stops.length])==null?void 0:t.color)??((i=r.stops[0])==null?void 0:i.color)??"currentColor"},E=r=>{if(typeof r=="number")return r;const a=Number.parseFloat(r);return Number.isFinite(a)?a:9e3},A=(r,a)=>{const t=Math.sin((r+1)*12.9898+a*78.233)*43758.5453;return t-Math.floor(t)},l=(r,a,t,i)=>t+A(r,a)*(i-t),h=r=>Number(r.toFixed(3)),w=[{animationName:"g-gradient-morph-drift",dx:20,dx2:8,dy:-8,dy2:16,originX:"50%",originY:"50%",scaleMid:1.16,scaleTo:1.04,x:6,y:58},{animationName:"g-gradient-morph-orbit",dx:-18,dx2:10,dy:18,dy2:-10,originX:"24%",originY:"68%",scaleMid:.96,scaleTo:1.12,x:44,y:20},{animationName:"g-gradient-morph-float",dx:-16,dx2:-8,dy:-12,dy2:18,originX:"50%",originY:"50%",scaleMid:1.2,scaleTo:1.08,x:74,y:58},{animationName:"g-gradient-morph-orbit",dx:12,dx2:-20,dy:14,dy2:6,originX:"70%",originY:"30%",scaleMid:1.04,scaleTo:1.18,x:88,y:25},{animationName:"g-gradient-morph-drift",dx:24,dx2:-12,dy:-16,dy2:-8,originX:"50%",originY:"50%",scaleMid:1.12,scaleTo:.98,x:30,y:78},{animationName:"g-gradient-morph-float",dx:-22,dx2:14,dy:10,dy2:-18,originX:"50%",originY:"50%",scaleMid:.94,scaleTo:1.1,x:104,y:82},{animationName:"g-gradient-morph-orbit",dx:14,dx2:-16,dy:-22,dy2:10,originX:"35%",originY:"35%",scaleMid:1.18,scaleTo:1.02,x:55,y:64},{animationName:"g-gradient-morph-drift",dx:-18,dx2:18,dy:-14,dy2:14,originX:"50%",originY:"50%",scaleMid:1.08,scaleTo:.96,x:18,y:24}],v=(r,a={})=>{const{blobCount:t,blobOpacity:i,duration:g,scale:d}=y(a),e=E(g);return Array.from({length:t},(m,n)=>{const s=w[n%w.length],p=l(n,1,.88,1.16),o=l(n,2,.86,1.24),$=c.clamp(l(n,3,.72,1)*i),f=l(n,4,0,4),x=(34+n%4*9)*d*p;return{animationName:s.animationName,blur:h(f),color:L(r,n),delay:Math.round(n*-.19*e-l(n,5,0,900)),dx:h(s.dx*l(n,6,.84,1.18)),dx2:h(s.dx2*l(n,7,.82,1.22)),dy:h(s.dy*l(n,8,.84,1.18)),dy2:h(s.dy2*l(n,9,.82,1.22)),duration:Math.round(e*(1+n%3*.11)*o),opacity:h($),originX:s.originX,originY:s.originY,rotateMid:Math.round(l(n,10,95,165)),rotateTo:Math.round(l(n,11,220,310)),scaleMid:s.scaleMid,scaleTo:s.scaleTo,size:h(x),x:s.x,y:s.y}})},M=(r={})=>`url(#${y(r).id}) blur(${y(r).blur}px)`,B=(r={})=>{const{blur:a,contrast:t,id:i}=y(r),g=Math.max(2,Math.round(a*.25)),d=-(t*.45),e=t<=0?"":`
-    <feColorMatrix in="g-gradient-morph-blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 ${t} ${d}" result="g-gradient-morph-goo" />
-    <feBlend in="SourceGraphic" in2="g-gradient-morph-goo" />`;return`<svg xmlns="${_}" width="0" height="0" aria-hidden="true" focusable="false" style="position:absolute;overflow:hidden;inline-size:0;block-size:0;">
-  <filter id="${i}" x="-30%" y="-30%" width="160%" height="160%" color-interpolation-filters="sRGB">
-    <feGaussianBlur in="SourceGraphic" stdDeviation="${g}" result="g-gradient-morph-blur" />${e}
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const utils=require("./utils-Bry9BTmj.cjs"),css=require("./css-CREh0Awz.cjs"),types=require("./types-BFkUlDkW.cjs"),SVG_NAMESPACE="http://www.w3.org/2000/svg",XHTML_NAMESPACE="http://www.w3.org/1999/xhtml",escapeAttribute=value=>value.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;"),morphPresets={soft:{blobCount:5,blur:40,contrast:18,duration:12e3,opacity:.76,scale:1.05},liquid:{blobCount:6,blur:46,contrast:22,duration:9200,opacity:.82,scale:1.18},ripple:{blobCount:7,blur:34,contrast:20,duration:7200,opacity:.78,scale:.94}},gradientMorphBlendModeSet=new Set(types.GRADIENT_MORPH_BLEND_MODES),isGradientMorphBlendMode=value=>gradientMorphBlendModeSet.has(value),resolveGradientMorphBlendMode=value=>value&&isGradientMorphBlendMode(value)?value:types.DEFAULT_GRADIENT_MORPH_BLEND_MODE,getMorphOptions=(options={})=>{const preset=morphPresets[options.preset??"soft"];return{blobCount:Math.max(2,Math.round(options.blobCount??preset.blobCount)),blendMode:resolveGradientMorphBlendMode(options.blendMode),blobOpacity:utils.clamp(options.blobOpacity??1,0,1.6),blur:utils.clamp(options.blur??preset.blur,0,80),contrast:utils.clamp(options.contrast??preset.contrast,0,36),duration:options.duration??preset.duration,id:options.id??"g-gradient-morph",opacity:utils.clamp(options.opacity??preset.opacity),scale:utils.clamp(options.scale??preset.scale,.4,2)}},getBlobColor=(model,index)=>{var _a,_b;return((_a=model.stops[index%model.stops.length])==null?void 0:_a.color)??((_b=model.stops[0])==null?void 0:_b.color)??"currentColor"},getDurationMs=duration=>{if(typeof duration=="number")return duration;const parsed=Number.parseFloat(duration);return Number.isFinite(parsed)?parsed:9e3},getNoise=(index,salt)=>{const value=Math.sin((index+1)*12.9898+salt*78.233)*43758.5453;return value-Math.floor(value)},getNoiseRange=(index,salt,min,max)=>min+getNoise(index,salt)*(max-min),round=value=>Number(value.toFixed(3)),blobPaths=[{animationName:"g-gradient-morph-drift",dx:20,dx2:8,dy:-8,dy2:16,originX:"50%",originY:"50%",scaleMid:1.16,scaleTo:1.04,x:6,y:58},{animationName:"g-gradient-morph-orbit",dx:-18,dx2:10,dy:18,dy2:-10,originX:"24%",originY:"68%",scaleMid:.96,scaleTo:1.12,x:44,y:20},{animationName:"g-gradient-morph-float",dx:-16,dx2:-8,dy:-12,dy2:18,originX:"50%",originY:"50%",scaleMid:1.2,scaleTo:1.08,x:74,y:58},{animationName:"g-gradient-morph-orbit",dx:12,dx2:-20,dy:14,dy2:6,originX:"70%",originY:"30%",scaleMid:1.04,scaleTo:1.18,x:88,y:25},{animationName:"g-gradient-morph-drift",dx:24,dx2:-12,dy:-16,dy2:-8,originX:"50%",originY:"50%",scaleMid:1.12,scaleTo:.98,x:30,y:78},{animationName:"g-gradient-morph-float",dx:-22,dx2:14,dy:10,dy2:-18,originX:"50%",originY:"50%",scaleMid:.94,scaleTo:1.1,x:104,y:82},{animationName:"g-gradient-morph-orbit",dx:14,dx2:-16,dy:-22,dy2:10,originX:"35%",originY:"35%",scaleMid:1.18,scaleTo:1.02,x:55,y:64},{animationName:"g-gradient-morph-drift",dx:-18,dx2:18,dy:-14,dy2:14,originX:"50%",originY:"50%",scaleMid:1.08,scaleTo:.96,x:18,y:24}],createGradientMorphBlobs=(model,options={})=>{const{blobCount,blobOpacity,duration,scale}=getMorphOptions(options),durationMs=getDurationMs(duration);return Array.from({length:blobCount},(_,index)=>{const path=blobPaths[index%blobPaths.length],sizeJitter=getNoiseRange(index,1,.88,1.16),durationJitter=getNoiseRange(index,2,.86,1.24),opacity=utils.clamp(getNoiseRange(index,3,.72,1)*blobOpacity),blur=getNoiseRange(index,4,0,4),size=(34+index%4*9)*scale*sizeJitter;return{animationName:path.animationName,blur:round(blur),color:getBlobColor(model,index),delay:Math.round(index*-.19*durationMs-getNoiseRange(index,5,0,900)),dx:round(path.dx*getNoiseRange(index,6,.84,1.18)),dx2:round(path.dx2*getNoiseRange(index,7,.82,1.22)),dy:round(path.dy*getNoiseRange(index,8,.84,1.18)),dy2:round(path.dy2*getNoiseRange(index,9,.82,1.22)),duration:Math.round(durationMs*(1+index%3*.11)*durationJitter),opacity:round(opacity),originX:path.originX,originY:path.originY,rotateMid:Math.round(getNoiseRange(index,10,95,165)),rotateTo:Math.round(getNoiseRange(index,11,220,310)),scaleMid:path.scaleMid,scaleTo:path.scaleTo,size:round(size),x:path.x,y:path.y}})},toGradientMorphFilter=(options={})=>`url(#${getMorphOptions(options).id}) blur(${getMorphOptions(options).blur}px)`,toGradientMorphFilterMarkup=(options={})=>{const{blur,contrast,id}=getMorphOptions(options),gooBlur=Math.max(2,Math.round(blur*.25)),alphaOffset=-(contrast*.45),matrix=contrast<=0?"":`
+    <feColorMatrix in="g-gradient-morph-blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 ${contrast} ${alphaOffset}" result="g-gradient-morph-goo" />
+    <feBlend in="SourceGraphic" in2="g-gradient-morph-goo" />`;return`<svg xmlns="${SVG_NAMESPACE}" width="0" height="0" aria-hidden="true" focusable="false" style="position:absolute;overflow:hidden;inline-size:0;block-size:0;">
+  <filter id="${id}" x="-30%" y="-30%" width="160%" height="160%" color-interpolation-filters="sRGB">
+    <feGaussianBlur in="SourceGraphic" stdDeviation="${gooBlur}" result="g-gradient-morph-blur" />${matrix}
   </filter>
-</svg>`},P=(r,a={})=>{const t=a.selector??".g-gradient-morph",{blendMode:i,opacity:g}=y(a),d=v(r,a);return`${t} {
+</svg>`},toGradientMorphCSS=(model,options={})=>{const selector=options.selector??".g-gradient-morph",{blendMode,opacity}=getMorphOptions(options),blobs=createGradientMorphBlobs(model,options);return`${selector} {
 	position: relative;
 	overflow: hidden;
 }
 
-${t}__blobs {
+${selector}__blobs {
 	position: absolute;
 	inset: -18%;
-	opacity: ${g};
-	filter: ${M(a)};
-	mix-blend-mode: ${i};
+	opacity: ${opacity};
+	filter: ${toGradientMorphFilter(options)};
+	mix-blend-mode: ${blendMode};
 }
 
-${t}__blob {
+${selector}__blob {
 	position: absolute;
 	transform: translate(-50%, -50%);
 	transform-origin: var(--g-gradient-morph-origin-x) var(--g-gradient-morph-origin-y);
@@ -28,28 +28,28 @@ ${t}__blob {
 	animation: var(--g-gradient-morph-animation) var(--g-gradient-morph-duration, 9000ms) ease-in-out infinite alternate;
 }
 
-${d.map((e,m)=>`${t}__blob:nth-child(${m+1}) {
-	top: ${e.y}%;
-	left: ${e.x}%;
-	width: ${e.size}%;
+${blobs.map((blob,index)=>`${selector}__blob:nth-child(${index+1}) {
+	top: ${blob.y}%;
+	left: ${blob.x}%;
+	width: ${blob.size}%;
 	aspect-ratio: 1;
-	--g-gradient-morph-blob-color: ${e.color};
-	--g-gradient-morph-x: ${e.dx}%;
-	--g-gradient-morph-x2: ${e.dx2}%;
-	--g-gradient-morph-y: ${e.dy}%;
-	--g-gradient-morph-y2: ${e.dy2}%;
-	--g-gradient-morph-origin-x: ${e.originX};
-	--g-gradient-morph-origin-y: ${e.originY};
-	--g-gradient-morph-animation: ${e.animationName};
-	--g-gradient-morph-blur: ${e.blur}px;
-	--g-gradient-morph-opacity: ${e.opacity};
-	--g-gradient-morph-rotate-mid: ${e.rotateMid}deg;
-	--g-gradient-morph-rotate-to: ${e.rotateTo}deg;
-	--g-gradient-morph-scale-mid: ${e.scaleMid};
-	--g-gradient-morph-scale: ${e.scaleTo};
-	--g-gradient-morph-delay: ${e.delay}ms;
+	--g-gradient-morph-blob-color: ${blob.color};
+	--g-gradient-morph-x: ${blob.dx}%;
+	--g-gradient-morph-x2: ${blob.dx2}%;
+	--g-gradient-morph-y: ${blob.dy}%;
+	--g-gradient-morph-y2: ${blob.dy2}%;
+	--g-gradient-morph-origin-x: ${blob.originX};
+	--g-gradient-morph-origin-y: ${blob.originY};
+	--g-gradient-morph-animation: ${blob.animationName};
+	--g-gradient-morph-blur: ${blob.blur}px;
+	--g-gradient-morph-opacity: ${blob.opacity};
+	--g-gradient-morph-rotate-mid: ${blob.rotateMid}deg;
+	--g-gradient-morph-rotate-to: ${blob.rotateTo}deg;
+	--g-gradient-morph-scale-mid: ${blob.scaleMid};
+	--g-gradient-morph-scale: ${blob.scaleTo};
+	--g-gradient-morph-delay: ${blob.delay}ms;
 	animation-delay: var(--g-gradient-morph-delay);
-	animation-duration: ${c.toCssDuration(e.duration)};
+	animation-duration: ${utils.toCssDuration(blob.duration)};
 }`).join(`
 
 `)}
@@ -94,23 +94,23 @@ ${d.map((e,m)=>`${t}__blob:nth-child(${m+1}) {
 	100% {
 		transform: translate(calc(-50% + var(--g-gradient-morph-x2)), calc(-50% + var(--g-gradient-morph-y2))) rotate(var(--g-gradient-morph-rotate-to)) scale(var(--g-gradient-morph-scale));
 	}
-}`},z=(r,a={})=>{const t=a.id??"g-gradient-morph",i=a.width??360,g=a.height??240,d=a.rx??24,e=`${t}-filter`,m=M({...a,id:e}),n=v(r,a),{blendMode:s,opacity:p}=y(a);return`<svg xmlns="${_}" viewBox="0 0 ${i} ${g}" width="${i}" height="${g}" role="img">
+}`},toGradientMorphMarkup=(model,options={})=>{const id=options.id??"g-gradient-morph",width=options.width??360,height=options.height??240,rx=options.rx??24,filterId=`${id}-filter`,filter=toGradientMorphFilter({...options,id:filterId}),blobs=createGradientMorphBlobs(model,options),{blendMode,opacity}=getMorphOptions(options);return`<svg xmlns="${SVG_NAMESPACE}" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}" role="img">
   <defs>
-    <clipPath id="${t}-clip">
-      <rect width="${i}" height="${g}" rx="${d}" />
+    <clipPath id="${id}-clip">
+      <rect width="${width}" height="${height}" rx="${rx}" />
     </clipPath>
   </defs>
-  <foreignObject width="${i}" height="${g}" clip-path="url(#${t}-clip)">
-    <div xmlns="${k}" class="g-gradient-material">
-      ${B({...a,id:`${t}-filter`})}
+  <foreignObject width="${width}" height="${height}" clip-path="url(#${id}-clip)">
+    <div xmlns="${XHTML_NAMESPACE}" class="g-gradient-material">
+      ${toGradientMorphFilterMarkup({...options,id:`${id}-filter`})}
       <style>
 .g-gradient-material {
 	position: relative;
 	overflow: hidden;
 	display: flex;
-	width: ${i}px;
-	height: ${g}px;
-	border-radius: ${d}px;
+	width: ${width}px;
+	height: ${height}px;
+	border-radius: ${rx}px;
 }
 
 .g-gradient-material__surface {
@@ -119,8 +119,8 @@ ${d.map((e,m)=>`${t}__blob:nth-child(${m+1}) {
 	display: flex;
 	width: 100%;
 	height: 100%;
-	border-radius: ${d}px;
-	background: ${O(D.toCssGradient(r))};
+	border-radius: ${rx}px;
+	background: ${escapeAttribute(css.toCssGradient(model))};
 }
 
 .g-gradient-material__morph {
@@ -130,9 +130,9 @@ ${d.map((e,m)=>`${t}__blob:nth-child(${m+1}) {
 	inset: calc(-1 * var(--g-gradient-material-morph-bleed));
 	width: calc(100% + 2 * var(--g-gradient-material-morph-bleed));
 	height: calc(100% + 2 * var(--g-gradient-material-morph-bleed));
-	opacity: ${p};
-	filter: ${m};
-	mix-blend-mode: ${s};
+	opacity: ${opacity};
+	filter: ${filter};
+	mix-blend-mode: ${blendMode};
 }
 
 .g-gradient-material__morph-blob {
@@ -147,27 +147,27 @@ ${d.map((e,m)=>`${t}__blob:nth-child(${m+1}) {
 	animation: var(--g-gradient-morph-animation) var(--g-gradient-morph-duration, 9000ms) ease-in-out infinite alternate;
 }
 
-${n.map((o,$)=>`.g-gradient-material__morph-blob:nth-child(${$+1}) {
-	left: ${o.x}%;
-	top: ${o.y}%;
-	width: ${o.size}%;
-	--g-gradient-morph-blob-color: ${o.color};
-	--g-gradient-morph-x: ${o.dx}%;
-	--g-gradient-morph-x2: ${o.dx2}%;
-	--g-gradient-morph-y: ${o.dy}%;
-	--g-gradient-morph-y2: ${o.dy2}%;
-	--g-gradient-morph-origin-x: ${o.originX};
-	--g-gradient-morph-origin-y: ${o.originY};
-	--g-gradient-morph-animation: ${o.animationName};
-	--g-gradient-morph-blur: ${o.blur}px;
-	--g-gradient-morph-opacity: ${o.opacity};
-	--g-gradient-morph-rotate-mid: ${o.rotateMid}deg;
-	--g-gradient-morph-rotate-to: ${o.rotateTo}deg;
-	--g-gradient-morph-scale-mid: ${o.scaleMid};
-	--g-gradient-morph-scale: ${o.scaleTo};
-	--g-gradient-morph-delay: ${o.delay}ms;
+${blobs.map((blob,index)=>`.g-gradient-material__morph-blob:nth-child(${index+1}) {
+	left: ${blob.x}%;
+	top: ${blob.y}%;
+	width: ${blob.size}%;
+	--g-gradient-morph-blob-color: ${blob.color};
+	--g-gradient-morph-x: ${blob.dx}%;
+	--g-gradient-morph-x2: ${blob.dx2}%;
+	--g-gradient-morph-y: ${blob.dy}%;
+	--g-gradient-morph-y2: ${blob.dy2}%;
+	--g-gradient-morph-origin-x: ${blob.originX};
+	--g-gradient-morph-origin-y: ${blob.originY};
+	--g-gradient-morph-animation: ${blob.animationName};
+	--g-gradient-morph-blur: ${blob.blur}px;
+	--g-gradient-morph-opacity: ${blob.opacity};
+	--g-gradient-morph-rotate-mid: ${blob.rotateMid}deg;
+	--g-gradient-morph-rotate-to: ${blob.rotateTo}deg;
+	--g-gradient-morph-scale-mid: ${blob.scaleMid};
+	--g-gradient-morph-scale: ${blob.scaleTo};
+	--g-gradient-morph-delay: ${blob.delay}ms;
 	animation-delay: var(--g-gradient-morph-delay);
-	animation-duration: ${c.toCssDuration(o.duration)};
+	animation-duration: ${utils.toCssDuration(blob.duration)};
 }`).join(`
 
 `)}
@@ -192,10 +192,10 @@ ${n.map((o,$)=>`.g-gradient-material__morph-blob:nth-child(${$+1}) {
       </style>
       <span class="g-gradient-material__surface">
         <span class="g-gradient-material__morph">
-          ${n.map(()=>'<span class="g-gradient-material__morph-blob"></span>').join(`
+          ${blobs.map(()=>'<span class="g-gradient-material__morph-blob"></span>').join(`
           `)}
         </span>
       </span>
     </div>
   </foreignObject>
-</svg>`},T=(r,a)=>{const t=r.stops.filter(d=>d.position>=25&&d.position<=85),i=r.stops.filter(d=>!t.includes(d));return[...t,...i].sort((d,e)=>Math.abs(d.position-50)-Math.abs(e.position-50)).slice(0,a)},F=(r,a)=>r*([1,.54,.3,.18][a]??.12),u=(r,a)=>{const t=String(r).match(/^(-?\d*\.?\d+)(.*)$/);return t?`${Math.round(Number(t[1])*a*1e3)/1e3}${t[2]||"px"}`:null},C=(r,a,t)=>u(r,1/a)??(t===0?c.toCssLength(r):"0px"),j=(r,a)=>u(r,1/Math.sqrt(a))??c.toCssLength(r),q=(r,a={})=>{var b;const t=a.x??0,i=a.y??6,g=a.blur??14,d=a.spread??-3,e=a.opacity??.24,m=Math.max(1,Math.round(a.layers??2)),n=((b=T(r,1)[0])==null?void 0:b.color)??"#000000",s=`${c.toCssLength(t)} ${c.toCssLength(i)} ${c.toCssLength(g)} ${c.toCssLength(d)} ${c.toCssColor(n,e)}`;if(m===1)return s;const p=u(t,.35)??"0px",o=u(i,.35)??"2px",$=u(g,.3)??"4px",f=u(d,.5)??"-2px",x=Math.min(.18,e*.65);return`${`${p} ${o} ${$} ${f} ${c.toCssColor("#000000",x)}`}, ${s}`},R=(r,a={})=>{const t=a.x??0,i=a.y??6,g=a.blur??14,d=a.opacity??.42,e=Math.max(1,Math.round(a.layers??2)),m=j(g,e);return T(r,e).map((n,s)=>{const p=C(t,e,s),o=C(i,e,s);return`drop-shadow(${p} ${o} ${m} ${c.toCssColor(n.color,F(d,s))})`}).join(" ")};exports.createGradientMorphBlobs=v;exports.isGradientMorphBlendMode=G;exports.resolveGradientMorphBlendMode=N;exports.toGradientBoxShadow=q;exports.toGradientDropShadow=R;exports.toGradientMorphCSS=P;exports.toGradientMorphFilter=M;exports.toGradientMorphFilterMarkup=B;exports.toGradientMorphMarkup=z;
+</svg>`},getShadowStops=(model,layers)=>{const saturatedStops=model.stops.filter(stop=>stop.position>=25&&stop.position<=85),fallbackStops=model.stops.filter(stop=>!saturatedStops.includes(stop));return[...saturatedStops,...fallbackStops].sort((first,second)=>Math.abs(first.position-50)-Math.abs(second.position-50)).slice(0,layers)},getDropShadowLayerOpacity=(opacity,index)=>opacity*([1,.54,.3,.18][index]??.12),scaleSimpleCssLength=(value,factor)=>{const match=String(value).match(/^(-?\d*\.?\d+)(.*)$/);return match?`${Math.round(Number(match[1])*factor*1e3)/1e3}${match[2]||"px"}`:null},getDistributedOffset=(value,layers,index)=>scaleSimpleCssLength(value,1/layers)??(index===0?utils.toCssLength(value):"0px"),getDistributedBlur=(value,layers)=>scaleSimpleCssLength(value,1/Math.sqrt(layers))??utils.toCssLength(value),toGradientBoxShadow=(model,options={})=>{var _a;const x=options.x??0,y=options.y??6,blur=options.blur??14,spread=options.spread??-3,opacity=options.opacity??.24,layers=Math.max(1,Math.round(options.layers??2)),dominantColor=((_a=getShadowStops(model,1)[0])==null?void 0:_a.color)??"#000000",ambientShadow=`${utils.toCssLength(x)} ${utils.toCssLength(y)} ${utils.toCssLength(blur)} ${utils.toCssLength(spread)} ${utils.toCssColor(dominantColor,opacity)}`;if(layers===1)return ambientShadow;const contactX=scaleSimpleCssLength(x,.35)??"0px",contactY=scaleSimpleCssLength(y,.35)??"2px",contactBlur=scaleSimpleCssLength(blur,.3)??"4px",contactSpread=scaleSimpleCssLength(spread,.5)??"-2px",contactOpacity=Math.min(.18,opacity*.65);return`${`${contactX} ${contactY} ${contactBlur} ${contactSpread} ${utils.toCssColor("#000000",contactOpacity)}`}, ${ambientShadow}`},toGradientDropShadow=(model,options={})=>{const x=options.x??0,y=options.y??6,blur=options.blur??14,opacity=options.opacity??.42,layers=Math.max(1,Math.round(options.layers??2)),distributedBlur=getDistributedBlur(blur,layers);return getShadowStops(model,layers).map((stop,index)=>{const distributedX=getDistributedOffset(x,layers,index),distributedY=getDistributedOffset(y,layers,index);return`drop-shadow(${distributedX} ${distributedY} ${distributedBlur} ${utils.toCssColor(stop.color,getDropShadowLayerOpacity(opacity,index))})`}).join(" ")};exports.createGradientMorphBlobs=createGradientMorphBlobs;exports.isGradientMorphBlendMode=isGradientMorphBlendMode;exports.resolveGradientMorphBlendMode=resolveGradientMorphBlendMode;exports.toGradientBoxShadow=toGradientBoxShadow;exports.toGradientDropShadow=toGradientDropShadow;exports.toGradientMorphCSS=toGradientMorphCSS;exports.toGradientMorphFilter=toGradientMorphFilter;exports.toGradientMorphFilterMarkup=toGradientMorphFilterMarkup;exports.toGradientMorphMarkup=toGradientMorphMarkup;