@effing/canvas 0.21.0 → 0.22.0

package/dist/index.js

@@ -880,37 +880,133 @@ function drawBorders(ctx, x, y, width, height, style, borderRadius) {
     }
     return;
   }
-  if (tw > 0) {
-    ctx.strokeStyle = tc;
-    ctx.lineWidth = tw;
-    ctx.beginPath();
-    ctx.moveTo(x, y + tw / 2);
-    ctx.lineTo(x + width, y + tw / 2);
-    ctx.stroke();
-  }
-  if (rw > 0) {
-    ctx.strokeStyle = rc;
-    ctx.lineWidth = rw;
-    ctx.beginPath();
-    ctx.moveTo(x + width - rw / 2, y);
-    ctx.lineTo(x + width - rw / 2, y + height);
-    ctx.stroke();
-  }
-  if (bw > 0) {
-    ctx.strokeStyle = bc;
-    ctx.lineWidth = bw;
-    ctx.beginPath();
-    ctx.moveTo(x, y + height - bw / 2);
-    ctx.lineTo(x + width, y + height - bw / 2);
-    ctx.stroke();
-  }
-  if (lw > 0) {
-    ctx.strokeStyle = lc;
-    ctx.lineWidth = lw;
-    ctx.beginPath();
-    ctx.moveTo(x + lw / 2, y);
-    ctx.lineTo(x + lw / 2, y + height);
-    ctx.stroke();
+  if (hasRoundedCorners) {
+    const maxR = Math.min(width, height) / 2;
+    const tl = Math.min(borderRadius.topLeft, maxR);
+    const tr = Math.min(borderRadius.topRight, maxR);
+    const br = Math.min(borderRadius.bottomRight, maxR);
+    const bl = Math.min(borderRadius.bottomLeft, maxR);
+    const top = y + tw / 2;
+    const right = x + width - rw / 2;
+    const bottom = y + height - bw / 2;
+    const left = x + lw / 2;
+    const eTL = Math.max(0, tl - Math.max(tw, lw) / 2);
+    const eTR = Math.max(0, tr - Math.max(tw, rw) / 2);
+    const eBR = Math.max(0, br - Math.max(bw, rw) / 2);
+    const eBL = Math.max(0, bl - Math.max(bw, lw) / 2);
+    if (tw > 0) {
+      ctx.strokeStyle = tc;
+      ctx.lineWidth = tw;
+      ctx.beginPath();
+      if (eTL > 0 && lw === 0) {
+        ctx.moveTo(left, top + eTL);
+        ctx.arcTo(left, top, left + eTL, top, eTL);
+      } else if (eTL > 0) {
+        ctx.moveTo(left + eTL, top);
+      } else {
+        ctx.moveTo(x, top);
+      }
+      if (eTR > 0) {
+        ctx.lineTo(right - eTR, top);
+        ctx.arcTo(right, top, right, top + eTR, eTR);
+      } else {
+        ctx.lineTo(x + width, top);
+      }
+      ctx.stroke();
+    }
+    if (rw > 0) {
+      ctx.strokeStyle = rc;
+      ctx.lineWidth = rw;
+      ctx.beginPath();
+      if (eTR > 0 && tw === 0) {
+        ctx.moveTo(right - eTR, top);
+        ctx.arcTo(right, top, right, top + eTR, eTR);
+      } else if (eTR > 0) {
+        ctx.moveTo(right, top + eTR);
+      } else {
+        ctx.moveTo(right, y);
+      }
+      if (eBR > 0) {
+        ctx.lineTo(right, bottom - eBR);
+        ctx.arcTo(right, bottom, right - eBR, bottom, eBR);
+      } else {
+        ctx.lineTo(right, y + height);
+      }
+      ctx.stroke();
+    }
+    if (bw > 0) {
+      ctx.strokeStyle = bc;
+      ctx.lineWidth = bw;
+      ctx.beginPath();
+      if (eBR > 0 && rw === 0) {
+        ctx.moveTo(right, bottom - eBR);
+        ctx.arcTo(right, bottom, right - eBR, bottom, eBR);
+      } else if (eBR > 0) {
+        ctx.moveTo(right - eBR, bottom);
+      } else {
+        ctx.moveTo(x + width, bottom);
+      }
+      if (eBL > 0) {
+        ctx.lineTo(left + eBL, bottom);
+        ctx.arcTo(left, bottom, left, bottom - eBL, eBL);
+      } else {
+        ctx.lineTo(x, bottom);
+      }
+      ctx.stroke();
+    }
+    if (lw > 0) {
+      ctx.strokeStyle = lc;
+      ctx.lineWidth = lw;
+      ctx.beginPath();
+      if (eBL > 0 && bw === 0) {
+        ctx.moveTo(left + eBL, bottom);
+        ctx.arcTo(left, bottom, left, bottom - eBL, eBL);
+      } else if (eBL > 0) {
+        ctx.moveTo(left, bottom - eBL);
+      } else {
+        ctx.moveTo(left, y + height);
+      }
+      if (eTL > 0) {
+        ctx.lineTo(left, top + eTL);
+        ctx.arcTo(left, top, left + eTL, top, eTL);
+      } else {
+        ctx.lineTo(left, y);
+      }
+      ctx.stroke();
+    }
+  } else {
+    if (tw > 0) {
+      ctx.strokeStyle = tc;
+      ctx.lineWidth = tw;
+      ctx.beginPath();
+      ctx.moveTo(x, y + tw / 2);
+      ctx.lineTo(x + width, y + tw / 2);
+      ctx.stroke();
+    }
+    if (rw > 0) {
+      ctx.strokeStyle = rc;
+      ctx.lineWidth = rw;
+      ctx.beginPath();
+      ctx.moveTo(x + width - rw / 2, y);
+      ctx.lineTo(x + width - rw / 2, y + height);
+      ctx.stroke();
+    }
+    if (bw > 0) {
+      ctx.strokeStyle = bc;
+      ctx.lineWidth = bw;
+      ctx.beginPath();
+      ctx.moveTo(x, y + height - bw / 2);
+      ctx.lineTo(x + width, y + height - bw / 2);
+      ctx.stroke();
+    }
+    if (lw > 0) {
+      ctx.strokeStyle = lc;
+      ctx.lineWidth = lw;
+      ctx.beginPath();
+      ctx.moveTo(x + lw / 2, y);
+      ctx.lineTo(x + lw / 2, y + height);
+      ctx.stroke();
+    }
   }
 }
 function drawBoxShadow(ctx, x, y, width, height, boxShadow, borderRadius) {
@@ -958,18 +1054,24 @@ function collectDefs(children) {
   const clips = /* @__PURE__ */ new Map();
   const gradients = /* @__PURE__ */ new Map();
   const masks = /* @__PURE__ */ new Map();
+  const filters = /* @__PURE__ */ new Map();
+  function insertDef(def) {
+    const id = def.props.id;
+    if (!id) return;
+    if (def.type === "clipPath") clips.set(id, normalizeChildren(def));
+    else if (def.type === "mask") masks.set(id, normalizeChildren(def));
+    else if (def.type === "filter") filters.set(id, def);
+    else if (def.type === "radialGradient" || def.type === "linearGradient")
+      gradients.set(id, def);
+  }
   for (const child of children) {
-    if (child.type !== "defs") continue;
-    for (const def of normalizeChildren(child)) {
-      const id = def.props.id;
-      if (!id) continue;
-      if (def.type === "clipPath") clips.set(id, normalizeChildren(def));
-      else if (def.type === "mask") masks.set(id, normalizeChildren(def));
-      else if (def.type === "radialGradient" || def.type === "linearGradient")
-        gradients.set(id, def);
+    if (child.type === "defs") {
+      for (const def of normalizeChildren(child)) insertDef(def);
+    } else {
+      insertDef(child);
     }
   }
-  return { clips, gradients, masks };
+  return { clips, gradients, masks, filters };
 }
 function parseUrlRef(value) {
   if (typeof value !== "string") return void 0;
@@ -1353,21 +1455,177 @@ function drawSvgContainer(ctx, node, x, y, width, height) {
 var EMPTY_DEFS = {
   clips: /* @__PURE__ */ new Map(),
   gradients: /* @__PURE__ */ new Map(),
-  masks: /* @__PURE__ */ new Map()
+  masks: /* @__PURE__ */ new Map(),
+  filters: /* @__PURE__ */ new Map()
 };
+function applyFeOffset(input, dx, dy, w, h) {
+  const [canvas, ctx] = acquireOffscreen(w, h);
+  ctx.drawImage(input, dx, dy);
+  return canvas;
+}
+function applyFeGaussianBlur(input, stdDeviation, w, h) {
+  const [canvas, ctx] = acquireOffscreen(w, h);
+  ctx.filter = `blur(${stdDeviation}px)`;
+  ctx.drawImage(input, 0, 0);
+  ctx.filter = "none";
+  return canvas;
+}
+function applyFeColorMatrix(input, type, values, w, h) {
+  const [canvas, ctx] = acquireOffscreen(w, h);
+  ctx.drawImage(input, 0, 0);
+  if (type === "matrix" && values) {
+    const m = values.trim().split(/[\s,]+/).map(Number);
+    if (m.length >= 20) {
+      const imageData = ctx.getImageData(0, 0, w, h);
+      const d = imageData.data;
+      for (let i = 0; i < d.length; i += 4) {
+        const r = d[i];
+        const g = d[i + 1];
+        const b = d[i + 2];
+        const a = d[i + 3];
+        d[i] = Math.min(
+          255,
+          Math.max(
+            0,
+            m[0] * r + m[1] * g + m[2] * b + m[3] * a + m[4] * 255
+          )
+        );
+        d[i + 1] = Math.min(
+          255,
+          Math.max(
+            0,
+            m[5] * r + m[6] * g + m[7] * b + m[8] * a + m[9] * 255
+          )
+        );
+        d[i + 2] = Math.min(
+          255,
+          Math.max(
+            0,
+            m[10] * r + m[11] * g + m[12] * b + m[13] * a + m[14] * 255
+          )
+        );
+        d[i + 3] = Math.min(
+          255,
+          Math.max(
+            0,
+            m[15] * r + m[16] * g + m[17] * b + m[18] * a + m[19] * 255
+          )
+        );
+      }
+      ctx.putImageData(imageData, 0, 0);
+    }
+  }
+  return canvas;
+}
+function applyFeBlend(in1, in2, mode, w, h) {
+  const modeMap = {
+    normal: "source-over",
+    multiply: "multiply",
+    screen: "screen",
+    darken: "darken",
+    lighten: "lighten",
+    overlay: "overlay"
+  };
+  const [canvas, ctx] = acquireOffscreen(w, h);
+  ctx.drawImage(in2, 0, 0);
+  ctx.globalCompositeOperation = modeMap[mode] ?? "source-over";
+  ctx.drawImage(in1, 0, 0);
+  ctx.globalCompositeOperation = "source-over";
+  return canvas;
+}
+function extractSourceAlpha(input, w, h) {
+  const [canvas, ctx] = acquireOffscreen(w, h);
+  ctx.fillStyle = "black";
+  ctx.fillRect(0, 0, w, h);
+  ctx.globalCompositeOperation = "destination-in";
+  ctx.drawImage(input, 0, 0);
+  ctx.globalCompositeOperation = "source-over";
+  return canvas;
+}
+function applyFilter(filterDef, sourceGraphic, w, h) {
+  const buffers = /* @__PURE__ */ new Map();
+  buffers.set("SourceGraphic", sourceGraphic);
+  let sourceAlpha;
+  const getSourceAlpha = () => {
+    if (!sourceAlpha) {
+      sourceAlpha = extractSourceAlpha(sourceGraphic, w, h);
+      buffers.set("SourceAlpha", sourceAlpha);
+    }
+    return sourceAlpha;
+  };
+  const children = normalizeChildren(filterDef);
+  let lastResult = sourceGraphic;
+  for (const prim of children) {
+    const p = prim.props;
+    const inName = p.in ?? "";
+    const resolve = (name) => {
+      if (name === "SourceAlpha") return getSourceAlpha();
+      return buffers.get(name) ?? lastResult;
+    };
+    const input = inName ? resolve(inName) : lastResult;
+    let output;
+    switch (prim.type) {
+      case "feOffset":
+        output = applyFeOffset(
+          input,
+          Number(p.dx ?? 0),
+          Number(p.dy ?? 0),
+          w,
+          h
+        );
+        break;
+      case "feGaussianBlur": {
+        const std = Number(p.stdDeviation ?? 0);
+        output = std > 0 ? applyFeGaussianBlur(input, std, w, h) : input;
+        break;
+      }
+      case "feColorMatrix":
+        output = applyFeColorMatrix(
+          input,
+          p.type ?? "matrix",
+          p.values,
+          w,
+          h
+        );
+        break;
+      case "feBlend": {
+        const in2Name = p.in2 ?? "";
+        const in2 = in2Name ? resolve(in2Name) : lastResult;
+        output = applyFeBlend(input, in2, p.mode ?? "normal", w, h);
+        break;
+      }
+      default:
+        output = input;
+        break;
+    }
+    const resultName = p.result;
+    if (resultName) buffers.set(resultName, output);
+    lastResult = output;
+  }
+  return lastResult;
+}
 function drawSvgChild(ctx, child, inheritedFill, color, defs = EMPTY_DEFS, vbW = 0, vbH = 0) {
   const { type } = child;
   const props = mergeStyleIntoProps(child.props);
-  if (type === "defs" || type === "clipPath" || type === "mask") return;
+  if (type === "defs" || type === "clipPath" || type === "mask" || type === "filter")
+    return;
+  const transform = type !== "g" ? props.transform : void 0;
+  if (transform) {
+    ctx.save();
+    applySvgTransform(ctx, transform);
+  }
   const clipRef = parseUrlRef(props.clipPath ?? props["clip-path"]);
   const clipShapes = clipRef ? defs.clips.get(clipRef) : void 0;
   const clipPath = clipShapes ? buildClipPath(clipShapes, vbW, vbH) : void 0;
   const maskRef = parseUrlRef(props.mask);
   const maskShapes = maskRef ? defs.masks.get(maskRef) : void 0;
+  const filterRef = parseUrlRef(props.filter);
+  const filterDef = filterRef ? defs.filters.get(filterRef) : void 0;
   if (clipPath) ctx.save();
   if (clipPath) ctx.clip(clipPath);
+  const needsOffscreen = maskShapes || filterDef;
   let elemCanvas;
-  const targetCtx = maskShapes ? (() => {
+  const targetCtx = needsOffscreen ? (() => {
     const [c, cCtx] = acquireOffscreen(Math.ceil(vbW), Math.ceil(vbH));
     elemCanvas = c;
     return cCtx;
@@ -1398,22 +1656,36 @@ function drawSvgChild(ctx, child, inheritedFill, color, defs = EMPTY_DEFS, vbW =
       drawGroup(targetCtx, child, inheritedFill, color, defs, vbW, vbH);
       break;
   }
-  if (maskShapes && elemCanvas) {
-    const [maskCanvas, maskCtx] = acquireOffscreen(
-      Math.ceil(vbW),
-      Math.ceil(vbH)
-    );
-    for (const shape of maskShapes) {
-      drawSvgChild(maskCtx, shape, "white", "white", defs, vbW, vbH);
-    }
-    targetCtx.globalCompositeOperation = "destination-in";
-    targetCtx.drawImage(maskCanvas, 0, 0);
-    targetCtx.globalCompositeOperation = "source-over";
-    ctx.drawImage(elemCanvas, 0, 0);
-    releaseOffscreen(maskCanvas);
+  if (needsOffscreen && elemCanvas) {
+    if (maskShapes) {
+      const [maskCanvas, maskCtx] = acquireOffscreen(
+        Math.ceil(vbW),
+        Math.ceil(vbH)
+      );
+      for (const shape of maskShapes) {
+        drawSvgChild(maskCtx, shape, "white", "white", defs, vbW, vbH);
+      }
+      targetCtx.globalCompositeOperation = "destination-in";
+      targetCtx.drawImage(maskCanvas, 0, 0);
+      targetCtx.globalCompositeOperation = "source-over";
+      releaseOffscreen(maskCanvas);
+    }
+    if (filterDef) {
+      const filteredCanvas = applyFilter(
+        filterDef,
+        elemCanvas,
+        Math.ceil(vbW),
+        Math.ceil(vbH)
+      );
+      ctx.drawImage(filteredCanvas, 0, 0);
+      if (filteredCanvas !== elemCanvas) releaseOffscreen(filteredCanvas);
+    } else {
+      ctx.drawImage(elemCanvas, 0, 0);
+    }
     releaseOffscreen(elemCanvas);
   }
   if (clipPath) ctx.restore();
+  if (transform) ctx.restore();
 }
 function drawPath(ctx, props, inheritedFill, color, defs) {
   const d = props.d;
@@ -1600,14 +1872,34 @@ function parsePoints(value) {
 function applyFillAndStroke(ctx, props, path, inheritedFill, color, defs, bbox) {
   const fill = resolveCurrentColor(props.fill, color) ?? inheritedFill;
   const fillRule = props.fillRule ?? props["fill-rule"];
+  const fillOpacity = Number(props.fillOpacity ?? props["fill-opacity"] ?? 1);
   const fillRef = parseUrlRef(fill);
   if (fillRef) {
     const gradientDef = defs.gradients.get(fillRef);
     if (gradientDef) {
-      fillWithSvgGradient(ctx, gradientDef, bbox, path, fillRule ?? "nonzero");
+      if (fillOpacity < 1) {
+        ctx.save();
+        ctx.globalAlpha *= fillOpacity;
+        fillWithSvgGradient(
+          ctx,
+          gradientDef,
+          bbox,
+          path,
+          fillRule ?? "nonzero"
+        );
+        ctx.restore();
+      } else {
+        fillWithSvgGradient(
+          ctx,
+          gradientDef,
+          bbox,
+          path,
+          fillRule ?? "nonzero"
+        );
+      }
     }
   } else if (fill !== "none") {
-    ctx.fillStyle = fill;
+    ctx.fillStyle = applyOpacity(fill, fillOpacity);
     ctx.fill(path, fillRule ?? "nonzero");
   }
   applyStroke(ctx, props, path, color, defs, bbox);
@@ -1615,6 +1907,9 @@ function applyFillAndStroke(ctx, props, path, inheritedFill, color, defs, bbox)
 function applyStroke(ctx, props, path, color, defs, bbox) {
   const stroke = resolveCurrentColor(props.stroke, color);
   if (!stroke || stroke === "none") return;
+  const strokeOpacity = Number(
+    props.strokeOpacity ?? props["stroke-opacity"] ?? 1
+  );
   ctx.lineWidth = Number(props.strokeWidth ?? props["stroke-width"] ?? 1);
   ctx.lineCap = props.strokeLinecap ?? props["stroke-linecap"] ?? "butt";
   ctx.lineJoin = props.strokeLinejoin ?? props["stroke-linejoin"] ?? "miter";
@@ -1622,11 +1917,18 @@ function applyStroke(ctx, props, path, color, defs, bbox) {
   if (strokeRef) {
     const gradientDef = defs.gradients.get(strokeRef);
     if (gradientDef) {
-      strokeWithSvgGradient(ctx, gradientDef, bbox, path);
+      if (strokeOpacity < 1) {
+        ctx.save();
+        ctx.globalAlpha *= strokeOpacity;
+        strokeWithSvgGradient(ctx, gradientDef, bbox, path);
+        ctx.restore();
+      } else {
+        strokeWithSvgGradient(ctx, gradientDef, bbox, path);
+      }
       return;
     }
   }
-  ctx.strokeStyle = stroke;
+  ctx.strokeStyle = applyOpacity(stroke, strokeOpacity);
   ctx.stroke(path);
 }
 
@@ -2081,10 +2383,14 @@ async function drawNodeCore(ctx, node, parentX, parentY, offsetX, offsetY, debug
     const paddingLeft = resolveBoxValue(style.paddingLeft, width);
     const paddingRight = resolveBoxValue(style.paddingRight, width);
     const paddingBottom = resolveBoxValue(style.paddingBottom, width);
-    const imgX = x + paddingLeft;
-    const imgY = y + paddingTop;
-    const imgW = width - paddingLeft - paddingRight;
-    const imgH = height - paddingTop - paddingBottom;
+    const borderTopW = resolveBoxValue(style.borderTopWidth, width);
+    const borderLeftW = resolveBoxValue(style.borderLeftWidth, width);
+    const borderRightW = resolveBoxValue(style.borderRightWidth, width);
+    const borderBottomW = resolveBoxValue(style.borderBottomWidth, width);
+    const imgX = x + paddingLeft + borderLeftW;
+    const imgY = y + paddingTop + borderTopW;
+    const imgW = width - paddingLeft - paddingRight - borderLeftW - borderRightW;
+    const imgH = height - paddingTop - paddingBottom - borderTopW - borderBottomW;
     if (!isClipped) {
       const borderRadius = getBorderRadiusFromStyle(style, width, height);
       if (hasRadius(borderRadius)) {
@@ -2325,23 +2631,32 @@ function expandStyle(raw, fontFamilies) {
   }
   if (style.flex !== void 0) {
     const val = String(style.flex);
-    const parts = val.split(/\s+/);
-    if (parts.length === 1) {
-      const n = parseFloat(parts[0]);
-      if (!isNaN(n)) {
-        if (style.flexGrow === void 0) style.flexGrow = n;
-        if (style.flexShrink === void 0) style.flexShrink = 1;
-        if (style.flexBasis === void 0) style.flexBasis = 0;
+    if (val === "none") {
+      if (style.flexGrow === void 0) style.flexGrow = 0;
+      if (style.flexShrink === void 0) style.flexShrink = 0;
+      if (style.flexBasis === void 0) style.flexBasis = "auto";
+    } else {
+      const parts = val.split(/\s+/);
+      if (parts.length === 1) {
+        const n = parseFloat(parts[0]);
+        if (!isNaN(n)) {
+          if (style.flexGrow === void 0) style.flexGrow = n;
+          if (style.flexShrink === void 0) style.flexShrink = 1;
+          if (style.flexBasis === void 0) style.flexBasis = 0;
+        }
+      } else if (parts.length === 2) {
+        if (style.flexGrow === void 0)
+          style.flexGrow = parseFloat(parts[0]);
+        if (style.flexShrink === void 0)
+          style.flexShrink = parseFloat(parts[1]);
+      } else if (parts.length >= 3) {
+        if (style.flexGrow === void 0)
+          style.flexGrow = parseFloat(parts[0]);
+        if (style.flexShrink === void 0)
+          style.flexShrink = parseFloat(parts[1]);
+        if (style.flexBasis === void 0)
+          style.flexBasis = parseValue(parts[2]);
       }
-    } else if (parts.length === 2) {
-      if (style.flexGrow === void 0) style.flexGrow = parseFloat(parts[0]);
-      if (style.flexShrink === void 0)
-        style.flexShrink = parseFloat(parts[1]);
-    } else if (parts.length >= 3) {
-      if (style.flexGrow === void 0) style.flexGrow = parseFloat(parts[0]);
-      if (style.flexShrink === void 0)
-        style.flexShrink = parseFloat(parts[1]);
-      if (style.flexBasis === void 0) style.flexBasis = parseValue(parts[2]);
     }
     delete style.flex;
   }
@@ -2853,36 +3168,6 @@ async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewport
       yogaNode
     };
   }
-  if (Array.isArray(element)) {
-    const style2 = resolveStyle(void 0, parentStyle);
-    const children2 = [];
-    for (let i = 0; i < element.length; i++) {
-      const child = element[i];
-      if (child === null || child === void 0 || typeof child === "boolean")
-        continue;
-      const childYogaNode = createYogaNode();
-      yogaNode.insertChild(childYogaNode, children2.length);
-      children2.push(
-        await buildNode(
-          child,
-          style2,
-          childYogaNode,
-          viewportWidth,
-          viewportHeight,
-          ctx,
-          emojiEnabled,
-          fontFamilies
-        )
-      );
-    }
-    return {
-      type: "div",
-      style: style2,
-      children: children2,
-      props: {},
-      yogaNode
-    };
-  }
   const el = element;
   const type = el.type;
   if (typeof type === "function") {
@@ -2983,9 +3268,15 @@ async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewport
       emojiEnabled
     );
     childYogaNode.setMeasureFunc(measureFunc);
-    childYogaNode.setFlexGrow(1);
+    const jc = style.justifyContent;
+    if (!jc || jc === "flex-start") {
+      childYogaNode.setFlexGrow(1);
+    }
     childYogaNode.setFlexShrink(1);
     yogaNode.insertChild(childYogaNode, 0);
+    if (style.flexShrink === void 0) {
+      yogaNode.setFlexShrink(1);
+    }
     return {
       type: tagName,
       style,
@@ -3006,7 +3297,7 @@ async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewport
   const children = [];
   const rawChildren = props.children;
   if (rawChildren !== void 0 && rawChildren !== null) {
-    const childArray = Array.isArray(rawChildren) ? rawChildren : [rawChildren];
+    const childArray = Array.isArray(rawChildren) ? rawChildren.flat(Infinity) : [rawChildren];
     for (const child of childArray) {
       if (child === null || child === void 0 || typeof child === "boolean")
         continue;