@moises.ai/design-system 3.9.11 → 3.9.12

package/dist/index.js

@@ -5196,9 +5196,9 @@ 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,
+    x: -10 + t() * 120,
+    y: -10 + t() * 120,
+    size: 60 + t() * 70,
     fill: r()
   })), c = 18 + t() * 10;
   return { bg: o, blobs: l, blur: c };
@@ -5226,21 +5226,47 @@ const Ta = ({
       }
     );
   const l = r ?? i, { bg: c, blobs: u, blur: p } = Nv(t, l);
-  return /* @__PURE__ */ m(
-    "svg",
+  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: /* @__PURE__ */ a(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            inset: 0,
+            filter: `blur(${p}px)`
+          },
+          children: u.map((h, A) => /* @__PURE__ */ a(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                left: `${h.x}%`,
+                top: `${h.y}%`,
+                width: `${h.size}%`,
+                height: `${h.size}%`,
+                borderRadius: "50%",
+                backgroundColor: h.fill,
+                transform: "translate(-50%, -50%)"
+              }
+            },
+            A
+          ))
+        }
+      )
     }
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "3.9.11",
+  "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

@@ -36,9 +36,9 @@ function generatePattern(type, seed) {
 
   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(),
   }))
 
@@ -75,24 +75,44 @@ export const ProductsBrandPattern = ({
   const { bg, blobs, blur } = 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)` }}>
+      <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>
   )
 }