@gradient-ui/gradient-engine 0.5.0 → 1.0.0

package/dist/effects.cjs

@@ -1,23 +1,23 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("./utils-6iJ6IpZZ.cjs"),N="http://www.w3.org/2000/svg",G={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=(t={})=>{const r=G[t.preset??"soft"];return{blobCount:Math.max(2,Math.round(t.blobCount??r.blobCount)),blur:c.clamp(t.blur??r.blur,0,80),contrast:c.clamp(t.contrast??r.contrast,0,36),duration:t.duration??r.duration,id:t.id??"g-gradient-morph",opacity:c.clamp(t.opacity??r.opacity),scale:c.clamp(t.scale??r.scale,.4,2)}},T=(t,r)=>{var o,n;return((o=t.stops[r%t.stops.length])==null?void 0:o.color)??((n=t.stops[0])==null?void 0:n.color)??"currentColor"},X=t=>{if(typeof t=="number")return t;const r=Number.parseFloat(t);return Number.isFinite(r)?r:9e3},Y=(t,r)=>{const o=Math.sin((t+1)*12.9898+r*78.233)*43758.5453;return o-Math.floor(o)},g=(t,r,o,n)=>o+Y(t,r)*(n-o),m=t=>Number(t.toFixed(3)),M=[{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=(t,r={})=>{const{blobCount:o,duration:n,scale:d}=y(r),a=X(n);return Array.from({length:o},(s,e)=>{const i=M[e%M.length],l=g(e,1,.88,1.16),p=g(e,2,.86,1.24),u=g(e,3,.72,1),$=g(e,4,0,4),x=(34+e%4*9)*d*l;return{animationName:i.animationName,blur:m($),color:T(t,e),delay:Math.round(e*-.19*a-g(e,5,0,900)),dx:m(i.dx*g(e,6,.84,1.18)),dx2:m(i.dx2*g(e,7,.82,1.22)),dy:m(i.dy*g(e,8,.84,1.18)),dy2:m(i.dy2*g(e,9,.82,1.22)),duration:Math.round(a*(1+e%3*.11)*p),opacity:m(u),originX:i.originX,originY:i.originY,rotateMid:Math.round(g(e,10,95,165)),rotateTo:Math.round(g(e,11,220,310)),scaleMid:i.scaleMid,scaleTo:i.scaleTo,size:m(x),x:i.x,y:i.y}})},C=(t={})=>`url(#${y(t).id}) blur(${y(t).blur}px)`,B=(t={})=>{const{blur:r,contrast:o,id:n}=y(t),d=Math.max(2,Math.round(r*.25)),a=-(o*.45),s=o<=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 ${o} ${a}" result="g-gradient-morph-goo" />
-    <feBlend in="SourceGraphic" in2="g-gradient-morph-goo" />`;return`<svg xmlns="${N}" width="0" height="0" aria-hidden="true" focusable="false" style="position:absolute;overflow:hidden;inline-size:0;block-size:0;">
-  <filter id="${n}" x="-30%" y="-30%" width="160%" height="160%" color-interpolation-filters="sRGB">
-    <feGaussianBlur in="SourceGraphic" stdDeviation="${d}" result="g-gradient-morph-blur" />${s}
+"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>`},k=(t,r={})=>{const o=r.selector??".g-gradient-morph",{opacity:n}=y(r),d=v(t,r);return`${o} {
+</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;
 }
 
-${o}__blobs {
+${selector}__blobs {
 	position: absolute;
 	inset: -18%;
-	opacity: ${n};
-	filter: ${C(r)};
-	mix-blend-mode: hard-light;
+	opacity: ${opacity};
+	filter: ${toGradientMorphFilter(options)};
+	mix-blend-mode: ${blendMode};
 }
 
-${o}__blob {
+${selector}__blob {
 	position: absolute;
 	transform: translate(-50%, -50%);
 	transform-origin: var(--g-gradient-morph-origin-x) var(--g-gradient-morph-origin-y);
@@ -28,27 +28,28 @@ ${o}__blob {
 	animation: var(--g-gradient-morph-animation) var(--g-gradient-morph-duration, 9000ms) ease-in-out infinite alternate;
 }
 
-${d.map((a,s)=>`${o}__blob:nth-child(${s+1}) {
-	top: ${a.y}%;
-	left: ${a.x}%;
-	width: ${a.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: ${a.color};
-	--g-gradient-morph-x: ${a.dx}%;
-	--g-gradient-morph-x2: ${a.dx2}%;
-	--g-gradient-morph-y: ${a.dy}%;
-	--g-gradient-morph-y2: ${a.dy2}%;
-	--g-gradient-morph-origin-x: ${a.originX};
-	--g-gradient-morph-origin-y: ${a.originY};
-	--g-gradient-morph-animation: ${a.animationName};
-	--g-gradient-morph-blur: ${a.blur}px;
-	--g-gradient-morph-opacity: ${a.opacity};
-	--g-gradient-morph-rotate-mid: ${a.rotateMid}deg;
-	--g-gradient-morph-rotate-to: ${a.rotateTo}deg;
-	--g-gradient-morph-scale-mid: ${a.scaleMid};
-	--g-gradient-morph-scale: ${a.scaleTo};
-	animation-delay: ${a.delay}ms;
-	animation-duration: ${c.toCssDuration(a.duration)};
+	--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: ${utils.toCssDuration(blob.duration)};
 }`).join(`
 
 `)}
@@ -93,4 +94,108 @@ ${d.map((a,s)=>`${o}__blob:nth-child(${s+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));
 	}
-}`},S=(t,r)=>{const o=t.stops.filter(a=>a.position>=25&&a.position<=85),n=t.stops.filter(a=>!o.includes(a));return[...o,...n].sort((a,s)=>Math.abs(a.position-50)-Math.abs(s.position-50)).slice(0,r)},D=(t,r)=>t*([1,.54,.3,.18][r]??.12),h=(t,r)=>{const o=String(t).match(/^(-?\d*\.?\d+)(.*)$/);return o?`${Math.round(Number(o[1])*r*1e3)/1e3}${o[2]||"px"}`:null},b=(t,r,o)=>h(t,1/r)??(o===0?c.toCssLength(t):"0px"),L=(t,r)=>h(t,1/Math.sqrt(r))??c.toCssLength(t),_=(t,r={})=>{var f;const o=r.x??0,n=r.y??6,d=r.blur??14,a=r.spread??-3,s=r.opacity??.24,e=Math.max(1,Math.round(r.layers??2)),i=((f=S(t,1)[0])==null?void 0:f.color)??"#000000",l=`${c.toCssLength(o)} ${c.toCssLength(n)} ${c.toCssLength(d)} ${c.toCssLength(a)} ${c.toCssColor(i,s)}`;if(e===1)return l;const p=h(o,.35)??"0px",u=h(n,.35)??"2px",$=h(d,.3)??"4px",x=h(a,.5)??"-2px",w=Math.min(.18,s*.65);return`${`${p} ${u} ${$} ${x} ${c.toCssColor("#000000",w)}`}, ${l}`},F=(t,r={})=>{const o=r.x??0,n=r.y??6,d=r.blur??14,a=r.opacity??.42,s=Math.max(1,Math.round(r.layers??2)),e=L(d,s);return S(t,s).map((i,l)=>{const p=b(o,s,l),u=b(n,s,l);return`drop-shadow(${p} ${u} ${e} ${c.toCssColor(i.color,D(a,l))})`}).join(" ")};exports.createGradientMorphBlobs=v;exports.toGradientBoxShadow=_;exports.toGradientDropShadow=F;exports.toGradientMorphCSS=k;exports.toGradientMorphFilter=C;exports.toGradientMorphFilterMarkup=B;
+}`},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="${id}-clip">
+      <rect width="${width}" height="${height}" rx="${rx}" />
+    </clipPath>
+  </defs>
+  <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: ${width}px;
+	height: ${height}px;
+	border-radius: ${rx}px;
+}
+
+.g-gradient-material__surface {
+	position: relative;
+	overflow: hidden;
+	display: flex;
+	width: 100%;
+	height: 100%;
+	border-radius: ${rx}px;
+	background: ${escapeAttribute(css.toCssGradient(model))};
+}
+
+.g-gradient-material__morph {
+	--g-gradient-material-morph-bleed: 18%;
+	position: absolute;
+	z-index: 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: ${opacity};
+	filter: ${filter};
+	mix-blend-mode: ${blendMode};
+}
+
+.g-gradient-material__morph-blob {
+	position: absolute;
+	transform-origin: var(--g-gradient-morph-origin-x) var(--g-gradient-morph-origin-y);
+	transform: translate(-50%, -50%);
+	aspect-ratio: 1;
+	border-radius: 999px;
+	opacity: var(--g-gradient-morph-opacity);
+	background: radial-gradient(circle, var(--g-gradient-morph-blob-color) 0%, transparent 72%);
+	filter: blur(var(--g-gradient-morph-blur));
+	animation: var(--g-gradient-morph-animation) var(--g-gradient-morph-duration, 9000ms) ease-in-out infinite alternate;
+}
+
+${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: ${utils.toCssDuration(blob.duration)};
+}`).join(`
+
+`)}
+
+@keyframes g-gradient-morph-drift {
+	0% { transform: translate(-50%, -50%) scale(0.92); }
+	42% { transform: translate(calc(-50% + var(--g-gradient-morph-x)), calc(-50% + var(--g-gradient-morph-y))) scale(var(--g-gradient-morph-scale)); }
+	100% { transform: translate(calc(-50% + var(--g-gradient-morph-x2)), calc(-50% + var(--g-gradient-morph-y2))) scale(var(--g-gradient-morph-scale-mid)); }
+}
+
+@keyframes g-gradient-morph-float {
+	0% { transform: translate(-50%, -50%) scale(1); }
+	50% { transform: translate(calc(-50% + var(--g-gradient-morph-x)), calc(-50% + var(--g-gradient-morph-y))) scale(var(--g-gradient-morph-scale-mid)); }
+	100% { transform: translate(calc(-50% + var(--g-gradient-morph-x2)), calc(-50% + var(--g-gradient-morph-y2))) scale(var(--g-gradient-morph-scale)); }
+}
+
+@keyframes g-gradient-morph-orbit {
+	0% { transform: translate(-50%, -50%) rotate(0deg) scale(0.96); }
+	50% { transform: translate(calc(-50% + var(--g-gradient-morph-x)), calc(-50% + var(--g-gradient-morph-y))) rotate(var(--g-gradient-morph-rotate-mid)) scale(var(--g-gradient-morph-scale-mid)); }
+	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)); }
+}
+      </style>
+      <span class="g-gradient-material__surface">
+        <span class="g-gradient-material__morph">
+          ${blobs.map(()=>'<span class="g-gradient-material__morph-blob"></span>').join(`
+          `)}
+        </span>
+      </span>
+    </div>
+  </foreignObject>
+</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;

package/dist/effects.mjs

@@ -1,5 +1,7 @@
-import { t as w, b as $, j as m, i as b } from "./utils-B_VQDGMy.js";
-const T = "http://www.w3.org/2000/svg", X = {
+import { t as toCssDuration, b as clamp, j as toCssLength, k as toCssColor } from "./utils-VaqPefmS.js";
+import { t as toCssGradient } from "./css-B3xGfmW1.js";
+import { D as DEFAULT_GRADIENT_MORPH_BLEND_MODE, G as GRADIENT_MORPH_BLEND_MODES } from "./types-B0eCazk8.js";
+const 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,
@@ -24,31 +26,33 @@ const T = "http://www.w3.org/2000/svg", X = {
     opacity: 0.78,
     scale: 0.94
   }
-}, y = (r = {}) => {
-  const t = X[r.preset ?? "soft"];
+}, gradientMorphBlendModeSet = new Set(GRADIENT_MORPH_BLEND_MODES), isGradientMorphBlendMode = (value) => gradientMorphBlendModeSet.has(value), resolveGradientMorphBlendMode = (value) => value && isGradientMorphBlendMode(value) ? value : DEFAULT_GRADIENT_MORPH_BLEND_MODE, getMorphOptions = (options = {}) => {
+  const preset = morphPresets[options.preset ?? "soft"];
   return {
     blobCount: Math.max(
       2,
-      Math.round(r.blobCount ?? t.blobCount)
+      Math.round(options.blobCount ?? preset.blobCount)
     ),
-    blur: $(r.blur ?? t.blur, 0, 80),
-    contrast: $(r.contrast ?? t.contrast, 0, 36),
-    duration: r.duration ?? t.duration,
-    id: r.id ?? "g-gradient-morph",
-    opacity: $(r.opacity ?? t.opacity),
-    scale: $(r.scale ?? t.scale, 0.4, 2)
+    blendMode: resolveGradientMorphBlendMode(options.blendMode),
+    blobOpacity: clamp(options.blobOpacity ?? 1, 0, 1.6),
+    blur: clamp(options.blur ?? preset.blur, 0, 80),
+    contrast: clamp(options.contrast ?? preset.contrast, 0, 36),
+    duration: options.duration ?? preset.duration,
+    id: options.id ?? "g-gradient-morph",
+    opacity: clamp(options.opacity ?? preset.opacity),
+    scale: clamp(options.scale ?? preset.scale, 0.4, 2)
   };
-}, Y = (r, t) => {
-  var o, i;
-  return ((o = r.stops[t % r.stops.length]) == null ? void 0 : o.color) ?? ((i = r.stops[0]) == null ? void 0 : i.color) ?? "currentColor";
-}, G = (r) => {
-  if (typeof r == "number") return r;
-  const t = Number.parseFloat(r);
-  return Number.isFinite(t) ? t : 9e3;
-}, B = (r, t) => {
-  const o = Math.sin((r + 1) * 12.9898 + t * 78.233) * 43758.5453;
-  return o - Math.floor(o);
-}, d = (r, t, o, i) => o + B(r, t) * (i - o), l = (r) => Number(r.toFixed(3)), v = [
+}, 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,
@@ -153,61 +157,61 @@ const T = "http://www.w3.org/2000/svg", X = {
     x: 18,
     y: 24
   }
-], _ = (r, t = {}) => {
-  const { blobCount: o, duration: i, scale: c } = y(t), a = G(i);
-  return Array.from({ length: o }, (s, n) => {
-    const e = v[n % v.length], g = d(n, 1, 0.88, 1.16), h = d(n, 2, 0.86, 1.24), u = d(n, 3, 0.72, 1), x = d(n, 4, 0, 4), f = (34 + n % 4 * 9) * c * g;
+], 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, 0.88, 1.16), durationJitter = getNoiseRange(index, 2, 0.86, 1.24), opacity = clamp(getNoiseRange(index, 3, 0.72, 1) * blobOpacity), blur = getNoiseRange(index, 4, 0, 4), size = (34 + index % 4 * 9) * scale * sizeJitter;
     return {
-      animationName: e.animationName,
-      blur: l(x),
-      color: Y(r, n),
+      animationName: path.animationName,
+      blur: round(blur),
+      color: getBlobColor(model, index),
       delay: Math.round(
-        n * -0.19 * a - d(n, 5, 0, 900)
+        index * -0.19 * durationMs - getNoiseRange(index, 5, 0, 900)
       ),
-      dx: l(e.dx * d(n, 6, 0.84, 1.18)),
-      dx2: l(e.dx2 * d(n, 7, 0.82, 1.22)),
-      dy: l(e.dy * d(n, 8, 0.84, 1.18)),
-      dy2: l(e.dy2 * d(n, 9, 0.82, 1.22)),
+      dx: round(path.dx * getNoiseRange(index, 6, 0.84, 1.18)),
+      dx2: round(path.dx2 * getNoiseRange(index, 7, 0.82, 1.22)),
+      dy: round(path.dy * getNoiseRange(index, 8, 0.84, 1.18)),
+      dy2: round(path.dy2 * getNoiseRange(index, 9, 0.82, 1.22)),
       duration: Math.round(
-        a * (1 + n % 3 * 0.11) * h
+        durationMs * (1 + index % 3 * 0.11) * durationJitter
       ),
-      opacity: l(u),
-      originX: e.originX,
-      originY: e.originY,
-      rotateMid: Math.round(d(n, 10, 95, 165)),
-      rotateTo: Math.round(d(n, 11, 220, 310)),
-      scaleMid: e.scaleMid,
-      scaleTo: e.scaleTo,
-      size: l(f),
-      x: e.x,
-      y: e.y
+      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
     };
   });
-}, k = (r = {}) => `url(#${y(r).id}) blur(${y(r).blur}px)`, j = (r = {}) => {
-  const { blur: t, contrast: o, id: i } = y(r), c = Math.max(2, Math.round(t * 0.25)), a = -(o * 0.45), s = o <= 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 ${o} ${a}" result="g-gradient-morph-goo" />
+}, 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 * 0.25)), alphaOffset = -(contrast * 0.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="${T}" 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="${c}" result="g-gradient-morph-blur" />${s}
+  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>`;
-}, A = (r, t = {}) => {
-  const o = t.selector ?? ".g-gradient-morph", { opacity: i } = y(t), c = _(r, t);
-  return `${o} {
+}, toGradientMorphCSS = (model, options = {}) => {
+  const selector = options.selector ?? ".g-gradient-morph", { blendMode, opacity } = getMorphOptions(options), blobs = createGradientMorphBlobs(model, options);
+  return `${selector} {
 	position: relative;
 	overflow: hidden;
 }
 
-${o}__blobs {
+${selector}__blobs {
 	position: absolute;
 	inset: -18%;
-	opacity: ${i};
-	filter: ${k(t)};
-	mix-blend-mode: hard-light;
+	opacity: ${opacity};
+	filter: ${toGradientMorphFilter(options)};
+	mix-blend-mode: ${blendMode};
 }
 
-${o}__blob {
+${selector}__blob {
 	position: absolute;
 	transform: translate(-50%, -50%);
 	transform-origin: var(--g-gradient-morph-origin-x) var(--g-gradient-morph-origin-y);
@@ -218,28 +222,29 @@ ${o}__blob {
 	animation: var(--g-gradient-morph-animation) var(--g-gradient-morph-duration, 9000ms) ease-in-out infinite alternate;
 }
 
-${c.map(
-    (a, s) => `${o}__blob:nth-child(${s + 1}) {
-	top: ${a.y}%;
-	left: ${a.x}%;
-	width: ${a.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: ${a.color};
-	--g-gradient-morph-x: ${a.dx}%;
-	--g-gradient-morph-x2: ${a.dx2}%;
-	--g-gradient-morph-y: ${a.dy}%;
-	--g-gradient-morph-y2: ${a.dy2}%;
-	--g-gradient-morph-origin-x: ${a.originX};
-	--g-gradient-morph-origin-y: ${a.originY};
-	--g-gradient-morph-animation: ${a.animationName};
-	--g-gradient-morph-blur: ${a.blur}px;
-	--g-gradient-morph-opacity: ${a.opacity};
-	--g-gradient-morph-rotate-mid: ${a.rotateMid}deg;
-	--g-gradient-morph-rotate-to: ${a.rotateTo}deg;
-	--g-gradient-morph-scale-mid: ${a.scaleMid};
-	--g-gradient-morph-scale: ${a.scaleTo};
-	animation-delay: ${a.delay}ms;
-	animation-duration: ${w(a.duration)};
+	--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: ${toCssDuration(blob.duration)};
 }`
   ).join(`
 
@@ -286,36 +291,148 @@ ${c.map(
 		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));
 	}
 }`;
-}, C = (r, t) => {
-  const o = r.stops.filter(
-    (a) => a.position >= 25 && a.position <= 85
-  ), i = r.stops.filter(
-    (a) => !o.includes(a)
+}, 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="${id}-clip">
+      <rect width="${width}" height="${height}" rx="${rx}" />
+    </clipPath>
+  </defs>
+  <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: ${width}px;
+	height: ${height}px;
+	border-radius: ${rx}px;
+}
+
+.g-gradient-material__surface {
+	position: relative;
+	overflow: hidden;
+	display: flex;
+	width: 100%;
+	height: 100%;
+	border-radius: ${rx}px;
+	background: ${escapeAttribute(toCssGradient(model))};
+}
+
+.g-gradient-material__morph {
+	--g-gradient-material-morph-bleed: 18%;
+	position: absolute;
+	z-index: 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: ${opacity};
+	filter: ${filter};
+	mix-blend-mode: ${blendMode};
+}
+
+.g-gradient-material__morph-blob {
+	position: absolute;
+	transform-origin: var(--g-gradient-morph-origin-x) var(--g-gradient-morph-origin-y);
+	transform: translate(-50%, -50%);
+	aspect-ratio: 1;
+	border-radius: 999px;
+	opacity: var(--g-gradient-morph-opacity);
+	background: radial-gradient(circle, var(--g-gradient-morph-blob-color) 0%, transparent 72%);
+	filter: blur(var(--g-gradient-morph-blur));
+	animation: var(--g-gradient-morph-animation) var(--g-gradient-morph-duration, 9000ms) ease-in-out infinite alternate;
+}
+
+${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: ${toCssDuration(blob.duration)};
+}`
+  ).join(`
+
+`)}
+
+@keyframes g-gradient-morph-drift {
+	0% { transform: translate(-50%, -50%) scale(0.92); }
+	42% { transform: translate(calc(-50% + var(--g-gradient-morph-x)), calc(-50% + var(--g-gradient-morph-y))) scale(var(--g-gradient-morph-scale)); }
+	100% { transform: translate(calc(-50% + var(--g-gradient-morph-x2)), calc(-50% + var(--g-gradient-morph-y2))) scale(var(--g-gradient-morph-scale-mid)); }
+}
+
+@keyframes g-gradient-morph-float {
+	0% { transform: translate(-50%, -50%) scale(1); }
+	50% { transform: translate(calc(-50% + var(--g-gradient-morph-x)), calc(-50% + var(--g-gradient-morph-y))) scale(var(--g-gradient-morph-scale-mid)); }
+	100% { transform: translate(calc(-50% + var(--g-gradient-morph-x2)), calc(-50% + var(--g-gradient-morph-y2))) scale(var(--g-gradient-morph-scale)); }
+}
+
+@keyframes g-gradient-morph-orbit {
+	0% { transform: translate(-50%, -50%) rotate(0deg) scale(0.96); }
+	50% { transform: translate(calc(-50% + var(--g-gradient-morph-x)), calc(-50% + var(--g-gradient-morph-y))) rotate(var(--g-gradient-morph-rotate-mid)) scale(var(--g-gradient-morph-scale-mid)); }
+	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)); }
+}
+      </style>
+      <span class="g-gradient-material__surface">
+        <span class="g-gradient-material__morph">
+          ${blobs.map(() => '<span class="g-gradient-material__morph-blob"></span>').join(`
+          `)}
+        </span>
+      </span>
+    </div>
+  </foreignObject>
+</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 [...o, ...i].sort(
-    (a, s) => Math.abs(a.position - 50) - Math.abs(s.position - 50)
-  ).slice(0, t);
-}, D = (r, t) => r * ([1, 0.54, 0.3, 0.18][t] ?? 0.12), p = (r, t) => {
-  const o = String(r).match(/^(-?\d*\.?\d+)(.*)$/);
-  return o ? `${Math.round(Number(o[1]) * t * 1e3) / 1e3}${o[2] || "px"}` : null;
-}, S = (r, t, o) => p(r, 1 / t) ?? (o === 0 ? m(r) : "0px"), z = (r, t) => p(r, 1 / Math.sqrt(t)) ?? m(r), L = (r, t = {}) => {
-  var M;
-  const o = t.x ?? 0, i = t.y ?? 6, c = t.blur ?? 14, a = t.spread ?? -3, s = t.opacity ?? 0.24, n = Math.max(1, Math.round(t.layers ?? 2)), e = ((M = C(r, 1)[0]) == null ? void 0 : M.color) ?? "#000000", g = `${m(o)} ${m(i)} ${m(c)} ${m(a)} ${b(e, s)}`;
-  if (n === 1) return g;
-  const h = p(o, 0.35) ?? "0px", u = p(i, 0.35) ?? "2px", x = p(c, 0.3) ?? "4px", f = p(a, 0.5) ?? "-2px", N = Math.min(0.18, s * 0.65);
-  return `${`${h} ${u} ${x} ${f} ${b("#000000", N)}`}, ${g}`;
-}, P = (r, t = {}) => {
-  const o = t.x ?? 0, i = t.y ?? 6, c = t.blur ?? 14, a = t.opacity ?? 0.42, s = Math.max(1, Math.round(t.layers ?? 2)), n = z(c, s);
-  return C(r, s).map((e, g) => {
-    const h = S(o, s, g), u = S(i, s, g);
-    return `drop-shadow(${h} ${u} ${n} ${b(e.color, D(a, g))})`;
+  return [...saturatedStops, ...fallbackStops].sort(
+    (first, second) => Math.abs(first.position - 50) - Math.abs(second.position - 50)
+  ).slice(0, layers);
+}, getDropShadowLayerOpacity = (opacity, index) => opacity * ([1, 0.54, 0.3, 0.18][index] ?? 0.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 ? toCssLength(value) : "0px"), getDistributedBlur = (value, layers) => scaleSimpleCssLength(value, 1 / Math.sqrt(layers)) ?? 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 ?? 0.24, layers = Math.max(1, Math.round(options.layers ?? 2)), dominantColor = ((_a = getShadowStops(model, 1)[0]) == null ? void 0 : _a.color) ?? "#000000", ambientShadow = `${toCssLength(x)} ${toCssLength(y)} ${toCssLength(blur)} ${toCssLength(spread)} ${toCssColor(dominantColor, opacity)}`;
+  if (layers === 1) return ambientShadow;
+  const contactX = scaleSimpleCssLength(x, 0.35) ?? "0px", contactY = scaleSimpleCssLength(y, 0.35) ?? "2px", contactBlur = scaleSimpleCssLength(blur, 0.3) ?? "4px", contactSpread = scaleSimpleCssLength(spread, 0.5) ?? "-2px", contactOpacity = Math.min(0.18, opacity * 0.65);
+  return `${`${contactX} ${contactY} ${contactBlur} ${contactSpread} ${toCssColor("#000000", contactOpacity)}`}, ${ambientShadow}`;
+}, toGradientDropShadow = (model, options = {}) => {
+  const x = options.x ?? 0, y = options.y ?? 6, blur = options.blur ?? 14, opacity = options.opacity ?? 0.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} ${toCssColor(stop.color, getDropShadowLayerOpacity(opacity, index))})`;
   }).join(" ");
 };
 export {
-  _ as createGradientMorphBlobs,
-  L as toGradientBoxShadow,
-  P as toGradientDropShadow,
-  A as toGradientMorphCSS,
-  k as toGradientMorphFilter,
-  j as toGradientMorphFilterMarkup
+  createGradientMorphBlobs,
+  isGradientMorphBlendMode,
+  resolveGradientMorphBlendMode,
+  toGradientBoxShadow,
+  toGradientDropShadow,
+  toGradientMorphCSS,
+  toGradientMorphFilter,
+  toGradientMorphFilterMarkup,
+  toGradientMorphMarkup
 };