diff --git a/apps/storybook/package.json b/apps/storybook/package.json
index d05cf1c..22442ec 100644
--- a/apps/storybook/package.json
+++ b/apps/storybook/package.json
@@ -16,7 +16,8 @@
   "dependencies": {
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@learnn/designn": "workspace:*"
+    "@learnn/designn": "workspace:*",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@babel/core": "7.21.4",
diff --git a/apps/storybook/stories/RenderMarkdownWithComponents.stories.tsx b/apps/storybook/stories/RenderMarkdownWithComponents.stories.tsx
new file mode 100644
index 0000000..cb73088
--- /dev/null
+++ b/apps/storybook/stories/RenderMarkdownWithComponents.stories.tsx
@@ -0,0 +1,276 @@
+import { z } from 'zod'
+import {
+  AppShell,
+  Button,
+  defaultTheme,
+  RenderMarkdownWithComponents,
+  defineMarkdownComponent,
+  defineMarkdownComponents,
+} from '@learnn/designn'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import React from 'react'
+
+export default {
+  title: 'Components/RenderMarkdownWithComponents',
+  component: RenderMarkdownWithComponents,
+} as ComponentMeta<typeof RenderMarkdownWithComponents>
+
+function bind(node: JSX.Element) {
+  const template: ComponentStory<typeof RenderMarkdownWithComponents> = () => node
+  return template.bind({})
+}
+
+const HighlightBox: React.FC<{ color?: string; children?: React.ReactNode }> = ({
+  color = 'yellow',
+  children,
+}) => {
+  return (
+    <div
+      style={{
+        backgroundColor: color === 'yellow' ? '#fff9c4' : '#c8e6c9',
+        padding: '12px',
+        borderRadius: '8px',
+        margin: '16px 0',
+        border: `2px solid ${color === 'yellow' ? '#fdd835' : '#66bb6a'}`,
+      }}
+    >
+      {children}
+    </div>
+  )
+}
+
+const MARKDOWN_WITHOUT_COMPONENTS = `
+# Main Title
+
+This is an example paragraph with **bold** and *italic* text.
+
+## Subtitle
+
+- Bullet point
+- Another item
+- Third item
+
+\`\`\`javascript
+console.log('Example code');
+\`\`\`
+`
+
+export const MarkdownWithoutComponents = bind(
+  <AppShell theme={defaultTheme}>
+    <div style={{ maxWidth: '700px', margin: '0 auto', padding: '20px' }}>
+      <RenderMarkdownWithComponents components={[]}>
+        {MARKDOWN_WITHOUT_COMPONENTS}
+      </RenderMarkdownWithComponents>
+    </div>
+  </AppShell>,
+)
+
+MarkdownWithoutComponents.storyName = 'Markdown without components'
+
+const buttonComponent = defineMarkdownComponent({
+  tag: 'button',
+  props: z.object({
+    variant: z.union([z.literal('primary'), z.literal('secondary'), z.literal('tertiary')]),
+  }),
+  component: ({ variant }) => (
+    <Button variant={variant} label="Click here" onPress={() => alert('Clicked!')} />
+  ),
+})
+
+const MARKDOWN_WITH_ONE_PROP = `
+# Example with Button
+
+This is a normal paragraph.
+
+<button variant="primary" />
+
+Here's another paragraph after the component.
+`
+
+export const MarkdownWithOneProp = bind(
+  <AppShell theme={defaultTheme}>
+    <div style={{ maxWidth: '700px', margin: '0 auto', padding: '20px' }}>
+      <RenderMarkdownWithComponents components={defineMarkdownComponents(buttonComponent)}>
+        {MARKDOWN_WITH_ONE_PROP}
+      </RenderMarkdownWithComponents>
+    </div>
+  </AppShell>,
+)
+
+MarkdownWithOneProp.storyName = 'Markdown with component and one prop'
+
+const buttonWithSizeComponent = defineMarkdownComponent({
+  tag: 'button',
+  props: z.object({
+    variant: z.union([z.literal('primary'), z.literal('secondary'), z.literal('tertiary')]),
+    size: z.union([z.literal('sm'), z.literal('md'), z.literal('lg')]),
+  }),
+  component: ({ variant, size }) => (
+    <Button variant={variant} size={size} label="Large button" onPress={() => alert('Clicked!')} />
+  ),
+})
+
+const MARKDOWN_WITH_TWO_PROPS = `
+# Example with Button and two props
+
+This is a normal paragraph.
+
+<button variant="secondary" size="lg" />
+
+Here's another paragraph after the component.
+`
+
+export const MarkdownWithTwoProps = bind(
+  <AppShell theme={defaultTheme}>
+    <div style={{ maxWidth: '700px', margin: '0 auto', padding: '20px' }}>
+      <RenderMarkdownWithComponents components={defineMarkdownComponents(buttonWithSizeComponent)}>
+        {MARKDOWN_WITH_TWO_PROPS}
+      </RenderMarkdownWithComponents>
+    </div>
+  </AppShell>,
+)
+
+MarkdownWithTwoProps.storyName = 'Markdown with component and two props'
+
+const MARKDOWN_WITH_INVALID_PROPS = `
+# Example with invalid props
+
+This is a normal paragraph.
+
+<button variant="invalid" />
+
+This tag will not be validated and will be displayed as normal text.
+
+<button variant="primary" invalidProp="test" />
+
+This one also won't be validated because it has an unexpected prop.
+`
+
+export const MarkdownWithInvalidProps = bind(
+  <AppShell theme={defaultTheme}>
+    <div style={{ maxWidth: '700px', margin: '0 auto', padding: '20px' }}>
+      <RenderMarkdownWithComponents components={defineMarkdownComponents(buttonComponent)}>
+        {MARKDOWN_WITH_INVALID_PROPS}
+      </RenderMarkdownWithComponents>
+    </div>
+  </AppShell>,
+)
+
+MarkdownWithInvalidProps.storyName = 'Markdown with component with invalid props'
+
+const MARKDOWN_WITH_VALID_AND_INVALID_PROPS = `
+# Example with valid and invalid props
+
+This is a normal paragraph.
+
+<button variant="primary" />
+
+This component will be rendered correctly.
+
+<button variant="invalid" />
+
+This one won't be validated and will be displayed as text.
+
+<button variant="secondary" />
+
+And this one will be rendered correctly.
+`
+
+export const MarkdownWithValidAndInvalidProps = bind(
+  <AppShell theme={defaultTheme}>
+    <div style={{ maxWidth: '700px', margin: '0 auto', padding: '20px' }}>
+      <RenderMarkdownWithComponents components={defineMarkdownComponents(buttonComponent)}>
+        {MARKDOWN_WITH_VALID_AND_INVALID_PROPS}
+      </RenderMarkdownWithComponents>
+    </div>
+  </AppShell>,
+)
+
+MarkdownWithValidAndInvalidProps.storyName = 'Markdown with component with both valid and invalid props'
+
+const highlightComponent = defineMarkdownComponent({
+  tag: 'highlight',
+  props: z.object({
+    color: z.union([z.literal('yellow'), z.literal('green')]),
+  }),
+  component: ({ color, children }) => (
+    <HighlightBox color={color}>
+      <RenderMarkdownWithComponents components={[]}>{children || ''}</RenderMarkdownWithComponents>
+    </HighlightBox>
+  ),
+})
+
+const MARKDOWN_WITH_CHILDREN = `
+# Example with component and children
+
+This is a normal paragraph.
+
+<highlight color="yellow">
+This is the content inside the highlight component. It can contain **markdown** and *formatting*.
+</highlight>
+
+Another normal paragraph.
+
+<highlight color="green">
+This is another highlight with green color. It can also contain lists:
+- Item 1
+- Item 2
+- Item 3
+</highlight>
+
+Final paragraph.
+`
+
+export const MarkdownWithChildren = bind(
+  <AppShell theme={defaultTheme}>
+    <div style={{ maxWidth: '700px', margin: '0 auto', padding: '20px' }}>
+      <RenderMarkdownWithComponents components={defineMarkdownComponents(highlightComponent)}>
+        {MARKDOWN_WITH_CHILDREN}
+      </RenderMarkdownWithComponents>
+    </div>
+  </AppShell>,
+)
+
+MarkdownWithChildren.storyName = 'Markdown with component that requires children'
+
+const MARKDOWN_WITH_TWO_COMPONENTS = `
+# Example with two different components
+
+This is a normal paragraph with some text.
+
+<button variant="primary" />
+
+Here's some more text between components.
+
+<highlight color="yellow">
+This is a highlight box with **bold text** and *italic text*.
+</highlight>
+
+Another paragraph with regular text.
+
+<button variant="secondary" />
+
+<highlight color="green">
+This is another highlight with a different color. It can contain:
+- Lists
+- **Formatted text**
+- Multiple lines
+</highlight>
+
+Final paragraph to show text after components.
+`
+
+export const MarkdownWithTwoComponents = bind(
+  <AppShell theme={defaultTheme}>
+    <div style={{ maxWidth: '700px', margin: '0 auto', padding: '20px' }}>
+      <RenderMarkdownWithComponents
+        components={defineMarkdownComponents(buttonComponent, highlightComponent)}
+      >
+        {MARKDOWN_WITH_TWO_COMPONENTS}
+      </RenderMarkdownWithComponents>
+    </div>
+  </AppShell>,
+)
+
+MarkdownWithTwoComponents.storyName = 'Markdown with two different components'
+
diff --git a/packages/designn/package.json b/packages/designn/package.json
index b568833..8652871 100644
--- a/packages/designn/package.json
+++ b/packages/designn/package.json
@@ -42,7 +42,8 @@
     "remark-gfm": "^1.0.0",
     "styled-components": "6.1.8",
     "styled-system": "^5.1.5",
-    "use-places-autocomplete": "^4.0.1"
+    "use-places-autocomplete": "^4.0.1",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@babel/preset-env": "7.21.4",
@@ -55,6 +56,7 @@
     "@testing-library/react-hooks": "8.0.1",
     "@testing-library/user-event": "14.4.3",
     "@types/jest": "29.5.1",
+    "@types/node": "^18.0.0",
     "@types/react": "^18.0.33",
     "@types/react-dom": "18.2.1",
     "@types/testing-library__jest-dom": "5.14.5",
@@ -67,8 +69,7 @@
     "lint-staged": "13.1.2",
     "ts-jest": "29.0.5",
     "tsup": "6.5.0",
-    "typescript": "4.9.5",
-    "@types/node": "^18.0.0"
+    "typescript": "4.9.5"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0"
diff --git a/packages/designn/src/components/FormattedMarkdown.tsx b/packages/designn/src/components/FormattedMarkdown.tsx
index 88cb8b3..0149495 100644
--- a/packages/designn/src/components/FormattedMarkdown.tsx
+++ b/packages/designn/src/components/FormattedMarkdown.tsx
@@ -14,7 +14,7 @@ import remarkGfm from 'remark-gfm'
 import React from 'react'
 import { useState } from 'react'
 
-export type FormattedMarkdownSize = 'sm' | 'xs'
+export type FormattedMarkdownSize = 'md' | 'sm' | 'xs'
 export type FormattedMarkdownColorVariants = 'primary' | 'secondary'
 
 type MarkdownOverrides = {
diff --git a/packages/designn/src/components/RenderMarkdownWithComponents/RenderMarkdownWithComponents.tsx b/packages/designn/src/components/RenderMarkdownWithComponents/RenderMarkdownWithComponents.tsx
new file mode 100644
index 0000000..a4303e9
--- /dev/null
+++ b/packages/designn/src/components/RenderMarkdownWithComponents/RenderMarkdownWithComponents.tsx
@@ -0,0 +1,69 @@
+import * as React from 'react'
+import { z } from 'zod'
+import { componentSplitter } from './splitter'
+import { FormattedMarkdown, FormattedMarkdownProps, FormattedMarkdownSize } from '../FormattedMarkdown'
+
+type AnyZod = z.ZodTypeAny
+type SchemaProps<S extends AnyZod> = z.infer<S>
+
+type WithMarkdownChildren<P> = P & { children?: string }
+
+export type MarkdownComponentConfig<Tag extends string, S extends AnyZod> = {
+  tag: Tag
+  props: S
+  component: React.ComponentType<WithMarkdownChildren<SchemaProps<S>>>
+}
+
+export function defineMarkdownComponent<Tag extends string, S extends AnyZod>(
+  cfg: MarkdownComponentConfig<Tag, S>,
+): MarkdownComponentConfig<Tag, S> {
+  return cfg
+}
+
+export function defineMarkdownComponents<Cs extends readonly MarkdownComponentConfig<string, AnyZod>[]>(
+  ...components: Cs
+): Cs {
+  return components
+}
+
+export type RenderMarkdownWithComponentsProps<
+  Cs extends readonly MarkdownComponentConfig<string, AnyZod>[],
+> = {
+  components: Cs
+  children: string
+  size?: FormattedMarkdownSize
+}
+
+export function RenderMarkdownWithComponents<
+  Cs extends readonly MarkdownComponentConfig<string, AnyZod>[],
+>({ children, components, size = 'sm', ...formattedMarkdownProps }: RenderMarkdownWithComponentsProps<Cs> & FormattedMarkdownProps) {
+  const parts = componentSplitter(children, [...components])
+
+  return (
+    <>
+      {parts.map((part, index) => {
+        if (part.type === 'text') {
+          return (
+            <FormattedMarkdown key={index} size={size} {...formattedMarkdownProps}>
+              {part.content}
+            </FormattedMarkdown>
+          )
+        } else if (part.type === 'component') {
+          const config = components[part.componentIndex]
+          if (!config) {
+            return (
+              <FormattedMarkdown key={index} size={size} {...formattedMarkdownProps}>
+                {part.children || ''}
+              </FormattedMarkdown>
+            )
+          }
+
+          const Component = config.component
+          const props = { ...(part.props as Record<string, unknown>), children: part.children }
+          return React.createElement(Component as React.ComponentType<any>, { key: index, ...props })
+        }
+        return null
+      })}
+    </>
+  )
+}
diff --git a/packages/designn/src/components/RenderMarkdownWithComponents/index.ts b/packages/designn/src/components/RenderMarkdownWithComponents/index.ts
new file mode 100644
index 0000000..e75df31
--- /dev/null
+++ b/packages/designn/src/components/RenderMarkdownWithComponents/index.ts
@@ -0,0 +1,5 @@
+export { RenderMarkdownWithComponents, defineMarkdownComponent, defineMarkdownComponents } from './RenderMarkdownWithComponents'
+export type { MarkdownComponentConfig, RenderMarkdownWithComponentsProps } from './RenderMarkdownWithComponents'
+export type { ComponentConfig, Part } from './splitter'
+export { componentSplitter } from './splitter'
+export { extractAttributesFromXmlTag, extractChildrenFromXmlTag, validateProps } from './utils'
diff --git a/packages/designn/src/components/RenderMarkdownWithComponents/splitter.ts b/packages/designn/src/components/RenderMarkdownWithComponents/splitter.ts
new file mode 100644
index 0000000..280c04e
--- /dev/null
+++ b/packages/designn/src/components/RenderMarkdownWithComponents/splitter.ts
@@ -0,0 +1,190 @@
+import React from 'react'
+import { z } from 'zod'
+import { extractAttributesFromXmlTag, extractChildrenFromXmlTag, validateProps } from './utils'
+
+type AnyZod = z.ZodTypeAny
+type SchemaProps<S extends AnyZod> = z.infer<S>
+
+type WithMarkdownChildren<P> = P & { children?: string }
+
+export type MarkdownComponentConfig<Tag extends string, S extends AnyZod> = {
+  tag: Tag
+  props: S
+  component:
+    | React.ComponentType<WithMarkdownChildren<SchemaProps<S>>>
+    | ((props: WithMarkdownChildren<SchemaProps<S>>) => React.ReactNode)
+}
+
+export type ComponentConfig<S extends AnyZod> = MarkdownComponentConfig<string, S>
+
+export type Part = 
+  | {
+      type: 'text'
+      content: string
+    }
+  | {
+      type: 'component'
+      tag: string
+      props: Record<string, unknown>
+      children?: string
+      componentIndex: number
+    }
+
+
+function findClosingTagIndex(
+  openingTag: string,
+  tagName: string,
+  fullText: string,
+  tagStartIndex: number
+): number | null {
+  if (openingTag.trim().endsWith('/>')) {
+    return null // Self-closing tag, no closing tag
+  }
+  
+  const openingTagEnd = tagStartIndex + openingTag.length
+  let depth = 1
+  let currentIndex = openingTagEnd
+  const openingPattern = new RegExp(`<${tagName}(?:\\s+[^>]*)?>`, 'gi')
+  const closingPattern = new RegExp(`</${tagName}\\s*>`, 'gi')
+  
+  while (depth > 0 && currentIndex < fullText.length) {
+    openingPattern.lastIndex = currentIndex
+    closingPattern.lastIndex = currentIndex
+    
+    const nextOpen = openingPattern.exec(fullText)
+    const nextClose = closingPattern.exec(fullText)
+    
+    openingPattern.lastIndex = 0
+    closingPattern.lastIndex = 0
+    
+    let openIndex = nextOpen ? nextOpen.index : Infinity
+    let closeIndex = nextClose ? nextClose.index : Infinity
+    
+    if (closeIndex < openIndex) {
+      depth--
+      if (depth === 0) {
+        return closeIndex + (nextClose?.[0]?.length ?? 0)
+      }
+      currentIndex = closeIndex + (nextClose?.[0]?.length ?? 0)
+    } else if (openIndex < Infinity) {
+      depth++
+      currentIndex = openIndex + (nextOpen?.[0]?.length ?? 0)
+    } else {
+      return null
+    }
+  }
+  
+  return null
+}
+
+export function componentSplitter<S extends AnyZod>(
+  text: string,
+  configs: ComponentConfig<S>[]
+): Part[] {
+  const tagNames = configs.map(c => c.tag).join('|')
+  const pattern = new RegExp(`(<(${tagNames})\\s+[^>]*/?>)`, 'gi')
+  
+  const segments: Array<{ content: string; isTag: boolean; index: number; endIndex?: number }> = []
+  let lastIndex = 0
+  let match
+  
+  while ((match = pattern.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      segments.push({
+        content: text.substring(lastIndex, match.index),
+        isTag: false,
+        index: lastIndex
+      })
+    }
+    
+    const tagMatch = match[0].match(/<(\w+)/i)
+    const tagName = tagMatch?.[1]?.toLowerCase()
+    const config = tagName ? configs.find(c => c.tag.toLowerCase() === tagName) : null
+    
+    let endIndex: number | undefined = undefined
+    if (config && tagName && !match[0].trim().endsWith('/>')) {
+      const closingIndex = findClosingTagIndex(match[0], tagName, text, match.index)
+      if (closingIndex !== null) {
+        endIndex = closingIndex
+      }
+    }
+    
+    segments.push({
+      content: match[0],
+      isTag: true,
+      index: match.index,
+      endIndex
+    })
+    
+    if (endIndex !== undefined) {
+      lastIndex = endIndex
+    } else {
+      lastIndex = match.index + match[0].length
+    }
+  }
+  
+  if (lastIndex < text.length) {
+    segments.push({
+      content: text.substring(lastIndex),
+      isTag: false,
+      index: lastIndex
+    })
+  }
+  
+  const parts: Part[] = []
+  
+  for (const segment of segments) {
+    if (!segment.isTag) {
+      if (segment.content) {
+        parts.push({
+          type: 'text',
+          content: segment.content
+        })
+      }
+    } else {
+      const tagMatch = segment.content.match(/<(\w+)/i)
+      if (!tagMatch) {
+        parts.push({
+          type: 'text',
+          content: segment.content
+        })
+        continue
+      }
+      
+      const tagName = tagMatch[1].toLowerCase()
+      const config = configs.find(c => c.tag.toLowerCase() === tagName)
+      
+      if (!config) {
+        parts.push({
+          type: 'text',
+          content: segment.content
+        })
+        continue
+      }
+      
+      const attributes = extractAttributesFromXmlTag(segment.content)
+      
+      const validation = validateProps(attributes, config.props)
+      
+      if (!validation.success) {
+        parts.push({
+          type: 'text',
+          content: segment.content
+        })
+      } else {
+        const children = extractChildrenFromXmlTag(segment.content, text, segment.index)
+        const componentIndex = configs.indexOf(config)
+        
+        parts.push({
+          type: 'component',
+          tag: config.tag,
+          props: validation.data,
+          children: children || undefined,
+          componentIndex
+        })
+      }
+    }
+  }
+  
+  return parts
+}
diff --git a/packages/designn/src/components/RenderMarkdownWithComponents/utils.ts b/packages/designn/src/components/RenderMarkdownWithComponents/utils.ts
new file mode 100644
index 0000000..bd498bc
--- /dev/null
+++ b/packages/designn/src/components/RenderMarkdownWithComponents/utils.ts
@@ -0,0 +1,85 @@
+import { z } from 'zod'
+
+/**
+ * Estrae tutti gli attributi da un tag XML come oggetto chiave-valore
+ */
+export function extractAttributesFromXmlTag(xmlTag: string): Record<string, string> {
+  const cleaned = xmlTag.replace(/[""]/g, '"')
+  
+  const attributes: Record<string, string> = {}
+  
+  const attributePattern = /(\w+)="([^"]*)"|(\w+)='([^']*)'/g
+  let match
+  
+  while ((match = attributePattern.exec(cleaned)) !== null) {
+    const name = match[1] || match[3]
+    const value = match[2] || match[4]
+    if (name) {
+      attributes[name] = value
+    }
+  }
+  
+  return attributes
+}
+
+/**
+ * Estrae il contenuto interno di un tag XML (children)
+ * Gestisce correttamente i tag annidati dello stesso tipo
+ */
+export function extractChildrenFromXmlTag(xmlTag: string, fullText: string, tagStartIndex: number): string {
+  if (xmlTag.trim().endsWith('/>')) {
+    return ''
+  }
+  
+  const tagNameMatch = xmlTag.match(/<(\w+)/)
+  if (!tagNameMatch) {
+    return ''
+  }
+  
+  const tagName = tagNameMatch[1]
+  const openingTagEnd = tagStartIndex + xmlTag.length
+  
+  let depth = 1
+  let currentIndex = openingTagEnd
+  const openingPattern = new RegExp(`<${tagName}(?:\\s+[^>]*)?>`, 'gi')
+  const closingPattern = new RegExp(`</${tagName}\\s*>`, 'gi')
+  
+  while (depth > 0 && currentIndex < fullText.length) {
+    openingPattern.lastIndex = currentIndex
+    closingPattern.lastIndex = currentIndex
+    
+    const nextOpen = openingPattern.exec(fullText)
+    const nextClose = closingPattern.exec(fullText)
+    
+    openingPattern.lastIndex = 0
+    closingPattern.lastIndex = 0
+    
+    let openIndex = nextOpen ? nextOpen.index : Infinity
+    let closeIndex = nextClose ? nextClose.index : Infinity
+    
+    if (closeIndex < openIndex) {
+      depth--
+      if (depth === 0) {
+        return fullText.substring(openingTagEnd, closeIndex)
+      }
+      currentIndex = closeIndex + (nextClose?.[0]?.length ?? 0)
+    } else if (openIndex < Infinity) {
+      depth++
+      currentIndex = openIndex + (nextOpen?.[0]?.length ?? 0)
+    } else {
+      return ''
+    }
+  }
+  
+  return ''
+}
+
+/**
+ * Valida gli attributi XML estratti contro uno schema Zod
+ */
+export function validateProps<S extends z.ZodTypeAny>(
+  attributes: Record<string, string>,
+  schema: S
+): z.SafeParseReturnType<Record<string, string>, z.infer<S>> {
+  return schema.safeParse(attributes)
+}
diff --git a/packages/designn/src/components/index.ts b/packages/designn/src/components/index.ts
index 7a3c78a..01ea15c 100644
--- a/packages/designn/src/components/index.ts
+++ b/packages/designn/src/components/index.ts
@@ -34,3 +34,4 @@ export * from './Tooltip'
 export * from './ExpertCard'
 export * from './AiReferenceCard'
 export * from './ResourceCard'
+export * from './RenderMarkdownWithComponents'
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ad973d9..bbd41d3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -38,6 +38,9 @@ importers:
       '@learnn/designn':
         specifier: workspace:*
         version: link:../../packages/designn
+      zod:
+        specifier: ^3.23.8
+        version: 3.25.76
     devDependencies:
       '@babel/core':
         specifier: 7.21.4
@@ -156,6 +159,9 @@ importers:
       use-places-autocomplete:
         specifier: ^4.0.1
         version: 4.0.1(react@18.2.0)
+      zod:
+        specifier: ^3.23.8
+        version: 3.25.76
     devDependencies:
       '@babel/preset-env':
         specifier: 7.21.4
@@ -1048,6 +1054,7 @@ packages:
 
   '@fortawesome/react-fontawesome@0.2.0':
     resolution: {integrity: sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==}
+    deprecated: v0.2.x is no longer supported. Unless you are still using FontAwesome 5, please update to v3.1.1 or greater.
     peerDependencies:
       '@fortawesome/fontawesome-svg-core': ~1 || ~6
       react: '>=16.3'
@@ -6311,6 +6318,7 @@ packages:
   source-map@0.8.0-beta.0:
     resolution: {integrity: sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==}
     engines: {node: '>= 8'}
+    deprecated: The work that was done in this beta branch won't be included in future versions
 
   space-separated-tokens@1.1.5:
     resolution: {integrity: sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==}
@@ -7249,6 +7257,9 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
 
+  zod@3.25.76:
+    resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
+
   zwitch@1.0.5:
     resolution: {integrity: sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw==}
 
@@ -16518,4 +16529,6 @@ snapshots:
 
   yocto-queue@0.1.0: {}
 
+  zod@3.25.76: {}
+
   zwitch@1.0.5: {}