@olwiba/ui 0.0.35 → 0.0.37

package/dist/index.d.ts

@@ -242,12 +242,14 @@ interface HeroSectionProps {
         label: string;
         href: string;
     };
-    heroImage: React.ReactNode;
+    heroImage?: React.ReactNode;
+    media?: 'image' | 'phone' | 'none';
+    phoneSize?: 'sm' | 'md' | 'lg';
     avatarUrls?: string[];
     socialProofText?: string;
     renderLink?: AppShellRenderLink;
 }
-declare function HeroSection({ heading, badge, description, primaryCta, secondaryCta, heroImage, avatarUrls, socialProofText, renderLink, }: HeroSectionProps): react_jsx_runtime.JSX.Element;
+declare function HeroSection({ heading, badge, description, primaryCta, secondaryCta, heroImage, media, phoneSize, avatarUrls, socialProofText, renderLink, }: HeroSectionProps): react_jsx_runtime.JSX.Element;
 
 interface FeaturesSectionProps {
     title?: string;
@@ -357,9 +359,36 @@ interface StatsSectionProps {
 }
 declare function StatsSection({ title, description, badge, stats, }: StatsSectionProps): react_jsx_runtime.JSX.Element;
 
-declare function NewsletterSection(): react_jsx_runtime.JSX.Element;
+interface NewsletterSectionProps {
+    badge?: string;
+    title?: string;
+    description?: string;
+    placeholder?: string;
+    submitLabel?: string;
+    privacyHref?: string;
+    privacyLabel?: string;
+    successTitle?: string;
+    successDescription?: string;
+    onSubscribe?: (email: string) => void | Promise<void>;
+}
+declare function NewsletterSection({ badge, title, description, placeholder, submitLabel, privacyHref, privacyLabel, successTitle, successDescription, onSubscribe, }?: NewsletterSectionProps): react_jsx_runtime.JSX.Element;
 
-declare function ContactSection(): react_jsx_runtime.JSX.Element;
+type ContactInfoItem = {
+    label: string;
+    value: string;
+    icon?: LucideIcon;
+};
+interface ContactSectionProps {
+    badge?: string;
+    title?: string;
+    description?: string;
+    contactInfo?: ContactInfoItem[];
+    successTitle?: string;
+    successDescription?: string;
+    sendAnotherLabel?: string;
+    onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void | Promise<void>;
+}
+declare function ContactSection({ badge, title, description, contactInfo, successTitle, successDescription, sendAnotherLabel, onSubmit, }?: ContactSectionProps): react_jsx_runtime.JSX.Element;
 
 interface NavbarProps {
     brand: {
@@ -600,6 +629,54 @@ interface ConfirmDialogProps extends Pick<UseConfirmReturn, 'isOpen' | 'options'
 }
 declare function ConfirmDialog({ isOpen, options, handleConfirm, handleCancel, destructive }: ConfirmDialogProps): react_jsx_runtime.JSX.Element;
 
+declare const sizes: {
+    readonly sm: {
+        readonly outer: "w-44";
+        readonly height: "h-80";
+        readonly notch: "w-16 h-4";
+        readonly border: "rounded-[2rem]";
+        readonly screen: "rounded-[1.75rem]";
+    };
+    readonly md: {
+        readonly outer: "w-56";
+        readonly height: "h-[26rem]";
+        readonly notch: "w-20 h-5";
+        readonly border: "rounded-[2.5rem]";
+        readonly screen: "rounded-[2.25rem]";
+    };
+    readonly lg: {
+        readonly outer: "w-72";
+        readonly height: "h-[34rem]";
+        readonly notch: "w-24 h-6";
+        readonly border: "rounded-[3rem]";
+        readonly screen: "rounded-[2.75rem]";
+    };
+};
+interface PhoneFrameProps {
+    children?: React.ReactNode;
+    size?: keyof typeof sizes;
+    className?: string;
+    float?: boolean;
+}
+declare function PhoneFrame({ children, size, className, float }: PhoneFrameProps): react_jsx_runtime.JSX.Element;
+
+declare function AppScreenRoot({ children, className }: {
+    children?: React.ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function AppScreenHeader({ children, className }: {
+    children?: React.ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function AppScreenBody({ children, className }: {
+    children?: React.ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare const AppScreen: typeof AppScreenRoot & {
+    Header: typeof AppScreenHeader;
+    Body: typeof AppScreenBody;
+};
+
 interface GlassCardProps extends React.HTMLAttributes<HTMLDivElement> {
     blur?: 'sm' | 'md' | 'lg';
     children: React.ReactNode;
@@ -737,6 +814,11 @@ interface PostListProps {
 }
 declare function PostList({ posts, renderLink, emptyMessage }: PostListProps): react_jsx_runtime.JSX.Element;
 
+interface MdxContentProps {
+    code: string;
+}
+declare function MdxContent({ code }: MdxContentProps): react_jsx_runtime.JSX.Element;
+
 declare function useMounted(): boolean;
 
 interface UseControlledOpenReturn {
@@ -793,4 +875,4 @@ interface UsePaginationReturn {
 }
 declare function usePagination(total: number, pageSize: number): UsePaginationReturn;
 
-export { type AppNavItem, AppShell, type AppShellAction, type AppShellBrand, type AppShellProps, type AppShellRenderLink, type AppShellUser, type AuthFormProps, AuthSection, type AuthSectionProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, ConfirmDialog, type ConfirmDialogProps, type ConfirmOptions, ContactSection, ContextMenu, type ContextMenuDef, type ContextMenuProps, CountUp, type CountUpProps, CtaSection, type CtaSectionProps, DevBanner, type DevBannerProps, Dock, type DockItem, type DockProps, EmptyState, type EmptyStateProps, ErrorPage, type ErrorPageProps, FadeIn, type FadeInProps, FaqSection, type FaqSectionProps, FeatureCard, type FeatureCardProps, FeaturesSection, type FeaturesSectionProps, Footer, type FooterProps, FullPageSpinner, GlassCard, type GlassCardProps, HeroSection, type HeroSectionProps, type Hotkey, ImageCard, type ImageCardProps, Input, type InputProps, LogoStrip, type LogoStripProps, Navbar, type NavbarProps, NewsletterSection, OlwibaUIProvider, type OlwibaUIProviderProps, Overlay, type OverlayProps, type OverlayVariant, PageHeader, type PageHeaderBackButton, type PageHeaderBreadcrumb, type PageHeaderProps, PageTransition, type PageTransitionProps, PostCard, type PostCardProps, PostList, type PostListProps, PricingCard, type PricingCardProps, type PricingFeature, type PricingPlan, PricingSection, type PricingSectionProps, RegisterHotkeys, RootErrorFallback, SectionTitle, type SectionTitleProps, Spotlight, type SpotlightGroup, type SpotlightItem, type SpotlightProps, StaggerChildren, type StaggerChildrenProps, StatCard, type StatCardProps, StatsSection, type StatsSectionProps, Suspensed, Switch, type SwitchProps, TeamSection, TestimonialCard, type TestimonialCardProps, TestimonialsSection, type TestimonialsSectionProps, Textarea, type TextareaProps, ThemeColorUpdater, ThemeSwitchMinimal, type UIMode, Underlay, type UnderlayProps, type UnderlayVariant, type UpgradeComparisonRow, UpgradePrompt, type UpgradePromptProps, type UseConfirmReturn, type UseControlledOpenReturn, type UsePaginationReturn, VersionBanner, cn, useConfirm, useControlledOpen, useCopyToClipboard, useDebounce, useIntersectionObserver, useLocalStorage, useMediaQuery, useMounted, useOlwibaUI, usePagination, useScrolledPast, useUIMode };
+export { type AppNavItem, AppScreen, AppShell, type AppShellAction, type AppShellBrand, type AppShellProps, type AppShellRenderLink, type AppShellUser, type AuthFormProps, AuthSection, type AuthSectionProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, ConfirmDialog, type ConfirmDialogProps, type ConfirmOptions, type ContactInfoItem, ContactSection, type ContactSectionProps, ContextMenu, type ContextMenuDef, type ContextMenuProps, CountUp, type CountUpProps, CtaSection, type CtaSectionProps, DevBanner, type DevBannerProps, Dock, type DockItem, type DockProps, EmptyState, type EmptyStateProps, ErrorPage, type ErrorPageProps, FadeIn, type FadeInProps, FaqSection, type FaqSectionProps, FeatureCard, type FeatureCardProps, FeaturesSection, type FeaturesSectionProps, Footer, type FooterProps, FullPageSpinner, GlassCard, type GlassCardProps, HeroSection, type HeroSectionProps, type Hotkey, ImageCard, type ImageCardProps, Input, type InputProps, LogoStrip, type LogoStripProps, MdxContent, type MdxContentProps, Navbar, type NavbarProps, NewsletterSection, type NewsletterSectionProps, OlwibaUIProvider, type OlwibaUIProviderProps, Overlay, type OverlayProps, type OverlayVariant, PageHeader, type PageHeaderBackButton, type PageHeaderBreadcrumb, type PageHeaderProps, PageTransition, type PageTransitionProps, PhoneFrame, type PhoneFrameProps, PostCard, type PostCardProps, PostList, type PostListProps, PricingCard, type PricingCardProps, type PricingFeature, type PricingPlan, PricingSection, type PricingSectionProps, RegisterHotkeys, RootErrorFallback, SectionTitle, type SectionTitleProps, Spotlight, type SpotlightGroup, type SpotlightItem, type SpotlightProps, StaggerChildren, type StaggerChildrenProps, StatCard, type StatCardProps, StatsSection, type StatsSectionProps, Suspensed, Switch, type SwitchProps, TeamSection, TestimonialCard, type TestimonialCardProps, TestimonialsSection, type TestimonialsSectionProps, Textarea, type TextareaProps, ThemeColorUpdater, ThemeSwitchMinimal, type UIMode, Underlay, type UnderlayProps, type UnderlayVariant, type UpgradeComparisonRow, UpgradePrompt, type UpgradePromptProps, type UseConfirmReturn, type UseControlledOpenReturn, type UsePaginationReturn, VersionBanner, cn, useConfirm, useControlledOpen, useCopyToClipboard, useDebounce, useIntersectionObserver, useLocalStorage, useMediaQuery, useMounted, useOlwibaUI, usePagination, useScrolledPast, useUIMode };

package/dist/index.js

@@ -6,6 +6,7 @@ import { Button as Button$1, Card as Card$1, Input as Input$1, Textarea as Texta
 export { CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@olwiba/cn';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Compass, ArrowLeft, X, ArrowRight, Sparkles, Check, Minus, Quote, Star, Twitter, Github, Linkedin, Mail, Phone, MapPin, MessageSquare, Send, Sun, Moon, Menu, Search, TrendingUp, TrendingDown, ChevronRight, ChevronLeft, AlertTriangle, Loader2, ShieldCheck, Building2, MoreVerticalIcon, CreditCardIcon, BellIcon, LogOutIcon } from 'lucide-react';
+import { useMDXComponent } from '@content-collections/mdx/react';
 
 // src/lib/utils.ts
 function cn(...inputs) {
@@ -616,6 +617,54 @@ function SectionTitle({ title, description, badge, className }) {
     description && /* @__PURE__ */ jsx("p", { className: "mx-auto mt-4 max-w-2xl text-pretty text-muted-foreground", children: description })
   ] }) });
 }
+var sizes = {
+  sm: { outer: "w-44", height: "h-80", notch: "w-16 h-4", border: "rounded-[2rem]", screen: "rounded-[1.75rem]" },
+  md: { outer: "w-56", height: "h-[26rem]", notch: "w-20 h-5", border: "rounded-[2.5rem]", screen: "rounded-[2.25rem]" },
+  lg: { outer: "w-72", height: "h-[34rem]", notch: "w-24 h-6", border: "rounded-[3rem]", screen: "rounded-[2.75rem]" }
+};
+function PhoneFrame({ children, size = "md", className, float = true }) {
+  const s = sizes[size];
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    float && /* @__PURE__ */ jsx("style", { children: `
+          @keyframes olwiba-phone-float {
+            0%, 100% { transform: translateY(0px); }
+            50% { transform: translateY(-10px); }
+          }
+          .olwiba-phone-float { animation: olwiba-phone-float 5s ease-in-out infinite; }
+        ` }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "relative mx-auto",
+          s.outer,
+          float && "olwiba-phone-float",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "relative flex w-full flex-col overflow-hidden border-[3px] border-foreground/15 bg-muted shadow-2xl",
+                s.border,
+                s.height
+              ),
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "relative flex justify-center pt-3 pb-1 shrink-0", children: /* @__PURE__ */ jsx("div", { className: cn("rounded-full bg-foreground/10", s.notch) }) }),
+                /* @__PURE__ */ jsx("div", { className: cn("mx-1.5 mb-1.5 flex-1 overflow-hidden bg-background", s.screen), children })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "absolute right-[-5px] top-24 h-12 w-[3px] rounded-l-sm bg-foreground/15" }),
+          /* @__PURE__ */ jsx("div", { className: "absolute left-[-5px] top-20 h-8 w-[3px] rounded-r-sm bg-foreground/15" }),
+          /* @__PURE__ */ jsx("div", { className: "absolute left-[-5px] top-32 h-8 w-[3px] rounded-r-sm bg-foreground/15" }),
+          /* @__PURE__ */ jsx("div", { className: "absolute left-[-5px] top-44 h-8 w-[3px] rounded-r-sm bg-foreground/15" })
+        ]
+      }
+    )
+  ] });
+}
 var defaultRenderLink4 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
 function HeroSection({
   heading,
@@ -624,6 +673,8 @@ function HeroSection({
   primaryCta,
   secondaryCta,
   heroImage,
+  media = "image",
+  phoneSize = "lg",
   avatarUrls,
   socialProofText,
   renderLink = defaultRenderLink4
@@ -648,7 +699,7 @@ function HeroSection({
           })
         ] })
       ] }) }),
-      /* @__PURE__ */ jsx(FadeIn, { direction: "right", delay: 200, children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-2xl", children: heroImage }) })
+      media !== "none" && /* @__PURE__ */ jsx(FadeIn, { direction: "right", delay: 200, children: media === "phone" ? /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx(PhoneFrame, { size: phoneSize, children: heroImage }) }) : /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-2xl", children: heroImage }) })
     ] }),
     (avatarUrls?.length || socialProofText) && /* @__PURE__ */ jsx(FadeIn, { direction: "up", delay: 400, children: /* @__PURE__ */ jsxs("div", { className: "mx-auto mt-12 flex max-w-6xl items-center gap-4", children: [
       avatarUrls && avatarUrls.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex -space-x-3", children: avatarUrls.map((url, i) => /* @__PURE__ */ jsxs(Avatar, { className: "size-9 border-2 border-background", children: [
@@ -1149,31 +1200,54 @@ function StatsSection({
     ] })
   ] }) });
 }
-function NewsletterSection() {
+var defaults = {
+  badge: "Newsletter",
+  title: "Stay in the loop",
+  description: "New components, release notes, and product tips \u2014 straight to your inbox. No spam, unsubscribe any time.",
+  placeholder: "you@company.com",
+  submitLabel: "Subscribe",
+  privacyHref: "#",
+  privacyLabel: "Privacy Policy",
+  successTitle: "You're on the list.",
+  successDescription: "We'll be in touch soon."
+};
+function NewsletterSection({
+  badge = defaults.badge,
+  title = defaults.title,
+  description = defaults.description,
+  placeholder = defaults.placeholder,
+  submitLabel = defaults.submitLabel,
+  privacyHref = defaults.privacyHref,
+  privacyLabel = defaults.privacyLabel,
+  successTitle = defaults.successTitle,
+  successDescription = defaults.successDescription,
+  onSubscribe
+} = {}) {
   const [email, setEmail] = React25.useState("");
   const [submitted, setSubmitted] = React25.useState(false);
-  function handleSubmit(e) {
+  async function handleSubmit(e) {
     e.preventDefault();
     if (!email) return;
+    await onSubscribe?.(email);
     setSubmitted(true);
   }
   return /* @__PURE__ */ jsx("section", { className: "overflow-hidden rounded-2xl border bg-card", children: /* @__PURE__ */ jsxs("div", { className: "relative px-6 py-14 sm:px-10 sm:py-20", children: [
     /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,hsl(var(--primary)/0.1),transparent_60%)]" }),
     /* @__PURE__ */ jsxs("div", { className: "relative mx-auto max-w-xl text-center", children: [
       /* @__PURE__ */ jsx("div", { className: "mb-4 inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(Mail, { className: "size-5" }) }),
-      /* @__PURE__ */ jsx(Badge$1, { variant: "secondary", className: "mb-3", children: "Newsletter" }),
-      /* @__PURE__ */ jsx("h2", { className: "text-balance text-3xl font-semibold tracking-tight sm:text-4xl", children: "Stay in the loop" }),
-      /* @__PURE__ */ jsx("p", { className: "mx-auto mt-4 max-w-sm text-pretty text-muted-foreground", children: "New components, release notes, and product tips \u2014 straight to your inbox. No spam, unsubscribe any time." }),
+      /* @__PURE__ */ jsx(Badge$1, { variant: "secondary", className: "mb-3", children: badge }),
+      /* @__PURE__ */ jsx("h2", { className: "text-balance text-3xl font-semibold tracking-tight sm:text-4xl", children: title }),
+      /* @__PURE__ */ jsx("p", { className: "mx-auto mt-4 max-w-sm text-pretty text-muted-foreground", children: description }),
       submitted ? /* @__PURE__ */ jsxs("div", { className: "mt-8 rounded-2xl border bg-muted/50 px-6 py-5 text-sm", children: [
-        /* @__PURE__ */ jsx("span", { className: "font-medium", children: "You're on the list." }),
+        /* @__PURE__ */ jsx("span", { className: "font-medium", children: successTitle }),
         " ",
-        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "We'll be in touch soon." })
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: successDescription })
       ] }) : /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "mt-8 flex flex-col gap-3 sm:flex-row", children: [
         /* @__PURE__ */ jsx(
           Input$1,
           {
             type: "email",
-            placeholder: "you@company.com",
+            placeholder,
             value: email,
             onChange: (e) => setEmail(e.target.value),
             required: true,
@@ -1181,28 +1255,46 @@ function NewsletterSection() {
           }
         ),
         /* @__PURE__ */ jsxs(Button$1, { type: "submit", children: [
-          "Subscribe",
+          submitLabel,
           /* @__PURE__ */ jsx(ArrowRight, { className: "ml-2 size-4" })
         ] })
       ] }),
       /* @__PURE__ */ jsxs("p", { className: "mt-4 text-xs text-muted-foreground", children: [
         "By subscribing you agree to our",
         " ",
-        /* @__PURE__ */ jsx("a", { href: "#", className: "underline underline-offset-4 hover:text-foreground", children: "Privacy Policy" }),
+        /* @__PURE__ */ jsx("a", { href: privacyHref, className: "underline underline-offset-4 hover:text-foreground", children: privacyLabel }),
         "."
       ] })
     ] })
   ] }) });
 }
-var contactInfo = [
-  { Icon: Mail, label: "Email", value: "hello@olwiba.com" },
-  { Icon: Phone, label: "Phone", value: "+1 (555) 000-0000" },
-  { Icon: MapPin, label: "Office", value: "San Francisco, CA" }
+var defaultContactInfoResolved = [
+  { icon: Mail, label: "Email", value: "hello@olwiba.com" },
+  { icon: Phone, label: "Phone", value: "+1 (555) 000-0000" },
+  { icon: MapPin, label: "Office", value: "San Francisco, CA" }
 ];
-function ContactSection() {
+var defaults2 = {
+  badge: "Contact us",
+  title: "Let's talk",
+  description: "Have a question or want to work together? Fill in the form and we'll get back to you within one business day.",
+  successTitle: "Message sent",
+  successDescription: "Thanks for reaching out. We'll get back to you within one business day.",
+  sendAnotherLabel: "Send another"
+};
+function ContactSection({
+  badge = defaults2.badge,
+  title = defaults2.title,
+  description = defaults2.description,
+  contactInfo = defaultContactInfoResolved,
+  successTitle = defaults2.successTitle,
+  successDescription = defaults2.successDescription,
+  sendAnotherLabel = defaults2.sendAnotherLabel,
+  onSubmit
+} = {}) {
   const [submitted, setSubmitted] = React25.useState(false);
-  function handleSubmit(e) {
+  async function handleSubmit(e) {
     e.preventDefault();
+    await onSubmit?.(e);
     setSubmitted(true);
   }
   return /* @__PURE__ */ jsx("section", { className: "overflow-hidden rounded-2xl border bg-card", children: /* @__PURE__ */ jsxs("div", { className: "grid lg:grid-cols-[1fr_1.4fr]", children: [
@@ -1210,12 +1302,19 @@ function ContactSection() {
       /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-[radial-gradient(circle_at_top_right,hsl(var(--primary-foreground)/0.1),transparent_60%)]" }),
       /* @__PURE__ */ jsxs("div", { className: "relative space-y-6", children: [
         /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx(Badge$1, { variant: "secondary", className: "mb-3 bg-primary-foreground/15 text-primary-foreground hover:bg-primary-foreground/20", children: "Contact us" }),
-          /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold", children: "Let's talk" }),
-          /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-primary-foreground/70", children: "Have a question or want to work together? Fill in the form and we'll get back to you within one business day." })
+          /* @__PURE__ */ jsx(
+            Badge$1,
+            {
+              variant: "secondary",
+              className: "mb-3 bg-primary-foreground/15 text-primary-foreground hover:bg-primary-foreground/20",
+              children: badge
+            }
+          ),
+          /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold", children: title }),
+          /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-primary-foreground/70", children: description })
         ] }),
         /* @__PURE__ */ jsx(Separator, { className: "bg-primary-foreground/20" }),
-        /* @__PURE__ */ jsx("div", { className: "space-y-4", children: contactInfo.map(({ Icon, label, value }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "space-y-4", children: contactInfo.map(({ icon: Icon = Mail, label, value }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
           /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary-foreground/10", children: /* @__PURE__ */ jsx(Icon, { className: "size-4" }) }),
           /* @__PURE__ */ jsxs("div", { children: [
             /* @__PURE__ */ jsx("div", { className: "text-xs text-primary-foreground/60", children: label }),
@@ -1227,10 +1326,10 @@ function ContactSection() {
     /* @__PURE__ */ jsx("div", { className: "p-8", children: submitted ? /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-[320px] flex-col items-center justify-center gap-4 text-center", children: [
       /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(MessageSquare, { className: "size-6" }) }),
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h3", { className: "font-semibold", children: "Message sent" }),
-        /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: "Thanks for reaching out. We'll get back to you within one business day." })
+        /* @__PURE__ */ jsx("h3", { className: "font-semibold", children: successTitle }),
+        /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: successDescription })
       ] }),
-      /* @__PURE__ */ jsx(Button$1, { variant: "outline", onClick: () => setSubmitted(false), children: "Send another" })
+      /* @__PURE__ */ jsx(Button$1, { variant: "outline", onClick: () => setSubmitted(false), children: sendAnotherLabel })
     ] }) : /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "space-y-5", children: [
       /* @__PURE__ */ jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [
         /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
@@ -1790,6 +1889,19 @@ function ConfirmDialog({ isOpen, options, handleConfirm, handleCancel, destructi
     ] })
   ] }) });
 }
+function AppScreenRoot({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex h-full flex-col", className), children });
+}
+function AppScreenHeader({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-2 border-b border-border px-4 py-3 shrink-0", className), children });
+}
+function AppScreenBody({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex-1 overflow-auto px-4 py-3", className), children });
+}
+var AppScreen = Object.assign(AppScreenRoot, {
+  Header: AppScreenHeader,
+  Body: AppScreenBody
+});
 var blurClass2 = {
   sm: "backdrop-blur-sm",
   md: "backdrop-blur-md",
@@ -2052,6 +2164,30 @@ function PostList({ posts, renderLink, emptyMessage = "No posts published yet."
   }
   return /* @__PURE__ */ jsx("div", { className: "grid gap-8 sm:grid-cols-2", children: posts.map((post) => /* @__PURE__ */ jsx(PostCard, { ...post, renderLink }, post.slug)) });
 }
+var components = {
+  h1: ({ className, ...props }) => /* @__PURE__ */ jsx("h1", { className: cn("mt-8 scroll-m-20 text-3xl font-bold tracking-tight text-foreground first:mt-0", className), ...props }),
+  h2: ({ className, ...props }) => /* @__PURE__ */ jsx("h2", { className: cn("mt-10 scroll-m-20 text-2xl font-semibold tracking-tight text-foreground first:mt-0", className), ...props }),
+  h3: ({ className, ...props }) => /* @__PURE__ */ jsx("h3", { className: cn("mt-8 scroll-m-20 text-xl font-semibold tracking-tight text-foreground", className), ...props }),
+  h4: ({ className, ...props }) => /* @__PURE__ */ jsx("h4", { className: cn("mt-6 scroll-m-20 text-lg font-semibold tracking-tight text-foreground", className), ...props }),
+  p: ({ className, ...props }) => /* @__PURE__ */ jsx("p", { className: cn("leading-7 text-muted-foreground [&:not(:first-child)]:mt-6", className), ...props }),
+  ul: ({ className, ...props }) => /* @__PURE__ */ jsx("ul", { className: cn("my-6 ml-6 list-disc text-muted-foreground", className), ...props }),
+  ol: ({ className, ...props }) => /* @__PURE__ */ jsx("ol", { className: cn("my-6 ml-6 list-decimal text-muted-foreground", className), ...props }),
+  li: ({ className, ...props }) => /* @__PURE__ */ jsx("li", { className: cn("mt-2", className), ...props }),
+  blockquote: ({ className, ...props }) => /* @__PURE__ */ jsx("blockquote", { className: cn("mt-6 rounded-r-lg border-l-4 border-primary bg-muted py-4 pl-6 pr-4 italic text-muted-foreground", className), ...props }),
+  hr: (props) => /* @__PURE__ */ jsx("hr", { className: "my-8 border-border", ...props }),
+  img: ({ className, alt, ...props }) => /* @__PURE__ */ jsx("img", { className: cn("rounded-lg border shadow-sm", className), alt, ...props }),
+  pre: ({ className, ...props }) => /* @__PURE__ */ jsx("pre", { className: cn("mt-6 mb-4 overflow-x-auto rounded-lg bg-muted p-4 text-sm", className), ...props }),
+  code: ({ className, ...props }) => /* @__PURE__ */ jsx("code", { className: cn("relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm text-foreground", className), ...props }),
+  table: ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: "my-6 w-full overflow-y-auto rounded-lg border border-border", children: /* @__PURE__ */ jsx("table", { className: cn("w-full", className), ...props }) }),
+  tr: ({ className, ...props }) => /* @__PURE__ */ jsx("tr", { className: cn("m-0 border-t border-border p-0 even:bg-muted", className), ...props }),
+  th: ({ className, ...props }) => /* @__PURE__ */ jsx("th", { className: cn("border border-border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right", className), ...props }),
+  td: ({ className, ...props }) => /* @__PURE__ */ jsx("td", { className: cn("border border-border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right", className), ...props }),
+  a: ({ className, ...props }) => /* @__PURE__ */ jsx("a", { className: cn("font-medium text-primary underline underline-offset-4 hover:text-primary/80", className), ...props })
+};
+function MdxContent({ code }) {
+  const MDXComponent = useMDXComponent(code);
+  return /* @__PURE__ */ jsx(MDXComponent, { components });
+}
 function useMounted() {
   const [mounted, setMounted] = useState(false);
   useEffect(() => {
@@ -2186,6 +2322,6 @@ function usePagination(total, pageSize) {
   return { page, pageSize, totalPages, offset, hasPrev: page > 1, hasNext: page < totalPages, goTo, next, prev };
 }
 
-export { AppShell, AuthSection, Badge, Button, Card, Checkbox, ConfirmDialog, ContactSection, ContextMenu, CountUp, CtaSection, DevBanner, Dock, EmptyState, ErrorPage, FadeIn, FaqSection, FeatureCard, FeaturesSection, Footer, FullPageSpinner, GlassCard, HeroSection, ImageCard, Input, LogoStrip, Navbar, NewsletterSection, OlwibaUIProvider, Overlay, PageHeader, PageTransition, PostCard, PostList, PricingCard, PricingSection, RegisterHotkeys, RootErrorFallback, SectionTitle, Spotlight, StaggerChildren, StatCard, StatsSection, Suspensed, Switch, TeamSection, TestimonialCard, TestimonialsSection, Textarea, ThemeColorUpdater, ThemeSwitchMinimal, Underlay, UpgradePrompt, VersionBanner, cn, useConfirm, useControlledOpen, useCopyToClipboard, useDebounce, useIntersectionObserver, useLocalStorage, useMediaQuery, useMounted, useOlwibaUI, usePagination, useScrolledPast, useUIMode };
+export { AppScreen, AppShell, AuthSection, Badge, Button, Card, Checkbox, ConfirmDialog, ContactSection, ContextMenu, CountUp, CtaSection, DevBanner, Dock, EmptyState, ErrorPage, FadeIn, FaqSection, FeatureCard, FeaturesSection, Footer, FullPageSpinner, GlassCard, HeroSection, ImageCard, Input, LogoStrip, MdxContent, Navbar, NewsletterSection, OlwibaUIProvider, Overlay, PageHeader, PageTransition, PhoneFrame, PostCard, PostList, PricingCard, PricingSection, RegisterHotkeys, RootErrorFallback, SectionTitle, Spotlight, StaggerChildren, StatCard, StatsSection, Suspensed, Switch, TeamSection, TestimonialCard, TestimonialsSection, Textarea, ThemeColorUpdater, ThemeSwitchMinimal, Underlay, UpgradePrompt, VersionBanner, cn, useConfirm, useControlledOpen, useCopyToClipboard, useDebounce, useIntersectionObserver, useLocalStorage, useMediaQuery, useMounted, useOlwibaUI, usePagination, useScrolledPast, useUIMode };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map