{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "StaggeredMenu-JS-TW",
	"title": "StaggeredMenu",
	"description": "Menu with staggered item animations and smooth transitions on open/close.",
	"type": "registry:component",
	"files": [
		{
			"type": "registry:component",
			"path": "StaggeredMenu/StaggeredMenu.jsx",
			"content": "import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';\nimport { gsap } from 'gsap';\n\nexport const StaggeredMenu = ({\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  isFixed = false,\n  accentColor = '#5227FF',\n  closeOnClickAway = true,\n  onMenuOpen,\n  onMenuClose\n}) => {\n  const [open, setOpen] = useState(false);\n  const openRef = useRef(false);\n\n  const panelRef = useRef(null);\n  const preLayersRef = useRef(null);\n  const preLayerElsRef = useRef([]);\n\n  const plusHRef = useRef(null);\n  const plusVRef = useRef(null);\n  const iconRef = useRef(null);\n\n  const textInnerRef = useRef(null);\n  const textWrapRef = useRef(null);\n  const [textLines, setTextLines] = useState(['Menu', 'Close']);\n\n  const openTlRef = useRef(null);\n  const closeTweenRef = useRef(null);\n  const spinTweenRef = useRef(null);\n  const textCycleAnimRef = useRef(null);\n  const colorTweenRef = useRef(null);\n\n  const toggleBtnRef = useRef(null);\n  const busyRef = useRef(false);\n\n  const itemEntranceTweenRef = useRef(null);\n\n  useLayoutEffect(() => {\n    const ctx = gsap.context(() => {\n      const panel = panelRef.current;\n      const preContainer = preLayersRef.current;\n\n      const plusH = plusHRef.current;\n      const plusV = plusVRef.current;\n      const icon = iconRef.current;\n      const textInner = textInnerRef.current;\n\n      if (!panel || !plusH || !plusV || !icon || !textInner) return;\n\n      let preLayers = [];\n      if (preContainer) {\n        preLayers = Array.from(preContainer.querySelectorAll('.sm-prelayer'));\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\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\n      gsap.set(textInner, { yPercent: 0 });\n\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'));\n    const numberEls = Array.from(panel.querySelectorAll('.sm-panel-list[data-numbering] .sm-panel-item'));\n    const socialTitle = panel.querySelector('.sm-socials-title');\n    const socialLinks = Array.from(panel.querySelectorAll('.sm-socials-link'));\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) gsap.set(itemEls, { yPercent: 140, rotate: 10 });\n    if (numberEls.length) gsap.set(numberEls, { ['--sm-num-opacity']: 0 });\n    if (socialTitle) gsap.set(socialTitle, { opacity: 0 });\n    if (socialLinks.length) gsap.set(socialLinks, { y: 25, opacity: 0 });\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\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\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\n      tl.to(\n        itemEls,\n        { yPercent: 0, rotate: 0, duration: 1, ease: 'power4.out', stagger: { each: 0.1, from: 'start' } },\n        itemsStart\n      );\n\n      if (numberEls.length) {\n        tl.to(\n          numberEls,\n          { duration: 0.6, ease: 'power2.out', ['--sm-num-opacity']: 1, stagger: { each: 0.08, from: 'start' } },\n          itemsStart + 0.1\n        );\n      }\n    }\n\n    if (socialTitle || socialLinks.length) {\n      const socialsStart = panelInsertTime + panelDuration * 0.4;\n\n      if (socialTitle) tl.to(socialTitle, { opacity: 1, duration: 0.5, ease: 'power2.out' }, socialsStart);\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: () => gsap.set(socialLinks, { clearProps: 'opacity' })\n          },\n          socialsStart + 0.04\n        );\n      }\n    }\n\n    openTlRef.current = tl;\n    return tl;\n  }, []);\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 = [...layers, panel];\n    closeTweenRef.current?.kill();\n\n    const offscreen = position === 'left' ? -100 : 100;\n\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'));\n        if (itemEls.length) gsap.set(itemEls, { yPercent: 140, rotate: 10 });\n\n        const numberEls = Array.from(panel.querySelectorAll('.sm-panel-list[data-numbering] .sm-panel-item'));\n        if (numberEls.length) gsap.set(numberEls, { ['--sm-num-opacity']: 0 });\n\n        const socialTitle = panel.querySelector('.sm-socials-title');\n        const socialLinks = Array.from(panel.querySelectorAll('.sm-socials-link'));\n        if (socialTitle) gsap.set(socialTitle, { opacity: 0 });\n        if (socialLinks.length) gsap.set(socialLinks, { y: 25, opacity: 0 });\n\n        busyRef.current = false;\n      }\n    });\n  }, [position]);\n\n  const animateIcon = useCallback(opening => {\n    const icon = iconRef.current;\n    const h = plusHRef.current;\n    const v = plusVRef.current;\n    if (!icon || !h || !v) return;\n\n    spinTweenRef.current?.kill();\n\n    if (opening) {\n      gsap.set(icon, { rotate: 0, transformOrigin: '50% 50%' });\n      spinTweenRef.current = gsap\n        .timeline({ defaults: { ease: 'power4.out' } })\n        .to(h, { rotate: 45, duration: 0.5 }, 0)\n        .to(v, { rotate: -45, duration: 0.5 }, 0);\n    } else {\n      spinTweenRef.current = gsap\n        .timeline({ defaults: { ease: 'power3.inOut' } })\n        .to(h, { rotate: 0, duration: 0.35 }, 0)\n        .to(v, { rotate: 90, duration: 0.35 }, 0)\n        .to(icon, { rotate: 0, duration: 0.001 }, 0);\n    }\n  }, []);\n\n  const animateColor = useCallback(\n    opening => {\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, { color: targetColor, delay: 0.18, duration: 0.3, ease: 'power2.out' });\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 => {\n    const inner = textInnerRef.current;\n    if (!inner) return;\n\n    textCycleAnimRef.current?.kill();\n\n    const currentLabel = opening ? 'Menu' : 'Close';\n    const targetLabel = opening ? 'Close' : 'Menu';\n    const cycles = 3;\n\n    const seq = [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\n    setTextLines(seq);\n    gsap.set(inner, { yPercent: 0 });\n\n    const lineCount = seq.length;\n    const finalShift = ((lineCount - 1) / lineCount) * 100;\n\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\n    if (target) {\n      onMenuOpen?.();\n      playOpen();\n    } else {\n      onMenuClose?.();\n      playClose();\n    }\n\n    animateIcon(target);\n    animateColor(target);\n    animateText(target);\n  }, [playOpen, playClose, animateIcon, animateColor, animateText, onMenuOpen, onMenuClose]);\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 => {\n      if (\n        panelRef.current &&\n        !panelRef.current.contains(event.target) &&\n        toggleBtnRef.current &&\n        !toggleBtnRef.current.contains(event.target)\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={`sm-scope z-40 ${isFixed ? 'fixed top-0 left-0 w-screen h-screen overflow-hidden' : 'w-full h-full'}`}\n    >\n      <div\n        className={\n          (className ? className + ' ' : '') + 'staggered-menu-wrapper pointer-events-none relative w-full h-full'\n        }\n        style={accentColor ? { ['--sm-accent']: accentColor } : undefined}\n        data-position={position}\n        data-open={open || undefined}\n      >\n        <div\n          ref={preLayersRef}\n          className=\"sm-prelayers absolute top-0 right-0 bottom-0 pointer-events-none z-[5]\"\n          aria-hidden=\"true\"\n        >\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) => (\n              <div\n                key={i}\n                className=\"sm-prelayer absolute top-0 right-0 h-full w-full translate-x-0\"\n                style={{ background: c }}\n              />\n            ));\n          })()}\n        </div>\n\n        <header\n          className=\"staggered-menu-header absolute top-0 left-0 w-full flex items-center justify-between p-[2em] bg-transparent pointer-events-none z-20\"\n          aria-label=\"Main navigation header\"\n        >\n          <div className=\"sm-logo flex items-center select-none pointer-events-auto\" aria-label=\"Logo\">\n            <img\n              src={logoUrl || '/src/assets/logos/reactbits-gh-white.svg'}\n              alt=\"Logo\"\n              className=\"sm-logo-img block h-8 w-auto object-contain\"\n              draggable={false}\n              width={110}\n              height={24}\n            />\n          </div>\n\n          <button\n            ref={toggleBtnRef}\n            className=\"sm-toggle relative inline-flex items-center gap-[0.3rem] bg-transparent border-0 cursor-pointer text-[#e9e9ef] font-medium leading-none overflow-visible pointer-events-auto\"\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\n              ref={textWrapRef}\n              className=\"sm-toggle-textWrap relative inline-block h-[1em] overflow-hidden whitespace-nowrap w-[var(--sm-toggle-width,auto)] min-w-[var(--sm-toggle-width,auto)]\"\n              aria-hidden=\"true\"\n            >\n              <span ref={textInnerRef} className=\"sm-toggle-textInner flex flex-col leading-none\">\n                {textLines.map((l, i) => (\n                  <span className=\"sm-toggle-line block h-[1em] leading-none\" key={i}>\n                    {l}\n                  </span>\n                ))}\n              </span>\n            </span>\n\n            <span\n              ref={iconRef}\n              className=\"sm-icon relative w-[14px] h-[14px] shrink-0 inline-flex items-center justify-center [will-change:transform]\"\n              aria-hidden=\"true\"\n            >\n              <span\n                ref={plusHRef}\n                className=\"sm-icon-line absolute left-1/2 top-1/2 w-full h-[2px] bg-current rounded-[2px] -translate-x-1/2 -translate-y-1/2 [will-change:transform]\"\n              />\n              <span\n                ref={plusVRef}\n                className=\"sm-icon-line sm-icon-line-v absolute left-1/2 top-1/2 w-full h-[2px] bg-current rounded-[2px] -translate-x-1/2 -translate-y-1/2 [will-change:transform]\"\n              />\n            </span>\n          </button>\n        </header>\n\n        <aside\n          id=\"staggered-menu-panel\"\n          ref={panelRef}\n          className=\"staggered-menu-panel absolute top-0 right-0 h-full bg-white flex flex-col p-[6em_2em_2em_2em] overflow-y-auto z-10 backdrop-blur-[12px] pointer-events-auto\"\n          style={{ WebkitBackdropFilter: 'blur(12px)' }}\n          aria-hidden={!open}\n        >\n          <div className=\"sm-panel-inner flex-1 flex flex-col gap-5\">\n            <ul\n              className=\"sm-panel-list list-none m-0 p-0 flex flex-col gap-2\"\n              role=\"list\"\n              data-numbering={displayItemNumbering || undefined}\n            >\n              {items && items.length ? (\n                items.map((it, idx) => (\n                  <li className=\"sm-panel-itemWrap relative overflow-hidden leading-none\" key={it.label + idx}>\n                    <a\n                      className=\"sm-panel-item relative text-black font-semibold text-[4rem] cursor-pointer leading-none tracking-[-2px] uppercase transition-[background,color] duration-150 ease-linear inline-block no-underline pr-[1.4em]\"\n                      href={it.link}\n                      aria-label={it.ariaLabel}\n                      data-index={idx + 1}\n                    >\n                      <span className=\"sm-panel-itemLabel inline-block [transform-origin:50%_100%] will-change-transform\">\n                        {it.label}\n                      </span>\n                    </a>\n                  </li>\n                ))\n              ) : (\n                <li className=\"sm-panel-itemWrap relative overflow-hidden leading-none\" aria-hidden=\"true\">\n                  <span className=\"sm-panel-item relative text-black font-semibold text-[4rem] cursor-pointer leading-none tracking-[-2px] uppercase transition-[background,color] duration-150 ease-linear inline-block no-underline pr-[1.4em]\">\n                    <span className=\"sm-panel-itemLabel inline-block [transform-origin:50%_100%] will-change-transform\">\n                      No items\n                    </span>\n                  </span>\n                </li>\n              )}\n            </ul>\n\n            {displaySocials && socialItems && socialItems.length > 0 && (\n              <div className=\"sm-socials mt-auto pt-8 flex flex-col gap-3\" aria-label=\"Social links\">\n                <h3 className=\"sm-socials-title m-0 text-base font-medium [color:var(--sm-accent,#ff0000)]\">Socials</h3>\n                <ul\n                  className=\"sm-socials-list list-none m-0 p-0 flex flex-row items-center gap-4 flex-wrap\"\n                  role=\"list\"\n                >\n                  {socialItems.map((s, i) => (\n                    <li key={s.label + i} className=\"sm-socials-item\">\n                      <a\n                        href={s.link}\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\"\n                        className=\"sm-socials-link text-[1.2rem] font-medium text-[#111] no-underline relative inline-block py-[2px] transition-[color,opacity] duration-300 ease-linear\"\n                      >\n                        {s.label}\n                      </a>\n                    </li>\n                  ))}\n                </ul>\n              </div>\n            )}\n          </div>\n        </aside>\n      </div>\n\n      <style>{`\n.sm-scope .staggered-menu-wrapper { position: relative; width: 100%; height: 100%; z-index: 40; pointer-events: none; }\n.sm-scope .staggered-menu-header { position: absolute; top: 0; left: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 2em; background: transparent; pointer-events: none; z-index: 20; }\n.sm-scope .staggered-menu-header > * { pointer-events: auto; }\n.sm-scope .sm-logo { display: flex; align-items: center; user-select: none; }\n.sm-scope .sm-logo-img { display: block; height: 32px; width: auto; object-fit: contain; }\n.sm-scope .sm-toggle { position: relative; display: inline-flex; align-items: center; gap: 0.3rem; background: transparent; border: none; cursor: pointer; color: #e9e9ef; font-weight: 500; line-height: 1; overflow: visible; }\n.sm-scope .sm-toggle:focus-visible { outline: 2px solid #ffffffaa; outline-offset: 4px; border-radius: 4px; }\n.sm-scope .sm-line:last-of-type { margin-top: 6px; }\n.sm-scope .sm-toggle-textWrap { position: relative; margin-right: 0.5em; display: inline-block; height: 1em; overflow: hidden; white-space: nowrap; width: var(--sm-toggle-width, auto); min-width: var(--sm-toggle-width, auto); }\n.sm-scope .sm-toggle-textInner { display: flex; flex-direction: column; line-height: 1; }\n.sm-scope .sm-toggle-line { display: block; height: 1em; line-height: 1; }\n.sm-scope .sm-icon { position: relative; width: 14px; height: 14px; flex: 0 0 14px; display: inline-flex; align-items: center; justify-content: center; will-change: transform; }\n.sm-scope .sm-panel-itemWrap { position: relative; overflow: hidden; line-height: 1; }\n.sm-scope .sm-icon-line { position: absolute; left: 50%; top: 50%; width: 100%; height: 2px; background: currentColor; border-radius: 2px; transform: translate(-50%, -50%); will-change: transform; }\n.sm-scope .sm-line { display: none !important; }\n.sm-scope .staggered-menu-panel { poimport StaggeredMenu from '../../../ts-default/Components/StaggeredMenu/StaggeredMenu';\nsition: absolute; top: 0; right: 0; width: clamp(260px, 38vw, 420px); height: 100%; background: white; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; flex-direction: column; padding: 6em 2em 2em 2em; overflow-y: auto; z-index: 10; }\n.sm-scope [data-position='left'] .staggered-menu-panel { right: auto; left: 0; }\n.sm-scope .sm-prelayers { position: absolute; top: 0; right: 0; bottom: 0; width: clamp(260px, 38vw, 420px); pointer-events: none; z-index: 5; }\n.sm-scope [data-position='left'] .sm-prelayers { right: auto; left: 0; }\n.sm-scope .sm-prelayer { position: absolute; top: 0; right: 0; height: 100%; width: 100%; transform: translateX(0); }\n.sm-scope .sm-panel-inner { flex: 1; display: flex; flex-direction: column; gap: 1.25rem; }\n.sm-scope .sm-socials { margin-top: auto; padding-top: 2rem; display: flex; flex-direction: column; gap: 0.75rem; }\n.sm-scope .sm-socials-title { margin: 0; font-size: 1rem; font-weight: 500; color: var(--sm-accent, #ff0000); }\n.sm-scope .sm-socials-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row; align-items: center; gap: 1rem; flex-wrap: wrap; }\n.sm-scope .sm-socials-list .sm-socials-link { opacity: 1; transition: opacity 0.3s ease; }\n.sm-scope .sm-socials-list:hover .sm-socials-link:not(:hover) { opacity: 0.35; }\n.sm-scope .sm-socials-list:focus-within .sm-socials-link:not(:focus-visible) { opacity: 0.35; }\n.sm-scope .sm-socials-list .sm-socials-link:hover,\n.sm-scope .sm-socials-list .sm-socials-link:focus-visible { opacity: 1; }\n.sm-scope .sm-socials-link:focus-visible { outline: 2px solid var(--sm-accent, #ff0000); outline-offset: 3px; }\n.sm-scope .sm-socials-link { font-size: 1.2rem; font-weight: 500; color: #111; text-decoration: none; position: relative; padding: 2px 0; display: inline-block; transition: color 0.3s ease, opacity 0.3s ease; }\n.sm-scope .sm-socials-link:hover { color: var(--sm-accent, #ff0000); }\n.sm-scope .sm-panel-title { margin: 0; font-size: 1rem; font-weight: 600; color: #fff; text-transform: uppercase; }\n.sm-scope .sm-panel-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }\n.sm-scope .sm-panel-item { position: relative; color: #000; font-weight: 600; font-size: 4rem; cursor: pointer; line-height: 1; letter-spacing: -2px; text-transform: uppercase; transition: background 0.25s, color 0.25s; display: inline-block; text-decoration: none; padding-right: 1.4em; }\n.sm-scope .sm-panel-itemLabel { display: inline-block; will-change: transform; transform-origin: 50% 100%; }\n.sm-scope .sm-panel-item:hover { color: var(--sm-accent, #ff0000); }\n.sm-scope .sm-panel-list[data-numbering] { counter-reset: smItem; }\n.sm-scope .sm-panel-list[data-numbering] .sm-panel-item::after { counter-increment: smItem; content: counter(smItem, decimal-leading-zero); position: absolute; top: 0.1em; right: 3.2em; font-size: 18px; font-weight: 400; color: var(--sm-accent, #ff0000); letter-spacing: 0; pointer-events: none; user-select: none; opacity: var(--sm-num-opacity, 0); }\n@media (max-width: 1024px) { .sm-scope .staggered-menu-panel { width: 100%; left: 0; right: 0; } .sm-scope .staggered-menu-wrapper[data-open] .sm-logo-img { filter: invert(100%); } }\n@media (max-width: 640px) { .sm-scope .staggered-menu-panel { width: 100%; left: 0; right: 0; } .sm-scope .staggered-menu-wrapper[data-open] .sm-logo-img { filter: invert(100%); } }\n      `}</style>\n    </div>\n  );\n};\n\nexport default StaggeredMenu;\n"
		}
	],
	"registryDependencies": [],
	"dependencies": [
		"gsap@^3.13.0"
	]
}