4d:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4f:T1416,"use client" import * as React from "react" import { XIcon } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/ds-button" // ── Types ── export interface MorphingDialogProps { children: React.ReactNode } interface MorphingDialogContextType { isOpen: boolean setIsOpen: (open: boolean) => void uniqueId: string } const MorphingDialogContext = React.createContext(null) function useMorphingDialog() { const context = React.useContext(MorphingDialogContext) if (!context) { throw new Error( "MorphingDialog components must be used within a MorphingDialog provider" ) } return context } // ── Context Provider ── export function MorphingDialog({ children }: MorphingDialogProps) { const [isOpen, setIsOpen] = React.useState(false) const uniqueId = React.useId() React.useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if (e.key === "Escape") { setIsOpen(false) } } if (isOpen) { document.addEventListener("keydown", handleKeyDown) document.body.style.overflow = "hidden" } else { document.body.style.overflow = "" } return () => { document.removeEventListener("keydown", handleKeyDown) document.body.style.overflow = "" } }, [isOpen]) return ( {children} ) } // ── Components ── export const MorphingDialogTrigger = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, children, ...props }, ref) => { const { setIsOpen } = useMorphingDialog() return (

setIsOpen(true)} {...props} > {children}

) }) MorphingDialogTrigger.displayName = "MorphingDialogTrigger" export const MorphingDialogContainer = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, children, ...props }, ref) => { const { isOpen, setIsOpen } = useMorphingDialog() if (!isOpen) return null return ( <>

setIsOpen(false)} />

{children}

) }) MorphingDialogContainer.displayName = "MorphingDialogContainer" export const MorphingDialogTitle = React.forwardRef< HTMLHeadingElement, React.HTMLAttributes >(({ className, ...props }, ref) => { return (

) }) MorphingDialogTitle.displayName = "MorphingDialogTitle" export const MorphingDialogSubtitle = React.forwardRef< HTMLParagraphElement, React.HTMLAttributes >(({ className, ...props }, ref) => { return (
) }) MorphingDialogSubtitle.displayName = "MorphingDialogSubtitle" export const MorphingDialogDescription = React.forwardRef< HTMLParagraphElement, React.HTMLAttributes >(({ className, ...props }, ref) => { return (
) }) MorphingDialogDescription.displayName = "MorphingDialogDescription" export const MorphingDialogImage = React.forwardRef< HTMLImageElement, React.ImgHTMLAttributes >(({ className, alt = "", ...props }, ref) => { return ( // eslint-disable-next-line @next/next/no-img-element ) }) MorphingDialogImage.displayName = "MorphingDialogImage" export const MorphingDialogClose = React.forwardRef< HTMLButtonElement, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => { const { setIsOpen } = useMorphingDialog() return ( ) }) MorphingDialogClose.displayName = "MorphingDialogClose" 4c:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4d",null,{"namespace":"@lema-ds","registryDependencies":["button"]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"components/ds/morphing-dialog.tsx","content":"$4f","type":"registry:ui","target":"components/ui/ds-morphing-dialog.tsx"}],"className":"h-[70svh] min-h-80"}]]}]