{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-financial",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "../../packages/blocks/src/hero-section/hero-financial.tsx",
      "content": "'use client'\r\nimport React from 'react'\r\nimport { ChevronRight } from 'lucide-react'\r\nimport { TimelineAnimation } from '@/components/ui/timeline-animation'\r\nimport { EcommerceDash } from '../../assets/index'\r\nimport { useMediaQuery } from '@/hooks/use-media-query'\r\nimport MotionDrawer from '@/components/ui/motion-drawer'\r\n\r\nexport const HeroFinancial = () => {\r\n  const timelineRef = React.useRef<HTMLDivElement>(null)\r\n  const isMobile = useMediaQuery('(max-width: 768px)')\r\n\r\n  return (\r\n    <section\r\n      ref={timelineRef}\r\n      className=\"min-h-screen bg-[#f7f9fc] text-[#1e293b] relative overflow-hidden flex flex-col items-center\"\r\n    >\r\n      <div className=\"absolute inset-0 z-0 bg-[url('https://images.unsplash.com/photo-1597200381847-30ec200eeb9a?q=80&w=1074&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')] bg-cover bg-center opacity-50\" />\r\n\r\n      <svg\r\n        width=\"358\"\r\n        height=\"483\"\r\n        viewBox=\"0 0 358 483\"\r\n        className=\"absolute top-0 z-1 left-0\"\r\n        fill=\"none\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n      >\r\n        <g filter=\"url(#filter0_f_0_1)\">\r\n          <rect\r\n            x=\"-86.9961\"\r\n            y=\"-33.114\"\r\n            width=\"72\"\r\n            height=\"541\"\r\n            rx=\"36\"\r\n            transform=\"rotate(-30.8182 -86.9961 -33.114)\"\r\n            fill=\"url(#paint0_linear_0_1)\"\r\n          />\r\n        </g>\r\n        <g filter=\"url(#filter1_f_0_1)\">\r\n          <rect\r\n            x=\"-17\"\r\n            y=\"-135.113\"\r\n            width=\"50.0937\"\r\n            height=\"541\"\r\n            rx=\"25.0469\"\r\n            transform=\"rotate(-30.8182 -17 -135.113)\"\r\n            fill=\"url(#paint1_linear_0_1)\"\r\n          />\r\n        </g>\r\n        <defs>\r\n          <filter\r\n            id=\"filter0_f_0_1\"\r\n            x=\"-137.641\"\r\n            y=\"-120.646\"\r\n            width=\"440.285\"\r\n            height=\"602.787\"\r\n            filterUnits=\"userSpaceOnUse\"\r\n            color-interpolation-filters=\"sRGB\"\r\n          >\r\n            <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n            <feBlend\r\n              mode=\"normal\"\r\n              in=\"SourceGraphic\"\r\n              in2=\"BackgroundImageFix\"\r\n              result=\"shape\"\r\n            />\r\n            <feGaussianBlur\r\n              stdDeviation=\"32\"\r\n              result=\"effect1_foregroundBlur_0_1\"\r\n            />\r\n          </filter>\r\n          <filter\r\n            id=\"filter1_f_0_1\"\r\n            x=\"-71.707\"\r\n            y=\"-215.486\"\r\n            width=\"429.598\"\r\n            height=\"599.69\"\r\n            filterUnits=\"userSpaceOnUse\"\r\n            color-interpolation-filters=\"sRGB\"\r\n          >\r\n            <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n            <feBlend\r\n              mode=\"normal\"\r\n              in=\"SourceGraphic\"\r\n              in2=\"BackgroundImageFix\"\r\n              result=\"shape\"\r\n            />\r\n            <feGaussianBlur\r\n              stdDeviation=\"32\"\r\n              result=\"effect1_foregroundBlur_0_1\"\r\n            />\r\n          </filter>\r\n          <linearGradient\r\n            id=\"paint0_linear_0_1\"\r\n            x1=\"-50.9961\"\r\n            y1=\"-33.114\"\r\n            x2=\"-50.9961\"\r\n            y2=\"507.886\"\r\n            gradientUnits=\"userSpaceOnUse\"\r\n          >\r\n            <stop stop-color=\"#91bbfb\" />\r\n            <stop offset=\"1\" stop-color=\"#E6F1FF\" />\r\n          </linearGradient>\r\n          <linearGradient\r\n            id=\"paint1_linear_0_1\"\r\n            x1=\"8.04686\"\r\n            y1=\"-135.113\"\r\n            x2=\"8.04686\"\r\n            y2=\"405.887\"\r\n            gradientUnits=\"userSpaceOnUse\"\r\n          >\r\n            <stop stop-color=\"#8dbafd\" />\r\n            <stop offset=\"1\" stop-color=\"#c1d9f8\" />\r\n          </linearGradient>\r\n        </defs>\r\n      </svg>\r\n\r\n      {/* Soft Background Gradients */}\r\n      <TimelineAnimation\r\n        timelineRef={timelineRef}\r\n        animationNum={5}\r\n        className=\"absolute top-0 left-0 w-full h-[600px] bg-linear-to-b from-blue-50 via-blue-100 to-transparent opacity-100\"\r\n      />\r\n      {isMobile && (\r\n        <div className=\"flex gap-4 justify-between items-center px-5 w-full pt-4\">\r\n          <MotionDrawer\r\n            direction=\"left\"\r\n            width={300}\r\n            backgroundColor={'#ffffff'}\r\n            clsBtnClassName=\"bg-neutral-800 border-r border-neutral-900 text-white\"\r\n            contentClassName=\"bg-white border-r border-neutral-200 text-black\"\r\n            btnClassName=\"bg-white text-black relative w-fit p-2 left-0 top-0 rounded-full shadow-xs border border-neutral-200\"\r\n          >\r\n            <nav className=\"space-y-4 \">\r\n              <div className=\"flex items-center gap-2 text-black\">\r\n                <svg\r\n                  className=\"fill-black w-8 h-8\"\r\n                  width=\"97\"\r\n                  height=\"108\"\r\n                  viewBox=\"0 0 97 108\"\r\n                  fill=\"none\"\r\n                  xmlns=\"http://www.w3.org/2000/svg\"\r\n                >\r\n                  <path d=\"M55.5 0C61.0005 0.00109895 64.5005 2.50586 64.5 7.5V17C64.5 24.5059 68.5005 27.5 81 27.5H88C94.0005 27.5059 96.5 29.5059 96.5 37.5V98.5C96.5 106.006 95.0005 107.5 88 107.5H41.5C36.5005 107.5 32 104.506 32 98.5V88C32 84.5 28.5 80 20.5 80H8.5C3 80 0 76.5 0 71.5V6.5C0.00048844 1.50586 2.50049 0.00585937 8.5 0H55.5ZM31 20C28.7909 20 27 21.7909 27 24V74C27 76.2091 28.7909 78 31 78H58C60.2091 78 62 76.2091 62 74V24C62 21.7909 60.2091 20 58 20H31Z\" />\r\n                </svg>\r\n                <span>UI-Layouts</span>\r\n              </div>\r\n              <a\r\n                href=\"#\"\r\n                className=\"block p-2 hover:bg-neutral-200 hover:text-black rounded-sm\"\r\n              >\r\n                Our Service\r\n              </a>\r\n              <a\r\n                href=\"#\"\r\n                className=\"block p-2 hover:bg-neutral-200 hover:text-black rounded-sm\"\r\n              >\r\n                About Us\r\n              </a>\r\n              <a\r\n                href=\"#\"\r\n                className=\"block p-2 hover:bg-neutral-200 hover:text-black rounded-sm\"\r\n              >\r\n                Contact\r\n              </a>\r\n            </nav>\r\n          </MotionDrawer>\r\n          <button className=\"bg-neutral-900 text-white px-3 py-3 relative z-2 flex gap-1 items-center rounded-xl font-bold text-sm hover:bg-black transition shadow-[inset_2px_2px_5px_0px_rgba(0,0,0,0.5),inset_-2px_-2px_6px_1px_rgba(80,78,78,0.5)]\">\r\n            Get Started <ChevronRight size={20} />\r\n          </button>\r\n        </div>\r\n      )}\r\n      {/* Header */}\r\n      {!isMobile && (\r\n        <header className=\"relative z-10 w-full max-w-7xl mx-auto p-2 mt-4\">\r\n          <TimelineAnimation\r\n            animationNum={1}\r\n            timelineRef={timelineRef}\r\n            className=\"bg-white/80 backdrop-blur-xl p-2 rounded-xl border border-white shadow-sm flex items-center justify-between\"\r\n          >\r\n            <div className=\"flex items-center gap-2\">\r\n              <svg\r\n                className=\"fill-black w-8 h-8\"\r\n                width=\"97\"\r\n                height=\"108\"\r\n                viewBox=\"0 0 97 108\"\r\n                fill=\"none\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n              >\r\n                <path d=\"M55.5 0C61.0005 0.00109895 64.5005 2.50586 64.5 7.5V17C64.5 24.5059 68.5005 27.5 81 27.5H88C94.0005 27.5059 96.5 29.5059 96.5 37.5V98.5C96.5 106.006 95.0005 107.5 88 107.5H41.5C36.5005 107.5 32 104.506 32 98.5V88C32 84.5 28.5 80 20.5 80H8.5C3 80 0 76.5 0 71.5V6.5C0.00048844 1.50586 2.50049 0.00585937 8.5 0H55.5ZM31 20C28.7909 20 27 21.7909 27 24V74C27 76.2091 28.7909 78 31 78H58C60.2091 78 62 76.2091 62 74V24C62 21.7909 60.2091 20 58 20H31Z\" />\r\n              </svg>\r\n              <span className=\"text-xl font-bold tracking-tight text-slate-900\">\r\n                UI-Layout\r\n              </span>\r\n            </div>\r\n            <nav className=\"hidden md:flex items-center gap-10 text-sm font-semibold text-neutral-500\">\r\n              <a href=\"#\" className=\"hover:text-[#3b82f6] transition\">\r\n                Home\r\n              </a>\r\n              <a href=\"#\" className=\"hover:text-[#3b82f6] transition\">\r\n                About Us\r\n              </a>\r\n              <a href=\"#\" className=\"hover:text-[#3b82f6] transition\">\r\n                Blog\r\n              </a>\r\n              <a href=\"#\" className=\"hover:text-[#3b82f6] transition\">\r\n                Pages\r\n              </a>\r\n              <a href=\"#\" className=\"hover:text-[#3b82f6] transition\">\r\n                Pricing\r\n              </a>\r\n            </nav>\r\n            <button className=\"bg-neutral-900 text-white px-3 py-3 flex gap-1 items-center rounded-xl font-bold text-sm hover:bg-black transition shadow-[inset_2px_2px_5px_0px_rgba(0,0,0,0.5),inset_-2px_-2px_6px_1px_rgba(80,78,78,0.5)]\">\r\n              Get Started <ChevronRight size={20} />\r\n            </button>\r\n          </TimelineAnimation>\r\n        </header>\r\n      )}\r\n      {/* Hero Content */}\r\n      <div className=\"relative z-10 text-center pt-24 pb-16 px-4 flex flex-col gap-6\">\r\n        <TimelineAnimation\r\n          animationNum={1}\r\n          timelineRef={timelineRef}\r\n          className=\"bg-white w-fit mx-auto text-black px-1.5 py-1 rounded-full inline-flex items-center gap-2 shadow-lg shadow-blue-500/20 border-2 border-white\"\r\n        >\r\n          <span className=\"bg-linear-to-br from-blue-500 to-blue-200 text-white px-2 py-0.5 rounded-full text-xs font-medium uppercase tracking-widest\">\r\n            New\r\n          </span>\r\n          <span className=\"text-sm font-medium\">\r\n            Anouncing our latest product launch\r\n          </span>\r\n        </TimelineAnimation>\r\n\r\n        <TimelineAnimation\r\n          as=\"h1\"\r\n          animationNum={2}\r\n          timelineRef={timelineRef}\r\n          className=\"sm:text-6xl text-5xl md:text-8xl font-medium tracking-tight text-neutral-900 max-w-6xl\"\r\n        >\r\n          Make your financial <br /> operations seamless.\r\n        </TimelineAnimation>\r\n\r\n        <TimelineAnimation\r\n          as=\"p\"\r\n          animationNum={3}\r\n          timelineRef={timelineRef}\r\n          className=\"text-xl md:text-2xl text-neutral-500 font-medium max-w-3xl mx-auto leading-relaxed px-4\"\r\n        >\r\n          Take control of your finances with Startive the next-generation\r\n          finance software built to simplify, automate, and elevate your\r\n          financial operations.\r\n        </TimelineAnimation>\r\n\r\n        <div className=\"flex gap-4 justify-center\">\r\n          <TimelineAnimation\r\n            as=\"button\"\r\n            animationNum={4}\r\n            timelineRef={timelineRef}\r\n            className=\"px-4 bg-linear-to-br from-blue-500 via-blue-400 to-blue-200 text-white text-xl rounded-lg shadow-sm transition py-2.5 border border-blue-300\"\r\n          >\r\n            Get Started\r\n          </TimelineAnimation>\r\n          <TimelineAnimation\r\n            as=\"button\"\r\n            animationNum={5}\r\n            timelineRef={timelineRef}\r\n            className=\"px-4 bg-linear-to-br from-neutral-50 via-neutral-100 to-neutral-300 text-black text-xl rounded-lg shadow-sm  transition py-2.5 border border-neutral-300\"\r\n          >\r\n            Learn more\r\n          </TimelineAnimation>\r\n        </div>\r\n      </div>\r\n\r\n      {/* Dashboard UI Frame */}\r\n      <div className=\"w-full max-w-7xl mx-auto rounded-xl relative mt-10\">\r\n        <TimelineAnimation\r\n          animationNum={6}\r\n          timelineRef={timelineRef}\r\n          className=\"rounded-2xl bg-white/50 backdrop-blur-lg p-4\"\r\n        >\r\n          <TimelineAnimation\r\n            animationNum={7}\r\n            as=\"img\"\r\n            timelineRef={timelineRef}\r\n            // @ts-ignore\r\n            src={EcommerceDash?.src}\r\n            alt=\"phoneMockUP\"\r\n            className=\"w-full relative z-4 rounded-2xl\"\r\n          />\r\n        </TimelineAnimation>\r\n      </div>\r\n    </section>\r\n  )\r\n}\r\n",
      "type": "registry:block"
    },
    {
      "path": "./components/ui/motion-drawer.tsx",
      "content": "'use client';\nimport { cn } from '@/lib/utils';\nimport { Menu, X } from 'lucide-react';\nimport { AnimatePresence, motion } from 'motion/react';\nimport type React from 'react';\nimport { useState } from 'react';\n\nexport type SideMenuDirection = 'left' | 'right';\nexport type ButtonOpeningVariants = 'push' | 'merge' | 'stay';\n\ninterface SideMenuProps {\n  // Appearance\n  overlayColor?: string;\n  width?: number;\n  direction?: SideMenuDirection;\n  backgroundColor?: string;\n\n  // Content\n  children: React.ReactNode;\n\n  // Behavior\n  isOpen?: boolean;\n  onToggle?: (isOpen: boolean) => void;\n  showToggleButton?: boolean;\n  toggleButtonText?: {\n    open: string;\n    close: string;\n  };\n\n  // Styling\n  btnClassName?: string;\n  className?: string;\n  contentClassName?: string;\n  clsBtnClassName?: string;\n  overlayClassName?: string;\n\n  // Animation\n  animationConfig?: {\n    type?: 'spring' | 'tween';\n    damping?: number;\n    stiffness?: number;\n    duration?: number;\n  };\n\n  // Drag behavior\n  enableDrag?: boolean;\n  dragThreshold?: number;\n\n  // New prop\n  buttonOpeningVariants?: ButtonOpeningVariants;\n}\n\nconst getOpenButtonVariants = (\n  direction: SideMenuDirection,\n  width: number,\n  type: ButtonOpeningVariants\n) => {\n  switch (type) {\n    case 'merge':\n      return direction === 'left'\n        ? {\n            closed: { x: 0, opacity: 1, scale: 1, borderRadius: '0.5rem' },\n            open: {\n              x: width - 68,\n              opacity: 0,\n              scale: 1,\n              borderRadius: '0rem',\n            },\n          }\n        : {\n            closed: { x: 0, opacity: 1, scale: 1, borderRadius: '0.5rem' },\n            open: {\n              x: 68 - width,\n              opacity: 0,\n              scale: 1,\n              borderRadius: '0rem',\n            },\n          };\n\n    case 'push':\n      return direction === 'left'\n        ? { closed: { x: 0, opacity: 1 }, open: { x: width + 20, opacity: 0 } }\n        : {\n            closed: { x: 0, opacity: 1 },\n            open: { x: -(width + 20), opacity: 0 },\n          };\n\n    case 'stay':\n    default:\n      return {\n        closed: { x: 0, opacity: 1 },\n        open: { x: 0, opacity: 0 },\n      };\n  }\n};\n\nconst MotionDrawer: React.FC<SideMenuProps> = ({\n  // Appearance\n  overlayColor = 'rgba(0, 0, 0, 0.3)',\n  width = 250,\n  direction = 'left',\n  backgroundColor = '#ffffff',\n\n  // Content\n  children,\n\n  // Behavior\n  isOpen: controlledIsOpen,\n  onToggle,\n  showToggleButton = true,\n\n  // Styling\n  btnClassName = '',\n  clsBtnClassName = '',\n  className = '',\n  contentClassName = '',\n  overlayClassName = '',\n\n  // Animation\n  animationConfig = {\n    type: 'spring',\n    damping: 25,\n    stiffness: 120,\n  },\n\n  // Drag behavior\n  enableDrag = true,\n  dragThreshold = 0.3,\n\n  buttonOpeningVariants = 'merge',\n}) => {\n  const [internalIsOpen, setInternalIsOpen] = useState<boolean>(false);\n\n  const isOpen = controlledIsOpen !== undefined ? controlledIsOpen : internalIsOpen;\n  const setIsOpen = (value: boolean) => {\n    if (controlledIsOpen === undefined) {\n      setInternalIsOpen(value);\n    }\n    onToggle?.(value);\n  };\n\n  const getDrawerVariants = () => {\n    if (direction === 'left') {\n      return {\n        closed: { x: -width },\n        open: { x: 0 },\n      };\n    } else {\n      return {\n        closed: { x: width },\n        open: { x: 0 },\n      };\n    }\n  };\n\n  const buttonVariants = getOpenButtonVariants(direction, width, buttonOpeningVariants);\n\n  const getDragConstraints = () => {\n    if (direction === 'left') {\n      return { left: -width, right: 0 };\n    } else {\n      return { left: 0, right: width };\n    }\n  };\n\n  const handleDragEnd = (_event: any, info: any) => {\n    if (!enableDrag) return;\n\n    const threshold = width * dragThreshold;\n    const dragDistance = Math.abs(info.offset.x);\n\n    if (direction === 'left') {\n      const isDraggingLeft = info.offset.x < 0;\n      if (isDraggingLeft && dragDistance > threshold && isOpen) {\n        setIsOpen(false);\n      } else if (!isDraggingLeft && dragDistance > threshold && !isOpen) {\n        setIsOpen(true);\n      }\n    } else {\n      const isDraggingRight = info.offset.x > 0;\n      if (isDraggingRight && dragDistance > threshold && isOpen) {\n        setIsOpen(false);\n      } else if (!isDraggingRight && dragDistance > threshold && !isOpen) {\n        setIsOpen(true);\n      }\n    }\n  };\n\n  const drawerPositionClasses = direction === 'left' ? 'left-0' : 'right-0';\n  const openButtonPositionClasses = direction === 'left' ? 'top-4 left-4' : 'top-4 right-4';\n\n  return (\n    <>\n      {showToggleButton && (\n        <motion.button\n          className={cn(\n            `fixed z-99 text-primary cursor-pointer ${openButtonPositionClasses}`,\n            btnClassName\n          )}\n          onClick={() => setIsOpen(true)}\n          variants={buttonVariants}\n          animate={isOpen ? 'open' : 'closed'}\n          transition={animationConfig}\n          whileHover={{ scale: 1.05 }}\n          whileTap={{ scale: 0.95 }}\n        >\n          <Menu />\n          {/* Open */}\n        </motion.button>\n      )}\n\n      <AnimatePresence>\n        {isOpen && (\n          <div className={`fixed w-full h-full top-0 left-0 z-9999 ${className}`}>\n            {/* Overlay */}\n            <motion.div\n              className={`absolute w-full h-full top-0 left-0 ${overlayClassName}`}\n              style={{ backgroundColor: overlayColor }}\n              onClick={() => setIsOpen(false)}\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={{ duration: 0.3 }}\n            />\n\n            {/* Drawer */}\n            <motion.div\n              className={`absolute h-full shadow-[8px_1px_21px_0px_rgba(17,17,26,0.1)] ${drawerPositionClasses} ${contentClassName}`}\n              style={{\n                backgroundColor,\n                width: `${width}px`,\n                padding: '60px 30px 30px 30px',\n                boxSizing: 'border-box',\n              }}\n              drag={enableDrag ? 'x' : false}\n              dragElastic={0.1}\n              dragConstraints={getDragConstraints()}\n              dragMomentum={false}\n              onDragEnd={handleDragEnd}\n              variants={getDrawerVariants()}\n              initial='closed'\n              animate='open'\n              exit='closed'\n              transition={animationConfig}\n            >\n              {/* Close Button */}\n              {showToggleButton && (\n                <motion.button\n                  className={cn(\n                    'absolute top-2 right-8 p-2 text-black cursor-pointer',\n                    clsBtnClassName\n                  )}\n                  onClick={() => setIsOpen(false)}\n                  whileHover={{ scale: 1.1 }}\n                  whileTap={{ scale: 0.9 }}\n                  transition={{ duration: 0.2 }}\n                >\n                  <X size={20} /> {/* Close */}\n                </motion.button>\n              )}\n\n              {/* Content */}\n              <div className='h-full overflow-y-auto'>{children}</div>\n            </motion.div>\n          </div>\n        )}\n      </AnimatePresence>\n    </>\n  );\n};\n\nexport default MotionDrawer;\n",
      "type": "registry:component"
    },
    {
      "path": "./components/ui/timeline-animation.tsx",
      "content": "import type { Variants } from 'motion/react';\nimport { type HTMLMotionProps, motion, useInView } from 'motion/react';\nimport type React from 'react';\n\ntype TimelineContentProps<T extends keyof HTMLElementTagNameMap> = {\n  children?: React.ReactNode;\n  animationNum: number;\n  className?: string;\n  timelineRef: React.RefObject<HTMLElement | null>;\n  as?: T;\n  customVariants?: Variants;\n  once?: boolean;\n} & HTMLMotionProps<T>;\n\nexport const TimelineAnimation = <T extends keyof HTMLElementTagNameMap = 'div'>({\n  children,\n  animationNum,\n  timelineRef,\n  className,\n  as,\n  customVariants,\n  once = true,\n  ...props\n}: TimelineContentProps<T>) => {\n  const defaultSequenceVariants = {\n    visible: (i: number) => ({\n      filter: 'blur(0px)',\n      y: 0,\n      opacity: 1,\n      transition: {\n        delay: i * 0.5,\n        duration: 0.5,\n      },\n    }),\n    hidden: {\n      filter: 'blur(20px)',\n      y: 0,\n      opacity: 0,\n    },\n  };\n\n  const sequenceVariants = customVariants || defaultSequenceVariants;\n\n  const isInView = useInView(timelineRef, {\n    once,\n  });\n\n  const MotionComponent = motion[as || 'div'] as React.ElementType;\n\n  return (\n    <MotionComponent\n      initial='hidden'\n      animate={isInView ? 'visible' : 'hidden'}\n      custom={animationNum}\n      variants={sequenceVariants}\n      className={className}\n      {...props}\n    >\n      {children}\n    </MotionComponent>\n  );\n};\n",
      "type": "registry:component"
    },
    {
      "path": "./hooks/use-media-query.tsx",
      "content": "'use client';\nimport { useEffect, useState } from 'react';\n\nexport function useMediaQuery(query: string) {\n  const [value, setValue] = useState(false);\n\n  useEffect(() => {\n    function onChange(event: MediaQueryListEvent) {\n      setValue(event.matches);\n    }\n\n    const result = matchMedia(query);\n    result.addEventListener('change', onChange);\n    setValue(result.matches);\n\n    return () => result.removeEventListener('change', onChange);\n  }, [query]);\n\n  return value;\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}