@moises.ai/design-system 3.9.11 → 3.9.13

package/dist/index.js

@@ -5195,13 +5195,17 @@ function Rv(n) {
   };
 }
 function Nv(n, e) {
-  const t = Rv(e), s = nr[n] || nr.lyrics, r = () => s[Math.floor(t() * s.length)], o = r(), i = 4 + Math.floor(t() * 2), l = Array.from({ length: i }, () => ({
-    cx: -10 + t() * 120,
-    cy: -10 + t() * 120,
-    r: 30 + t() * 35,
-    fill: r()
-  })), c = 18 + t() * 10;
-  return { bg: o, blobs: l, blur: c };
+  const t = Rv(e), s = nr[n] || nr.lyrics, r = () => s[Math.floor(t() * s.length)], o = r(), i = 6 + Math.floor(t() * 3), l = Array.from({ length: i }, () => {
+    const c = 10 + Math.floor(t() * 20);
+    return {
+      x: -20 + t() * 140,
+      y: -20 + t() * 140,
+      size: 140 + t() * 120,
+      fill: r(),
+      midStop: c
+    };
+  });
+  return { bg: o, blobs: l };
 }
 const Ta = ({
   className: n,
@@ -5225,22 +5229,38 @@ const Ta = ({
         ...o
       }
     );
-  const l = r ?? i, { bg: c, blobs: u, blur: p } = Nv(t, l);
-  return /* @__PURE__ */ m(
-    "svg",
+  const l = r ?? i, { bg: c, blobs: u } = Nv(t, l);
+  return /* @__PURE__ */ a(
+    "div",
     {
-      viewBox: "0 0 100 100",
-      width: e,
-      height: e,
-      overflow: "hidden",
-      className: C(n),
       "aria-label": `${t} pattern`,
       role: "img",
+      className: C(n),
+      style: {
+        position: "relative",
+        width: e,
+        height: e,
+        overflow: "hidden",
+        backgroundColor: c,
+        flexShrink: 0
+      },
       ...o,
-      children: [
-        /* @__PURE__ */ a("rect", { width: "100", height: "100", fill: c }),
-        /* @__PURE__ */ a("g", { style: { filter: `blur(${p}px)` }, children: u.map((h, A) => /* @__PURE__ */ a("circle", { cx: h.cx, cy: h.cy, r: h.r, fill: h.fill }, A)) })
-      ]
+      children: u.map((p, h) => /* @__PURE__ */ a(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            left: `${p.x}%`,
+            top: `${p.y}%`,
+            width: `${p.size}%`,
+            height: `${p.size}%`,
+            borderRadius: "50%",
+            background: `radial-gradient(circle, ${p.fill} ${p.midStop}%, transparent 70%)`,
+            transform: "translate(-50%, -50%)"
+          }
+        },
+        h
+      ))
     }
   );
 };

package/package.json

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

package/src/components/ProductsBrandPattern/ProductsBrandPattern.jsx

@@ -34,17 +34,19 @@ function generatePattern(type, seed) {
 
   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,
-    fill: pick(),
-  }))
+  const blobCount = 6 + Math.floor(rng() * 3)
+  const blobs = Array.from({ length: blobCount }, () => {
+    const midStop = 10 + Math.floor(rng() * 20)
+    return {
+      x: -20 + rng() * 140,
+      y: -20 + rng() * 140,
+      size: 140 + rng() * 120,
+      fill: pick(),
+      midStop,
+    }
+  })
 
-  const blur = 18 + rng() * 10
-
-  return { bg, blobs, blur }
+  return { bg, blobs }
 }
 
 export const ProductsBrandPattern = ({
@@ -72,27 +74,39 @@ export const ProductsBrandPattern = ({
   }
 
   const effectiveSeed = title != null ? title : randomSeed
-  const { bg, blobs, blur } = generatePattern(type, effectiveSeed)
+  const { bg, blobs } = generatePattern(type, effectiveSeed)
 
   return (
-    <svg
-      viewBox="0 0 100 100"
-      width={size}
-      height={size}
-      overflow="hidden"
-      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}
     >
-      <rect width="100" height="100" fill={bg} />
-
-      <g style={{ filter: `blur(${blur}px)` }}>
-        {blobs.map((b, i) => (
-          <circle key={i} cx={b.cx} cy={b.cy} r={b.r} fill={b.fill} />
-        ))}
-      </g>
-    </svg>
+      {blobs.map((b, i) => (
+        <div
+          key={i}
+          style={{
+            position: 'absolute',
+            left: `${b.x}%`,
+            top: `${b.y}%`,
+            width: `${b.size}%`,
+            height: `${b.size}%`,
+            borderRadius: '50%',
+            background: `radial-gradient(circle, ${b.fill} ${b.midStop}%, transparent 70%)`,
+            transform: 'translate(-50%, -50%)',
+          }}
+        />
+      ))}
+    </div>
   )
 }