feat: loosen up the zod validations and return null instead of throwing

components/TempDesignSystem/Text/BiroScript/biroScript.module.css

@@ -34,6 +34,10 @@
   text-align: left;
 }
 
+.black {
+  color: #000;
+}
+
 .burgundy {
   color: var(--Scandic-Brand-Burgundy);
 }

components/TempDesignSystem/Text/BiroScript/variants.ts

@@ -5,6 +5,7 @@ import styles from "./biroScript.module.css"
 const config = {
   variants: {
     color: {
+      black: styles.black,
       burgundy: styles.burgundy,
       pale: styles.pale,
       primaryLightOnSurfaceAccent: styles.plosa,

components/TempDesignSystem/Text/Body/body.module.css

@@ -3,6 +3,10 @@
   padding: 0;
 }
 
+.bodyFontOnly {
+  font-style: normal;
+}
+
 .bold {
   font-family: var(--typography-Body-Bold-fontFamily);
   font-size: var(--typography-Body-Bold-fontSize);

components/TempDesignSystem/Text/Body/body.ts

@@ -6,4 +6,5 @@ export interface BodyProps
   extends Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
     VariantProps<typeof bodyVariants> {
   asChild?: boolean
+  fontOnly?: boolean
 }

components/TempDesignSystem/Text/Body/index.tsx

@@ -1,6 +1,6 @@
 import { Slot } from "@radix-ui/react-slot"
 
-import { bodyVariants } from "./variants"
+import { bodyFontOnlyVariants, bodyVariants } from "./variants"
 
 import type { BodyProps } from "./body"
 
@@ -8,16 +8,23 @@ export default function Body({
   asChild = false,
   className = "",
   color,
+  fontOnly = false,
   textAlign,
   textTransform,
   ...props
 }: BodyProps) {
   const Comp = asChild ? Slot : "p"
-  const classNames = bodyVariants({
-    className,
-    color,
-    textAlign,
-    textTransform,
-  })
+  const classNames = fontOnly
+    ? bodyFontOnlyVariants({
+        className,
+        textAlign,
+        textTransform,
+      })
+    : bodyVariants({
+        className,
+        color,
+        textAlign,
+        textTransform,
+      })
   return <Comp className={classNames} {...props} />
 }

components/TempDesignSystem/Text/Body/variants.ts

@@ -27,3 +27,22 @@ const config = {
 } as const
 
 export const bodyVariants = cva(styles.body, config)
+
+const fontOnlyconfig = {
+  variants: {
+    textAlign: {
+      center: styles.textAlignCenter,
+      left: styles.textAlignLeft,
+    },
+    textTransform: {
+      bold: styles.bold,
+      regular: styles.regular,
+      underlined: styles.underlined,
+    },
+  },
+  defaultVariants: {
+    textAlign: "left",
+    textTransform: "regular",
+  },
+} as const
+export const bodyFontOnlyVariants = cva(styles.bodyFontOnly, fontOnlyconfig)

components/TempDesignSystem/Text/Caption/caption.module.css

@@ -1,8 +1,12 @@
-.body {
+.caption {
   margin: 0;
   padding: 0;
 }
 
+.captionFontOnly {
+  font-style: normal;
+}
+
 .bold {
   font-family: var(--typography-Caption-Bold-fontFamily);
   font-size: var(--typography-Caption-Bold-fontSize);

components/TempDesignSystem/Text/Caption/caption.ts

@@ -6,4 +6,5 @@ export interface CaptionProps
   extends Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
     VariantProps<typeof captionVariants> {
   asChild?: boolean
+  fontOnly?: boolean
 }

components/TempDesignSystem/Text/Caption/index.tsx

@@ -1,6 +1,6 @@
 import { Slot } from "@radix-ui/react-slot"
 
-import { captionVariants } from "./variants"
+import { captionVariants, fontOnlycaptionVariants } from "./variants"
 
 import type { CaptionProps } from "./caption"
 
@@ -8,14 +8,20 @@ export default function Caption({
   asChild = false,
   className = "",
   color,
+  fontOnly = false,
   textTransform,
   ...props
 }: CaptionProps) {
   const Comp = asChild ? Slot : "p"
-  const classNames = captionVariants({
-    className,
-    color,
-    textTransform,
-  })
+  const classNames = fontOnly
+    ? fontOnlycaptionVariants({
+        className,
+        textTransform,
+      })
+    : captionVariants({
+        className,
+        color,
+        textTransform,
+      })
   return <Comp className={classNames} {...props} />
 }

components/TempDesignSystem/Text/Caption/variants.ts

@@ -21,3 +21,20 @@ const config = {
 } as const
 
 export const captionVariants = cva(styles.caption, config)
+
+const fontOnlyConfig = {
+  variants: {
+    textTransform: {
+      bold: styles.bold,
+      regular: styles.regular,
+    },
+  },
+  defaultVariants: {
+    textTransform: "regular",
+  },
+} as const
+
+export const fontOnlycaptionVariants = cva(
+  styles.captionFontOnly,
+  fontOnlyConfig
+)

components/TempDesignSystem/Text/Footnote/footnote.module.css

@@ -3,6 +3,10 @@
   padding: 0;
 }
 
+.footnoteFontOnly {
+  font-style: normal;
+}
+
 .bold {
   font-family: var(--typography-Footnote-Bold-fontFamily);
   font-size: var(--typography-Footnote-Bold-fontSize);

components/TempDesignSystem/Text/Footnote/footnote.ts

@@ -6,4 +6,5 @@ export interface FootnoteProps
   extends Omit<React.HTMLAttributes<HTMLParagraphElement>, "color">,
     VariantProps<typeof footnoteVariants> {
   asChild?: boolean
+  fontOnly?: boolean
 }

components/TempDesignSystem/Text/Footnote/index.tsx

@@ -1,6 +1,6 @@
 import { Slot } from "@radix-ui/react-slot"
 
-import { footnoteVariants } from "./variants"
+import { footnoteFontOnlyVariants, footnoteVariants } from "./variants"
 
 import type { FootnoteProps } from "./footnote"
 
@@ -8,16 +8,23 @@ export default function Footnote({
   asChild = false,
   className = "",
   color,
+  fontOnly = false,
   textAlign,
   textTransform,
   ...props
 }: FootnoteProps) {
   const Comp = asChild ? Slot : "p"
-  const classNames = footnoteVariants({
-    className,
-    color,
-    textAlign,
-    textTransform,
-  })
+  const classNames = fontOnly
+    ? footnoteFontOnlyVariants({
+        className,
+        textAlign,
+        textTransform,
+      })
+    : footnoteVariants({
+        className,
+        color,
+        textAlign,
+        textTransform,
+      })
   return <Comp className={classNames} {...props} />
 }

components/TempDesignSystem/Text/Footnote/variants.ts

@@ -24,3 +24,24 @@ const config = {
 } as const
 
 export const footnoteVariants = cva(styles.footnote, config)
+
+const fontOnlyConfig = {
+  variants: {
+    textAlign: {
+      center: styles.center,
+      left: styles.left,
+    },
+    textTransform: {
+      bold: styles.bold,
+      regular: styles.regular,
+    },
+  },
+  defaultVariants: {
+    textTransform: "regular",
+  },
+} as const
+
+export const footnoteFontOnlyVariants = cva(
+  styles.footnoteFontOnly,
+  fontOnlyConfig
+)

components/TempDesignSystem/Text/Subtitle/index.tsx

@@ -1,4 +1,5 @@
 import { Slot } from "@radix-ui/react-slot"
+import { Children } from "react"
 
 import { subtitleVariants } from "./variants"
 
@@ -13,7 +14,7 @@ export default function Subtitle({
   textTransform,
   ...props
 }: SubtitleProps) {
-  if (hideEmpty && !props.children) {
+  if (hideEmpty && Children.count(props.children) === 0) {
     return null
   }
   const Comp = asChild ? Slot : "p"

components/TempDesignSystem/Text/Title/index.tsx

@@ -1,3 +1,5 @@
+import { Children } from "react"
+
 import { headingVariants } from "./variants"
 
 import type { HeadingProps } from "./title"
@@ -12,7 +14,7 @@ export default function Title({
   textAlign,
   textTransform,
 }: HeadingProps) {
-  if (hideEmpty && !children) {
+  if (hideEmpty && Children.count(children) === 0) {
     return null
   }
   const Hx = level

components/TempDesignSystem/Text/Title/title.ts

@@ -2,7 +2,7 @@ import { headingVariants } from "./variants"
 
 import type { VariantProps } from "class-variance-authority"
 
-type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
+type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5"
 
 export interface HeadingProps
   extends Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,

components/TempDesignSystem/Text/Title/variants.ts

@@ -22,7 +22,6 @@ const config = {
       h3: styles.h3,
       h4: styles.h4,
       h5: styles.h5,
-      h6: styles.h6,
     },
   },
   defaultVariants: {