fixes zstacking with text

components/canvas/bounds/bounding-box.tsx

@@ -10,7 +10,6 @@ import {
   getSelectedShapes,
   isMobile,
 } from 'utils/utils'
-
 import CenterHandle from './center-handle'
 import CornerHandle from './corner-handle'
 import EdgeHandle from './edge-handle'
@@ -18,8 +17,11 @@ import RotateHandle from './rotate-handle'
 
 export default function Bounds() {
   const isBrushing = useSelector((s) => s.isIn('brushSelecting'))
+
   const isSelecting = useSelector((s) => s.isIn('selecting'))
+
   const zoom = useSelector((s) => getCurrentCamera(s.data).zoom)
+
   const bounds = useSelector((s) => s.values.selectedBounds)
 
   const selectedIds = useSelector(

components/canvas/canvas.tsx

@@ -33,7 +33,7 @@ export default function Canvas() {
           <g ref={rGroup}>
             <BoundsBg />
             <Page />
-            <Selected />
+            {/* <Selected /> */}
             <Bounds />
             <Handles />
             <Brush />

components/canvas/selected.tsx

@@ -46,8 +46,8 @@ export const ShapeOutline = memo(function ShapeOutline({ id }: { id: string }) {
   const center = getShapeUtils(shape).getCenter(shape)
 
   const transform = `
-  rotate(${shape.rotation * (180 / Math.PI)}, ${center})
-  translate(${shape.point})
+    rotate(${shape.rotation * (180 / Math.PI)}, ${center})
+    translate(${shape.point})
   `
 
   return (
@@ -68,7 +68,7 @@ const SelectIndicator = styled('path', {
   strokeLinejoin: 'round',
   stroke: '$selected',
   pointerEvents: 'none',
-  fill: 'none',
+  fill: 'transparent',
 
   variants: {
     isLocked: {