{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "StaggeredMenu-TS-CSS",
	"title": "StaggeredMenu",
	"description": "Menu with staggered item animations and smooth transitions on open/close.",
	"type": "registry:component",
	"files": [
		{
			"type": "registry:file",
			"path": "StaggeredMenu.css",
			"target": "@components/StaggeredMenu.css",
			"content": ".staggered-menu-wrapper {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  z-index: 40;\n  pointer-events: none;\n}\n\n.staggered-menu-wrapper.fixed-wrapper {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  z-index: 40;\n  overflow: hidden;\n}\n\n.staggered-menu-header {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 2em;\n  background: transparent;\n  pointer-events: none;\n  z-index: 20;\n}\n\n.staggered-menu-header > * {\n  pointer-events: auto;\n}\n\n.sm-logo {\n  display: flex;\n  align-items: center;\n  user-select: none;\n}\n\n.sm-logo-img {\n  display: block;\n  height: 32px;\n  width: auto;\n  object-fit: contain;\n}\n\n.sm-toggle {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.3rem;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  color: #e9e9ef;\n  font-weight: 500;\n  line-height: 1;\n  overflow: visible;\n}\n\n.sm-toggle:focus-visible {\n  outline: 2px solid #ffffffaa;\n  outline-offset: 4px;\n  border-radius: 4px;\n}\n\n.sm-line:last-of-type {\n  margin-top: 6px;\n}\n\n.sm-toggle-textWrap {\n  position: relative;\n  display: inline-block;\n  height: 1em;\n  overflow: hidden;\n  white-space: nowrap;\n  width: var(--sm-toggle-width, auto);\n  min-width: var(--sm-toggle-width, auto);\n}\n\n.sm-toggle-textInner {\n  display: flex;\n  flex-direction: column;\n  line-height: 1;\n}\n\n.sm-toggle-line {\n  display: block;\n  height: 1em;\n  line-height: 1;\n}\n\n.sm-icon {\n  position: relative;\n  width: 14px;\n  height: 14px;\n  flex: 0 0 14px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  will-change: transform;\n}\n\n.sm-panel-itemWrap {\n  position: relative;\n  overflow: hidden;\n  line-height: 1;\n}\n\n.sm-icon-line {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  width: 100%;\n  height: 2px;\n  background: currentColor;\n  border-radius: 2px;\n  transform: translate(-50%, -50%);\n  will-change: transform;\n}\n\n.sm-line {\n  display: none !important;\n}\n\n.staggered-menu-panel {\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: clamp(260px, 38vw, 420px);\n  height: 100%;\n  background: white;\n  backdrop-filter: blur(12px);\n  -webkit-backdrop-filter: blur(12px);\n  display: flex;\n  flex-direction: column;\n  padding: 6em 2em 2em 2em;\n  overflow-y: auto;\n  z-index: 10;\n  pointer-events: auto;\n  opacity: 0;\n}\n\n[data-position='left'] .staggered-menu-panel {\n  right: auto;\n  left: 0;\n}\n\n.sm-prelayers {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: clamp(260px, 38vw, 420px);\n  pointer-events: none;\n  z-index: 5;\n  opacity: 0;\n}\n\n[data-position='left'] .sm-prelayers {\n  right: auto;\n  left: 0;\n}\n\n.sm-prelayer {\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 100%;\n  width: 100%;\n  transform: translateX(0);\n  opacity: 0;\n}\n\n.sm-panel-inner {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 1.25rem;\n}\n\n.sm-socials {\n  margin-top: auto;\n  padding-top: 2rem;\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n.sm-socials-title {\n  margin: 0;\n  font-size: 1rem;\n  font-weight: 500;\n  color: var(--sm-accent, #ff0000);\n}\n\n.sm-socials-list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 1rem;\n  flex-wrap: wrap;\n}\n\n.sm-socials-list .sm-socials-link {\n  opacity: 1;\n}\n\n.sm-socials-list:hover .sm-socials-link {\n  opacity: 0.35;\n}\n\n.sm-socials-list:hover .sm-socials-link:hover {\n  opacity: 1;\n}\n\n.sm-socials-link:focus-visible {\n  outline: 2px solid var(--sm-accent, #ff0000);\n  outline-offset: 3px;\n}\n\n.sm-socials-list:focus-within .sm-socials-link {\n  opacity: 0.35;\n}\n\n.sm-socials-list:focus-within .sm-socials-link:focus-visible {\n  opacity: 1;\n}\n\n.sm-socials-link {\n  font-size: 1.2rem;\n  font-weight: 500;\n  color: #111;\n  text-decoration: none;\n  position: relative;\n  padding: 2px 0;\n  display: inline-block;\n  transition:\n    color 0.3s ease,\n    opacity 0.3s ease;\n}\n\n.sm-socials-link:hover {\n  color: var(--sm-accent, #ff0000);\n}\n\n.sm-panel-title {\n  margin: 0;\n  font-size: 1rem;\n  font-weight: 600;\n  color: #fff;\n  text-transform: uppercase;\n}\n\n.sm-panel-list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.sm-panel-item {\n  position: relative;\n  color: #000;\n  font-weight: 600;\n  font-size: 4rem;\n  cursor: pointer;\n  line-height: 1;\n  letter-spacing: -2px;\n  text-transform: uppercase;\n  transition:\n    background 0.25s,\n    color 0.25s;\n  display: inline-block;\n  text-decoration: none;\n  padding-right: 1.4em;\n}\n\n.staggered-menu-panel .sm-socials-list .sm-socials-link {\n  opacity: 1;\n  transition: opacity 0.3s ease;\n}\n\n.staggered-menu-panel .sm-socials-list:hover .sm-socials-link:not(:hover) {\n  opacity: 0.35;\n}\n\n.staggered-menu-panel .sm-socials-list:focus-within .sm-socials-link:not(:focus-visible) {\n  opacity: 0.35;\n}\n\n.staggered-menu-panel .sm-socials-list .sm-socials-link:hover,\n.staggered-menu-panel .sm-socials-list .sm-socials-link:focus-visible {\n  opacity: 1;\n}\n\n.sm-panel-itemLabel {\n  display: inline-block;\n  will-change: transform;\n  transform-origin: 50% 100%;\n}\n\n.sm-panel-item:hover {\n  color: var(--sm-accent, #5227ff);\n}\n\n.sm-panel-list[data-numbering] {\n  counter-reset: smItem;\n}\n\n.sm-panel-list[data-numbering] .sm-panel-item::after {\n  counter-increment: smItem;\n  content: counter(smItem, decimal-leading-zero);\n  position: absolute;\n  top: 0.1em;\n  right: 3.2em;\n  font-size: 18px;\n  font-weight: 400;\n  color: var(--sm-accent, #5227ff);\n  letter-spacing: 0;\n  pointer-events: none;\n  user-select: none;\n  opacity: var(--sm-num-opacity, 0);\n}\n\n@media (max-width: 1024px) {\n  .staggered-menu-panel {\n    width: 100%;\n    left: 0;\n    right: 0;\n  }\n\n  .staggered-menu-wrapper[data-open] .sm-logo-img {\n    filter: invert(100%);\n  }\n}\n\n@media (max-width: 640px) {\n  .staggered-menu-panel {\n    width: 100%;\n    left: 0;\n    right: 0;\n  }\n\n  .staggered-menu-wrapper[data-open] .sm-logo-img {\n    filter: invert(100%);\n  }\n}\n"
		},
		{
			"type": "registry:component",
			"path": "StaggeredMenu.tsx",
			"content": "import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';\nimport { gsap } from 'gsap';\nimport './StaggeredMenu.css';\n\nexport interface StaggeredMenuItem {\n  label: string;\n  ariaLabel: string;\n  link: string;\n}\n\nexport interface StaggeredMenuSocialItem {\n  label: string;\n  link: string;\n}\n\nexport interface StaggeredMenuProps {\n  position?: 'left' | 'right';\n  colors?: string[];\n  items?: StaggeredMenuItem[];\n  socialItems?: StaggeredMenuSocialItem[];\n  displaySocials?: boolean;\n  displayItemNumbering?: boolean;\n  className?: string;\n  logoUrl?: string;\n  menuButtonColor?: string;\n  openMenuButtonColor?: string;\n  accentColor?: string;\n  changeMenuColorOnOpen?: boolean;\n  closeOnClickAway?: boolean;\n  onMenuOpen?: () => void;\n  onMenuClose?: () => void;\n  isFixed?: boolean;\n}\n\nexport const StaggeredMenu: React.FC<StaggeredMenuProps> = ({\n  position = 'right',\n  colors = ['#B497CF', '#5227FF'],\n  items = [],\n  socialItems = [],\n  displaySocials = true,\n  displayItemNumbering = true,\n  className,\n  logoUrl = '/src/assets/logos/reactbits-gh-white.svg',\n  menuButtonColor = '#fff',\n  openMenuButtonColor = '#fff',\n  changeMenuColorOnOpen = true,\n  accentColor = '#5227FF',\n  isFixed = false,\n  closeOnClickAway = true,\n  onMenuOpen,\n  onMenuClose\n}: StaggeredMenuProps) => {\n  const [open, setOpen] = useState(false);\n  const openRef = useRef(false);\n  const panelRef = useRef<HTMLDivElement | null>(null);\n  const preLayersRef = useRef<HTMLDivElement | null>(null);\n  const preLayerElsRef = useRef<HTMLElement[]>([]);\n  const plusHRef = useRef<HTMLSpanElement | null>(null);\n  const plusVRef = useRef<HTMLSpanElement | null>(null);\n  const iconRef = useRef<HTMLSpanElement | null>(null);\n  const textInnerRef = useRef<HTMLSpanElement | null>(null);\n  const textWrapRef = useRef<HTMLSpanElement | null>(null);\n  const [textLines, setTextLines] = useState<string[]>(['Menu', 'Close']);\n\n  const openTlRef = useRef<gsap.core.Timeline | null>(null);\n  const closeTweenRef = useRef<gsap.core.Tween | null>(null);\n  const spinTweenRef = useRef<gsap.core.Tween | null>(null);\n  const textCycleAnimRef = useRef<gsap.core.Tween | null>(null);\n  const colorTweenRef = useRef<gsap.core.Tween | null>(null);\n  const toggleBtnRef = useRef<HTMLButtonElement | null>(null);\n  const busyRef = useRef(false);\n  const itemEntranceTweenRef = useRef<gsap.core.Tween | null>(null);\n\n  useLayoutEffect(() => {\n    const ctx = gsap.context(() => {\n      const panel = panelRef.current;\n      const preContainer = preLayersRef.current;\n      const plusH = plusHRef.current;\n      const plusV = plusVRef.current;\n      const icon = iconRef.current;\n      const textInner = textInnerRef.current;\n      if (!panel || !plusH || !plusV || !icon || !textInner) return;\n\n      let preLayers: HTMLElement[] = [];\n      if (preContainer) {\n        preLayers = Array.from(preContainer.querySelectorAll('.sm-prelayer')) as HTMLElement[];\n      }\n      preLayerElsRef.current = preLayers;\n\n      const offscreen = position === 'left' ? -100 : 100;\n      gsap.set([panel, ...preLayers], { xPercent: offscreen, opacity: 1 });\n      if (preContainer) {\n        gsap.set(preContainer, { xPercent: 0, opacity: 1 });\n      }\n      gsap.set(plusH, { transformOrigin: '50% 50%', rotate: 0 });\n      gsap.set(plusV, { transformOrigin: '50% 50%', rotate: 90 });\n      gsap.set(icon, { rotate: 0, transformOrigin: '50% 50%' });\n      gsap.set(textInner, { yPercent: 0 });\n      if (toggleBtnRef.current) gsap.set(toggleBtnRef.current, { color: menuButtonColor });\n    });\n    return () => ctx.revert();\n  }, [menuButtonColor, position]);\n\n  const buildOpenTimeline = useCallback(() => {\n    const panel = panelRef.current;\n    const layers = preLayerElsRef.current;\n    if (!panel) return null;\n\n    openTlRef.current?.kill();\n    if (closeTweenRef.current) {\n      closeTweenRef.current.kill();\n      closeTweenRef.current = null;\n    }\n    itemEntranceTweenRef.current?.kill();\n\n    const itemEls = Array.from(panel.querySelectorAll('.sm-panel-itemLabel')) as HTMLElement[];\n    const numberEls = Array.from(\n      panel.querySelectorAll('.sm-panel-list[data-numbering] .sm-panel-item')\n    ) as HTMLElement[];\n    const socialTitle = panel.querySelector('.sm-socials-title') as HTMLElement | null;\n    const socialLinks = Array.from(panel.querySelectorAll('.sm-socials-link')) as HTMLElement[];\n\n    const offscreen = position === 'left' ? -100 : 100;\n    const layerStates = layers.map(el => ({ el, start: offscreen }));\n    const panelStart = offscreen;\n\n    if (itemEls.length) {\n      gsap.set(itemEls, { yPercent: 140, rotate: 10 });\n    }\n    if (numberEls.length) {\n      gsap.set(numberEls, { '--sm-num-opacity': 0 });\n    }\n    if (socialTitle) {\n      gsap.set(socialTitle, { opacity: 0 });\n    }\n    if (socialLinks.length) {\n      gsap.set(socialLinks, { y: 25, opacity: 0 });\n    }\n\n    const tl = gsap.timeline({ paused: true });\n\n    layerStates.forEach((ls, i) => {\n      tl.fromTo(ls.el, { xPercent: ls.start }, { xPercent: 0, duration: 0.5, ease: 'power4.out' }, i * 0.07);\n    });\n    const lastTime = layerStates.length ? (layerStates.length - 1) * 0.07 : 0;\n    const panelInsertTime = lastTime + (layerStates.length ? 0.08 : 0);\n    const panelDuration = 0.65;\n    tl.fromTo(\n      panel,\n      { xPercent: panelStart },\n      { xPercent: 0, duration: panelDuration, ease: 'power4.out' },\n      panelInsertTime\n    );\n\n    if (itemEls.length) {\n      const itemsStartRatio = 0.15;\n      const itemsStart = panelInsertTime + panelDuration * itemsStartRatio;\n      tl.to(\n        itemEls,\n        {\n          yPercent: 0,\n          rotate: 0,\n          duration: 1,\n          ease: 'power4.out',\n          stagger: { each: 0.1, from: 'start' }\n        },\n        itemsStart\n      );\n      if (numberEls.length) {\n        tl.to(\n          numberEls,\n          {\n            duration: 0.6,\n            ease: 'power2.out',\n            '--sm-num-opacity': 1,\n            stagger: { each: 0.08, from: 'start' }\n          },\n          itemsStart + 0.1\n        );\n      }\n    }\n\n    if (socialTitle || socialLinks.length) {\n      const socialsStart = panelInsertTime + panelDuration * 0.4;\n      if (socialTitle) {\n        tl.to(\n          socialTitle,\n          {\n            opacity: 1,\n            duration: 0.5,\n            ease: 'power2.out'\n          },\n          socialsStart\n        );\n      }\n      if (socialLinks.length) {\n        tl.to(\n          socialLinks,\n          {\n            y: 0,\n            opacity: 1,\n            duration: 0.55,\n            ease: 'power3.out',\n            stagger: { each: 0.08, from: 'start' },\n            onComplete: () => {\n              gsap.set(socialLinks, { clearProps: 'opacity' });\n            }\n          },\n          socialsStart + 0.04\n        );\n      }\n    }\n\n    openTlRef.current = tl;\n    return tl;\n  }, [position]);\n\n  const playOpen = useCallback(() => {\n    if (busyRef.current) return;\n    busyRef.current = true;\n    const tl = buildOpenTimeline();\n    if (tl) {\n      tl.eventCallback('onComplete', () => {\n        busyRef.current = false;\n      });\n      tl.play(0);\n    } else {\n      busyRef.current = false;\n    }\n  }, [buildOpenTimeline]);\n\n  const playClose = useCallback(() => {\n    openTlRef.current?.kill();\n    openTlRef.current = null;\n    itemEntranceTweenRef.current?.kill();\n\n    const panel = panelRef.current;\n    const layers = preLayerElsRef.current;\n    if (!panel) return;\n\n    const all: HTMLElement[] = [...layers, panel];\n    closeTweenRef.current?.kill();\n    const offscreen = position === 'left' ? -100 : 100;\n    closeTweenRef.current = gsap.to(all, {\n      xPercent: offscreen,\n      duration: 0.32,\n      ease: 'power3.in',\n      overwrite: 'auto',\n      onComplete: () => {\n        const itemEls = Array.from(panel.querySelectorAll('.sm-panel-itemLabel')) as HTMLElement[];\n        if (itemEls.length) {\n          gsap.set(itemEls, { yPercent: 140, rotate: 10 });\n        }\n        const numberEls = Array.from(\n          panel.querySelectorAll('.sm-panel-list[data-numbering] .sm-panel-item')\n        ) as HTMLElement[];\n        if (numberEls.length) {\n          gsap.set(numberEls, { '--sm-num-opacity': 0 });\n        }\n        const socialTitle = panel.querySelector('.sm-socials-title') as HTMLElement | null;\n        const socialLinks = Array.from(panel.querySelectorAll('.sm-socials-link')) as HTMLElement[];\n        if (socialTitle) gsap.set(socialTitle, { opacity: 0 });\n        if (socialLinks.length) gsap.set(socialLinks, { y: 25, opacity: 0 });\n        busyRef.current = false;\n      }\n    });\n  }, [position]);\n\n  const animateIcon = useCallback((opening: boolean) => {\n    const icon = iconRef.current;\n    if (!icon) return;\n    spinTweenRef.current?.kill();\n    if (opening) {\n      spinTweenRef.current = gsap.to(icon, { rotate: 225, duration: 0.8, ease: 'power4.out', overwrite: 'auto' });\n    } else {\n      spinTweenRef.current = gsap.to(icon, { rotate: 0, duration: 0.35, ease: 'power3.inOut', overwrite: 'auto' });\n    }\n  }, []);\n\n  const animateColor = useCallback(\n    (opening: boolean) => {\n      const btn = toggleBtnRef.current;\n      if (!btn) return;\n      colorTweenRef.current?.kill();\n      if (changeMenuColorOnOpen) {\n        const targetColor = opening ? openMenuButtonColor : menuButtonColor;\n        colorTweenRef.current = gsap.to(btn, {\n          color: targetColor,\n          delay: 0.18,\n          duration: 0.3,\n          ease: 'power2.out'\n        });\n      } else {\n        gsap.set(btn, { color: menuButtonColor });\n      }\n    },\n    [openMenuButtonColor, menuButtonColor, changeMenuColorOnOpen]\n  );\n\n  React.useEffect(() => {\n    if (toggleBtnRef.current) {\n      if (changeMenuColorOnOpen) {\n        const targetColor = openRef.current ? openMenuButtonColor : menuButtonColor;\n        gsap.set(toggleBtnRef.current, { color: targetColor });\n      } else {\n        gsap.set(toggleBtnRef.current, { color: menuButtonColor });\n      }\n    }\n  }, [changeMenuColorOnOpen, menuButtonColor, openMenuButtonColor]);\n\n  const animateText = useCallback((opening: boolean) => {\n    const inner = textInnerRef.current;\n    if (!inner) return;\n    textCycleAnimRef.current?.kill();\n\n    const currentLabel = opening ? 'Menu' : 'Close';\n    const targetLabel = opening ? 'Close' : 'Menu';\n    const cycles = 3;\n    const seq: string[] = [currentLabel];\n    let last = currentLabel;\n    for (let i = 0; i < cycles; i++) {\n      last = last === 'Menu' ? 'Close' : 'Menu';\n      seq.push(last);\n    }\n    if (last !== targetLabel) seq.push(targetLabel);\n    seq.push(targetLabel);\n    setTextLines(seq);\n\n    gsap.set(inner, { yPercent: 0 });\n    const lineCount = seq.length;\n    const finalShift = ((lineCount - 1) / lineCount) * 100;\n    textCycleAnimRef.current = gsap.to(inner, {\n      yPercent: -finalShift,\n      duration: 0.5 + lineCount * 0.07,\n      ease: 'power4.out'\n    });\n  }, []);\n\n  const toggleMenu = useCallback(() => {\n    const target = !openRef.current;\n    openRef.current = target;\n    setOpen(target);\n    if (target) {\n      onMenuOpen?.();\n      playOpen();\n    } else {\n      onMenuClose?.();\n      playClose();\n    }\n    animateIcon(target);\n    animateColor(target);\n    animateText(target);\n  }, [playOpen, playClose, animateIcon, animateColor, animateText]);\n\n  const closeMenu = useCallback(() => {\n    if (openRef.current) {\n      openRef.current = false;\n      setOpen(false);\n      onMenuClose?.();\n      playClose();\n      animateIcon(false);\n      animateColor(false);\n      animateText(false);\n    }\n  }, [playClose, animateIcon, animateColor, animateText, onMenuClose]);\n\n  React.useEffect(() => {\n    if (!closeOnClickAway || !open) return;\n\n    const handleClickOutside = (event: MouseEvent) => {\n      if (\n        panelRef.current &&\n        !panelRef.current.contains(event.target as Node) &&\n        toggleBtnRef.current &&\n        !toggleBtnRef.current.contains(event.target as Node)\n      ) {\n        closeMenu();\n      }\n    };\n\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n    };\n  }, [closeOnClickAway, open, closeMenu]);\n\n  return (\n    <div\n      className={(className ? className + ' ' : '') + 'staggered-menu-wrapper' + (isFixed ? ' fixed-wrapper' : '')}\n      style={accentColor ? { ['--sm-accent' as any]: accentColor } : undefined}\n      data-position={position}\n      data-open={open || undefined}\n    >\n      <div ref={preLayersRef} className=\"sm-prelayers\" aria-hidden=\"true\">\n        {(() => {\n          const raw = colors && colors.length ? colors.slice(0, 4) : ['#1e1e22', '#35353c'];\n          let arr = [...raw];\n          if (arr.length >= 3) {\n            const mid = Math.floor(arr.length / 2);\n            arr.splice(mid, 1);\n          }\n          return arr.map((c, i) => <div key={i} className=\"sm-prelayer\" style={{ background: c }} />);\n        })()}\n      </div>\n      <header className=\"staggered-menu-header\" aria-label=\"Main navigation header\">\n        <div className=\"sm-logo\" aria-label=\"Logo\">\n          <img\n            src={logoUrl || '/src/assets/logos/reactbits-gh-white.svg'}\n            alt=\"Logo\"\n            className=\"sm-logo-img\"\n            draggable={false}\n            width={110}\n            height={24}\n          />\n        </div>\n        <button\n          ref={toggleBtnRef}\n          className=\"sm-toggle\"\n          aria-label={open ? 'Close menu' : 'Open menu'}\n          aria-expanded={open}\n          aria-controls=\"staggered-menu-panel\"\n          onClick={toggleMenu}\n          type=\"button\"\n        >\n          <span ref={textWrapRef} className=\"sm-toggle-textWrap\" aria-hidden=\"true\">\n            <span ref={textInnerRef} className=\"sm-toggle-textInner\">\n              {textLines.map((l, i) => (\n                <span className=\"sm-toggle-line\" key={i}>\n                  {l}\n                </span>\n              ))}\n            </span>\n          </span>\n          <span ref={iconRef} className=\"sm-icon\" aria-hidden=\"true\">\n            <span ref={plusHRef} className=\"sm-icon-line\" />\n            <span ref={plusVRef} className=\"sm-icon-line sm-icon-line-v\" />\n          </span>\n        </button>\n      </header>\n\n      <aside id=\"staggered-menu-panel\" ref={panelRef} className=\"staggered-menu-panel\" aria-hidden={!open}>\n        <div className=\"sm-panel-inner\">\n          <ul className=\"sm-panel-list\" role=\"list\" data-numbering={displayItemNumbering || undefined}>\n            {items && items.length ? (\n              items.map((it, idx) => (\n                <li className=\"sm-panel-itemWrap\" key={it.label + idx}>\n                  <a className=\"sm-panel-item\" href={it.link} aria-label={it.ariaLabel} data-index={idx + 1}>\n                    <span className=\"sm-panel-itemLabel\">{it.label}</span>\n                  </a>\n                </li>\n              ))\n            ) : (\n              <li className=\"sm-panel-itemWrap\" aria-hidden=\"true\">\n                <span className=\"sm-panel-item\">\n                  <span className=\"sm-panel-itemLabel\">No items</span>\n                </span>\n              </li>\n            )}\n          </ul>\n          {displaySocials && socialItems && socialItems.length > 0 && (\n            <div className=\"sm-socials\" aria-label=\"Social links\">\n              <h3 className=\"sm-socials-title\">Socials</h3>\n              <ul className=\"sm-socials-list\" role=\"list\">\n                {socialItems.map((s, i) => (\n                  <li key={s.label + i} className=\"sm-socials-item\">\n                    <a href={s.link} target=\"_blank\" rel=\"noopener noreferrer\" className=\"sm-socials-link\">\n                      {s.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          )}\n        </div>\n      </aside>\n    </div>\n  );\n};\n\nexport default StaggeredMenu;\n"
		}
	],
	"registryDependencies": [],
	"dependencies": [
		"gsap@^3.13.0"
	]
}