fix: filter out empty children

components/TempDesignSystem/Text/Subtitle/index.tsx

@@ -1,6 +1,6 @@
 import { Slot } from "@radix-ui/react-slot"
-import { Children } from "react"
 
+import { checkForEmptyChildren } from "../../utils/checkForEmptyChildren"
 import { subtitleVariants } from "./variants"
 
 import type { SubtitleProps } from "./subtitle"
@@ -13,7 +13,7 @@ export default function Subtitle({
   textTransform,
   ...props
 }: SubtitleProps) {
-  if (Children.toArray(props.children).length === 0) {
+  if (checkForEmptyChildren(props.children) === 0) {
     return null
   }
   const Comp = asChild ? Slot : "p"

components/TempDesignSystem/Text/Title/index.tsx

@@ -1,5 +1,4 @@
-import { Children } from "react"
-
+import { checkForEmptyChildren } from "../../utils/checkForEmptyChildren"
 import { headingVariants } from "./variants"
 
 import type { HeadingProps } from "./title"
@@ -13,7 +12,7 @@ export default function Title({
   textAlign,
   textTransform,
 }: HeadingProps) {
-  if (Children.toArray(children).length === 0) {
+  if (checkForEmptyChildren(children) === 0) {
     return null
   }
   const Hx = level

components/TempDesignSystem/utils/checkForEmptyChildren.ts

@@ -0,0 +1,13 @@
+import { Children, type ReactNode } from "react"
+
+export function checkForEmptyChildren(children: ReactNode) {
+  return Children.toArray(children).filter((child) => {
+    if (child === "") {
+      return false
+    } else if (child == null) {
+      return false
+    } else {
+      return true
+    }
+  }).length
+}