@moises.ai/design-system 3.9.10 → 3.9.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "3.9.10",
+  "version": "3.9.12",
   "description": "Design System package based on @radix-ui/themes with custom defaults",
   "private": false,
   "type": "module",

package/src/components/ProductsBrandPattern/ProductsBrandPattern.jsx

@@ -31,21 +31,20 @@ function generatePattern(type, seed) {
   const rng = createRng(seed)
   const colors = palettes[type] || palettes.lyrics
   const pick = () => colors[Math.floor(rng() * colors.length)]
-  const uid = hashSeed(String(seed) + type)
 
   const bg = pick()
 
   const blobCount = 4 + Math.floor(rng() * 2)
   const blobs = Array.from({ length: blobCount }, () => ({
-    cx: -10 + rng() * 120,
-    cy: -10 + rng() * 120,
-    r: 30 + rng() * 35,
+    x: -10 + rng() * 120,
+    y: -10 + rng() * 120,
+    size: 60 + rng() * 70,
     fill: pick(),
   }))
 
   const blur = 18 + rng() * 10
 
-  return { uid, bg, blobs, blur }
+  return { bg, blobs, blur }
 }
 
 export const ProductsBrandPattern = ({
@@ -73,36 +72,47 @@ export const ProductsBrandPattern = ({
   }
 
   const effectiveSeed = title != null ? title : randomSeed
-  const { uid, bg, blobs, blur } = generatePattern(type, effectiveSeed)
-  const filterId = `bl-${uid}`
+  const { bg, blobs, blur } = generatePattern(type, effectiveSeed)
 
   return (
-    <svg
-      viewBox="0 0 100 100"
-      width={size}
-      height={size}
-      className={classNames(className)}
+    <div
       aria-label={`${type} pattern`}
       role="img"
+      className={classNames(className)}
+      style={{
+        position: 'relative',
+        width: size,
+        height: size,
+        overflow: 'hidden',
+        backgroundColor: bg,
+        flexShrink: 0,
+      }}
       {...props}
     >
-      <defs>
-        <filter id={filterId} x="-50%" y="-50%" width="200%" height="200%">
-          <feGaussianBlur stdDeviation={blur} />
-        </filter>
-        <clipPath id={`c-${uid}`}>
-          <rect width="100" height="100" />
-        </clipPath>
-      </defs>
-
-      <rect width="100" height="100" fill={bg} />
-
-      <g clipPath={`url(#c-${uid})`} filter={`url(#${filterId})`}>
+      <div
+        style={{
+          position: 'absolute',
+          inset: 0,
+          filter: `blur(${blur}px)`,
+        }}
+      >
         {blobs.map((b, i) => (
-          <circle key={i} cx={b.cx} cy={b.cy} r={b.r} fill={b.fill} />
+          <div
+            key={i}
+            style={{
+              position: 'absolute',
+              left: `${b.x}%`,
+              top: `${b.y}%`,
+              width: `${b.size}%`,
+              height: `${b.size}%`,
+              borderRadius: '50%',
+              backgroundColor: b.fill,
+              transform: 'translate(-50%, -50%)',
+            }}
+          />
         ))}
-      </g>
-    </svg>
+      </div>
+    </div>
   )
 }