@mova-ui/react 0.1.0 → 0.2.0

package/registry/accordion-blind.json

@@ -0,0 +1,14 @@
+{
+  "id": "accordion-blind",
+  "file": "accordion-blind.tsx",
+  "content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\n// src/components/css-animations/Dock.tsx\nimport { useState, useRef } from \"react\";\nimport { Reorder, useMotionValue, useSpring, useTransform } from \"motion/react\";\nimport { jsx } from \"react/jsx-runtime\";\nvar SOLID_COLORS = [\n  \"#2563eb\",\n  // Blue 600\n  \"#3b82f6\",\n  // Blue 500\n  \"#60a5fa\",\n  // Blue 400\n  \"#1d4ed8\",\n  // Blue 700\n  \"#0284c7\",\n  // Sky 600\n  \"#4f46e5\",\n  // Indigo 600\n  \"#6366f1\"\n  // Indigo 500\n];\nfunction DockItem({\n  index,\n  color,\n  mouseX,\n  theme = \"dark\"\n}) {\n  const ref = useRef(null);\n  const distance = useTransform(mouseX, (val) => {\n    const bounds = ref.current?.getBoundingClientRect() ?? { x: 0, width: 0 };\n    return val - bounds.x - bounds.width / 2;\n  });\n  const sizeSync = useTransform(distance, [-80, 0, 80], [28, 44, 28]);\n  const size = useSpring(sizeSync, { mass: 0.1, stiffness: 220, damping: 16 });\n  return /* @__PURE__ */ jsx(\n    Reorder.Item,\n    {\n      value: color,\n      id: color,\n      className: \"rounded-lg cursor-grab active:cursor-grabbing origin-bottom shrink-0 select-none\",\n      style: { width: size, height: size },\n      children: /* @__PURE__ */ jsx(\n        \"div\",\n        {\n          ref,\n          className: `flex h-full w-full items-center justify-center rounded-[10px] p-0.5 shadow-sm transition-all duration-300 ${theme === \"dark\" ? \"border border-neutral-700/80 bg-neutral-800 hover:bg-neutral-700\" : \"border border-neutral-200 bg-white hover:bg-neutral-50 shadow-sm\"}`,\n          children: /* @__PURE__ */ jsx(\n            \"div\",\n            {\n              className: \"h-full w-full rounded-[8px] pointer-events-none transition-transform duration-200\",\n              style: { backgroundColor: color }\n            }\n          )\n        }\n      )\n    }\n  );\n}\nfunction Dock({ theme = \"dark\", className = \"\" }) {\n  const [items, setItems] = useState(SOLID_COLORS);\n  const mouseX = useMotionValue(Infinity);\n  return /* @__PURE__ */ jsx(\n    \"div\",\n    {\n      className: `box-content flex h-[32px] w-fit items-end gap-1 rounded-xl p-1.5 transition-all duration-300 ${theme === \"dark\" ? \"border border-neutral-800 bg-[#141414] shadow-md shadow-black/30\" : \"border border-neutral-200 bg-neutral-100 shadow-sm\"} ${className}`,\n      onMouseMove: (e) => mouseX.set(e.pageX),\n      onMouseLeave: () => mouseX.set(Infinity),\n      children: /* @__PURE__ */ jsx(\n        Reorder.Group,\n        {\n          axis: \"x\",\n          values: items,\n          onReorder: setItems,\n          className: \"flex h-full items-end gap-[5px]\",\n          children: items.map((color, idx) => /* @__PURE__ */ jsx(\n            DockItem,\n            {\n              index: idx,\n              color,\n              mouseX,\n              theme\n            },\n            color\n          ))\n        }\n      )\n    }\n  );\n}\n\n// src/components/css-animations/whimsical/KineticTensionCapsule.tsx\nimport { useState as useState3 } from \"react\";\n\n// src/hooks/useLoopFlg.ts\nimport { useState as useState2, useEffect } from \"react\";\nfunction useLoopFlg(enable = true, interval = 2e3) {\n  const [flag, setFlag] = useState2(0);\n  useEffect(() => {\n    if (!enable) return;\n    const timer = setInterval(() => {\n      setFlag((prev) => prev + 1);\n    }, interval);\n    return () => clearInterval(timer);\n  }, [enable, interval]);\n  return flag;\n}\n\n// src/components/css-animations/whimsical/KineticTensionCapsule.tsx\nimport { jsx as jsx2, jsxs } from \"react/jsx-runtime\";\nfunction KineticTensionCapsule({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 2800);\n  const [hoverKey, setHoverKey] = useState3(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx2(\"style\", { children: `\n        @keyframes tension_pill_stretch {\n          0%, 100% {\n            width: 52px;\n            height: 36px;\n            border-radius: 18px;\n            transform: scaleX(1) scaleY(1);\n          }\n          30% {\n            width: 108px;\n            height: 24px;\n            border-radius: 12px;\n            transform: scaleX(1.1) scaleY(0.85);\n          }\n          55% {\n            width: 38px;\n            height: 42px;\n            border-radius: 19px;\n            transform: scaleX(0.9) scaleY(1.12);\n          }\n          75% {\n            width: 56px;\n            height: 34px;\n            border-radius: 17px;\n            transform: scaleX(1.03) scaleY(0.97);\n          }\n          88% {\n            width: 52px;\n            height: 36px;\n            border-radius: 18px;\n            transform: scaleX(1) scaleY(1);\n          }\n        }\n        @keyframes inner_nodes_separate {\n          0%, 100% { gap: 6px; }\n          30% { gap: 54px; }\n          55% { gap: 2px; }\n          75% { gap: 10px; }\n          88% { gap: 6px; }\n        }\n        .tension-capsule-body {\n          animation: tension_pill_stretch 2.8s cubic-bezier(0.34, 1.56, 0.64, 1) infinite both;\n        }\n        .tension-inner-nodes {\n          animation: inner_nodes_separate 2.8s cubic-bezier(0.34, 1.56, 0.64, 1) infinite both;\n        }\n      ` }),\n        /* @__PURE__ */ jsx2(\"div\", { className: \"relative w-[130px] h-[75px] flex items-center justify-center\", children: /* @__PURE__ */ jsx2(\"div\", { className: \"tension-capsule-body bg-blue-600 shadow-md flex items-center justify-center px-2\", children: /* @__PURE__ */ jsxs(\"div\", { className: \"tension-inner-nodes flex items-center justify-center\", children: [\n          /* @__PURE__ */ jsx2(\"div\", { className: \"w-2.5 h-2.5 rounded-full bg-white shadow-sm shrink-0\" }),\n          /* @__PURE__ */ jsx2(\"div\", { className: \"w-2.5 h-2.5 rounded-full bg-blue-300 shadow-sm shrink-0\" })\n        ] }) }) }, activeKey)\n      ]\n    }\n  );\n}\n\n// src/components/css-animations/whimsical/MatrixGridLoader.tsx\nimport { jsx as jsx3, jsxs as jsxs2 } from \"react/jsx-runtime\";\nfunction MatrixGridLoader({\n  theme = \"dark\",\n  className = \"\"\n}) {\n  return /* @__PURE__ */ jsxs2(\"div\", { className: `relative flex items-center justify-center ${className}`, children: [\n    /* @__PURE__ */ jsx3(\"style\", { children: `\n        .blue-matrix-loader {\n          --color-blue-400: #60a5fa;\n          --color-blue-500: #3b82f6;\n          --color-blue-600: #2563eb;\n          --color-blue-700: #1d4ed8;\n          display: block;\n          justify-content: center;\n          align-items: center;\n          transform: rotate(0deg);\n        }\n\n        .blue-matrix-loader .form1,\n        .blue-matrix-loader .form2 {\n          display: flex;\n          justify-content: center;\n          align-items: center;\n        }\n\n        .blue-matrix-square {\n          width: 42px;\n          height: 42px;\n          margin: 3px;\n          background-color: ${theme === \"dark\" ? \"#262626\" : \"#e5e7eb\"};\n          border-radius: 8px;\n          animation: blue-matrix-blinking 0.8s ease-in-out infinite;\n          opacity: 0;\n        }\n\n        @keyframes blue-matrix-blinking {\n          0% {\n            opacity: 0.25;\n            background-color: var(--color-blue-700);\n          }\n          50% {\n            opacity: 0.55;\n            background-color: var(--color-blue-600);\n          }\n          75% {\n            opacity: 0.8;\n            background-color: var(--color-blue-500);\n          }\n          100% {\n            opacity: 1;\n            background-color: var(--color-blue-400);\n          }\n        }\n\n        .blue-matrix-loader .form1 .blue-matrix-square:nth-child(1) {\n          animation-delay: 0.2s;\n        }\n\n        .blue-matrix-loader .form1 .blue-matrix-square:nth-child(2) {\n          animation-delay: 0.4s;\n        }\n\n        .blue-matrix-loader .form2 .blue-matrix-square:nth-child(2) {\n          animation-delay: 0.6s;\n        }\n\n        .blue-matrix-loader .form2 .blue-matrix-square:nth-child(1) {\n          animation-delay: 0.8s;\n        }\n      ` }),\n    /* @__PURE__ */ jsxs2(\"div\", { className: \"blue-matrix-loader select-none\", children: [\n      /* @__PURE__ */ jsxs2(\"div\", { className: \"form1\", children: [\n        /* @__PURE__ */ jsx3(\"div\", { className: \"blue-matrix-square\" }),\n        /* @__PURE__ */ jsx3(\"div\", { className: \"blue-matrix-square\" })\n      ] }),\n      /* @__PURE__ */ jsxs2(\"div\", { className: \"form2\", children: [\n        /* @__PURE__ */ jsx3(\"div\", { className: \"blue-matrix-square\" }),\n        /* @__PURE__ */ jsx3(\"div\", { className: \"blue-matrix-square\" })\n      ] })\n    ] })\n  ] });\n}\n\n// src/components/css-animations/whimsical/AppleLoaders.tsx\nimport { jsx as jsx4, jsxs as jsxs3 } from \"react/jsx-runtime\";\nfunction AppleRadialSpinner({\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const bars = Array.from({ length: 8 });\n  return /* @__PURE__ */ jsxs3(\"div\", { className: `relative flex items-center justify-center ${className}`, children: [\n    /* @__PURE__ */ jsx4(\"style\", { children: `\n        @keyframes apple_bar_fade {\n          0% { opacity: 1; }\n          100% { opacity: 0.15; }\n        }\n        .apple-bar {\n          animation: apple_bar_fade 0.8s linear infinite;\n        }\n      ` }),\n    /* @__PURE__ */ jsx4(\"div\", { className: \"relative w-8 h-8 flex items-center justify-center\", children: bars.map((_, i) => /* @__PURE__ */ jsx4(\n      \"div\",\n      {\n        className: `apple-bar absolute top-0 left-1/2 -translate-x-1/2 w-[2.5px] h-[7px] rounded-full origin-[center_16px] ${theme === \"dark\" ? \"bg-[#f5f5f7]\" : \"bg-[#1d1d1f]\"}`,\n        style: {\n          transform: `translateX(-50%) rotate(${i * 45}deg)`,\n          animationDelay: `${i * 0.8 / 8 - 0.8}s`\n        }\n      },\n      i\n    )) })\n  ] });\n}\nfunction PulseOrbitDots({\n  theme = \"dark\",\n  className = \"\"\n}) {\n  return /* @__PURE__ */ jsxs3(\"div\", { className: `relative flex items-center justify-center ${className}`, children: [\n    /* @__PURE__ */ jsx4(\"style\", { children: `\n        @keyframes orbit_dot_pulse {\n          0%, 100% { transform: scale(0.6); opacity: 0.3; }\n          50% { transform: scale(1.15); opacity: 1; }\n        }\n        .orbit-dot-1 { animation: orbit_dot_pulse 1.2s ease-in-out 0s infinite both; }\n        .orbit-dot-2 { animation: orbit_dot_pulse 1.2s ease-in-out 0.2s infinite both; }\n        .orbit-dot-3 { animation: orbit_dot_pulse 1.2s ease-in-out 0.4s infinite both; }\n      ` }),\n    /* @__PURE__ */ jsxs3(\"div\", { className: \"flex items-center gap-2.5\", children: [\n      /* @__PURE__ */ jsx4(\"div\", { className: `w-3 h-3 rounded-full orbit-dot-1 ${theme === \"dark\" ? \"bg-[#0a84ff]\" : \"bg-[#0071e3]\"}` }),\n      /* @__PURE__ */ jsx4(\"div\", { className: `w-3 h-3 rounded-full orbit-dot-2 ${theme === \"dark\" ? \"bg-[#64d2ff]\" : \"bg-[#34aadc]\"}` }),\n      /* @__PURE__ */ jsx4(\"div\", { className: `w-3 h-3 rounded-full orbit-dot-3 ${theme === \"dark\" ? \"bg-[#0a84ff]\" : \"bg-[#0071e3]\"}` })\n    ] })\n  ] });\n}\n\n// src/components/css-animations/whimsical/ConceptTrios1.tsx\nimport { useState as useState4 } from \"react\";\nimport { jsx as jsx5, jsxs as jsxs4 } from \"react/jsx-runtime\";\nfunction BookmarkCornerPeel({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 3e3);\n  const [hoverKey, setHoverKey] = useState4(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs4(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx5(\"style\", { children: `\n        @keyframes corner_peel_fold {\n          0%, 100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }\n          40%, 75% { clip-path: polygon(0 0, 65% 0, 100% 35%, 100% 100%, 0 100%); }\n        }\n        @keyframes corner_triangle_peel {\n          0%, 100% { transform: translate(100%, -100%); opacity: 0; }\n          40%, 75% { transform: translate(0, 0); opacity: 1; }\n        }\n        .peel-card {\n          animation: corner_peel_fold 3s cubic-bezier(0.65, 0, 0.35, 1) infinite both;\n        }\n        .peel-triangle {\n          animation: corner_triangle_peel 3s cubic-bezier(0.65, 0, 0.35, 1) infinite both;\n        }\n      ` }),\n        /* @__PURE__ */ jsxs4(\"div\", { className: \"relative w-[110px] h-[75px] flex items-center justify-center\", children: [\n          /* @__PURE__ */ jsxs4(\n            \"div\",\n            {\n              className: `absolute inset-0 rounded-2xl peel-card border ${theme === \"dark\" ? \"bg-[#1c1c1e] border-[#2c2c2e]\" : \"bg-white border-[#d2d2d7]\"}`,\n              children: [\n                /* @__PURE__ */ jsx5(\"div\", { className: \"absolute top-4 left-3 w-12 h-2 rounded-full bg-blue-500\" }),\n                /* @__PURE__ */ jsx5(\"div\", { className: \"absolute top-8 left-3 w-8 h-2 rounded-full bg-blue-400/50\" })\n              ]\n            }\n          ),\n          /* @__PURE__ */ jsx5(\"div\", { className: \"absolute top-0 right-0 w-[38px] h-[38px] overflow-hidden pointer-events-none\", children: /* @__PURE__ */ jsx5(\"div\", { className: \"w-full h-full peel-triangle bg-blue-600 rounded-bl-xl shadow-md\" }) })\n        ] }, activeKey)\n      ]\n    }\n  );\n}\nfunction ShutterSlide({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 3e3);\n  const [hoverKey, setHoverKey] = useState4(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs4(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx5(\"style\", { children: `\n        @keyframes shutter_left_open {\n          0%, 100% { transform: translateX(0); }\n          40%, 75% { transform: translateX(-95%); }\n        }\n        @keyframes shutter_right_open {\n          0%, 100% { transform: translateX(0); }\n          40%, 75% { transform: translateX(95%); }\n        }\n        .shutter-panel-left {\n          animation: shutter_left_open 3s cubic-bezier(0.65, 0, 0.35, 1) infinite both;\n        }\n        .shutter-panel-right {\n          animation: shutter_right_open 3s cubic-bezier(0.65, 0, 0.35, 1) infinite both;\n        }\n      ` }),\n        /* @__PURE__ */ jsxs4(\"div\", { className: \"relative w-[120px] h-[75px] rounded-2xl overflow-hidden border border-neutral-700 bg-blue-600 flex items-center justify-center\", children: [\n          /* @__PURE__ */ jsx5(\"span\", { className: \"text-xs font-bold text-white tracking-wider\", children: \"OPEN\" }),\n          /* @__PURE__ */ jsx5(\"div\", { className: `absolute top-0 left-0 w-1/2 h-full shutter-panel-left border-r ${theme === \"dark\" ? \"bg-[#1c1c1e] border-[#2c2c2e]\" : \"bg-[#e5e5ea] border-[#d1d1d6]\"}` }),\n          /* @__PURE__ */ jsx5(\"div\", { className: `absolute top-0 right-0 w-1/2 h-full shutter-panel-right border-l ${theme === \"dark\" ? \"bg-[#1c1c1e] border-[#2c2c2e]\" : \"bg-[#e5e5ea] border-[#d1d1d6]\"}` })\n        ] }, activeKey)\n      ]\n    }\n  );\n}\nfunction StickyNotePeel({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 3e3);\n  const [hoverKey, setHoverKey] = useState4(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs4(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx5(\"style\", { children: `\n        @keyframes note_peel_lift {\n          0% { transform: rotateX(0deg) translateY(0); opacity: 1; }\n          35% { transform: perspective(500px) rotateX(65deg) translateY(-12px); opacity: 1; }\n          50%, 100% { transform: perspective(500px) rotateX(90deg) translateY(-40px); opacity: 0; }\n        }\n        .note-sheet {\n          transform-origin: top center;\n          animation: note_peel_lift 3s cubic-bezier(0.4, 0, 0.2, 1) infinite both;\n        }\n      ` }),\n        /* @__PURE__ */ jsxs4(\"div\", { className: \"relative w-[75px] h-[75px] flex items-center justify-center\", children: [\n          /* @__PURE__ */ jsx5(\"div\", { className: \"absolute inset-0 rounded-xl bg-blue-600 shadow-sm\" }),\n          /* @__PURE__ */ jsx5(\"div\", { className: \"absolute inset-0 rounded-xl bg-blue-400 note-sheet shadow-md\" })\n        ] }, activeKey)\n      ]\n    }\n  );\n}\nfunction ReceiptTapePrint({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 3e3);\n  const [hoverKey, setHoverKey] = useState4(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs4(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx5(\"style\", { children: `\n        @keyframes receipt_print_step {\n          0% { height: 0px; opacity: 0; }\n          25% { height: 25px; opacity: 1; }\n          50% { height: 55px; opacity: 1; }\n          75% { height: 55px; opacity: 1; }\n          90%, 100% { height: 0px; opacity: 0; }\n        }\n        .receipt-paper {\n          animation: receipt_print_step 3s steps(4) infinite both;\n        }\n      ` }),\n        /* @__PURE__ */ jsxs4(\"div\", { className: \"relative w-[110px] h-[85px] flex flex-col items-center justify-start pt-2\", children: [\n          /* @__PURE__ */ jsx5(\"div\", { className: `w-[90px] h-[18px] rounded-full z-20 flex items-center justify-center border ${theme === \"dark\" ? \"bg-[#1c1c1e] border-[#2c2c2e]\" : \"bg-[#e5e5ea] border-[#d1d1d6]\"}`, children: /* @__PURE__ */ jsx5(\"div\", { className: \"w-[65px] h-[3px] rounded-full bg-neutral-600\" }) }),\n          /* @__PURE__ */ jsxs4(\"div\", { className: \"w-[60px] receipt-paper bg-blue-500 rounded-b-lg shadow-md -mt-1.5 flex flex-col gap-1 p-1\", children: [\n            /* @__PURE__ */ jsx5(\"div\", { className: \"w-full h-1 bg-blue-300/60 rounded-full\" }),\n            /* @__PURE__ */ jsx5(\"div\", { className: \"w-3/4 h-1 bg-blue-300/60 rounded-full\" }),\n            /* @__PURE__ */ jsx5(\"div\", { className: \"w-1/2 h-1 bg-blue-300/60 rounded-full\" })\n          ] })\n        ] }, activeKey)\n      ]\n    }\n  );\n}\n\n// src/components/css-animations/whimsical/ConceptTrios2.tsx\nimport { useState as useState5 } from \"react\";\nimport { jsx as jsx6, jsxs as jsxs5 } from \"react/jsx-runtime\";\nfunction StrokeWaveform({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 3e3);\n  const [hoverKey, setHoverKey] = useState5(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs5(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx6(\"style\", { children: `\n        @keyframes wave_line_draw {\n          0% { stroke-dashoffset: 500; }\n          50% { stroke-dashoffset: 0; }\n          80%, 100% { stroke-dashoffset: -500; }\n        }\n        .waveform-path {\n          stroke-dasharray: 500;\n          animation: wave_line_draw 3s ease-in-out infinite both;\n        }\n      ` }),\n        /* @__PURE__ */ jsx6(\"div\", { className: \"relative w-[130px] h-[60px] flex items-center justify-center\", children: /* @__PURE__ */ jsx6(\"svg\", { viewBox: \"0 0 160 80\", className: \"w-full h-full\", fill: \"none\", stroke: theme === \"dark\" ? \"#60a5fa\" : \"#3b82f6\", strokeWidth: \"5\", strokeLinecap: \"round\", strokeLinejoin: \"round\", children: /* @__PURE__ */ jsx6(\"polyline\", { className: \"waveform-path\", points: \"10,40 40,40 55,15 70,65 85,30 95,50 110,40 150,40\" }) }) }, activeKey)\n      ]\n    }\n  );\n}\nfunction PyramidBlockBuild({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 3e3);\n  const [hoverKey, setHoverKey] = useState5(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs5(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx6(\"style\", { children: `\n        @keyframes block_scale_pop {\n          0%, 15% { transform: scale(0); opacity: 0; }\n          30%, 75% { transform: scale(1); opacity: 1; }\n          90%, 100% { transform: scale(0); opacity: 0; }\n        }\n        .pyramid-base { animation: block_scale_pop 3s cubic-bezier(0.34, 1.56, 0.64, 1) 0s infinite both; }\n        .pyramid-mid  { animation: block_scale_pop 3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s infinite both; }\n        .pyramid-top  { animation: block_scale_pop 3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s infinite both; }\n      ` }),\n        /* @__PURE__ */ jsxs5(\"div\", { className: \"relative flex flex-col items-center gap-1\", children: [\n          /* @__PURE__ */ jsx6(\"div\", { className: \"w-[20px] h-[20px] rounded-md bg-blue-400 pyramid-top\" }),\n          /* @__PURE__ */ jsxs5(\"div\", { className: \"flex gap-1 pyramid-mid\", children: [\n            /* @__PURE__ */ jsx6(\"div\", { className: \"w-[20px] h-[20px] rounded-md bg-blue-500\" }),\n            /* @__PURE__ */ jsx6(\"div\", { className: \"w-[20px] h-[20px] rounded-md bg-blue-500\" })\n          ] }),\n          /* @__PURE__ */ jsxs5(\"div\", { className: \"flex gap-1 pyramid-base\", children: [\n            /* @__PURE__ */ jsx6(\"div\", { className: \"w-[20px] h-[20px] rounded-md bg-blue-700\" }),\n            /* @__PURE__ */ jsx6(\"div\", { className: \"w-[20px] h-[20px] rounded-md bg-blue-700\" }),\n            /* @__PURE__ */ jsx6(\"div\", { className: \"w-[20px] h-[20px] rounded-md bg-blue-700\" })\n          ] })\n        ] }, activeKey)\n      ]\n    }\n  );\n}\nfunction ScrollCanvasUnroll({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 3e3);\n  const [hoverKey, setHoverKey] = useState5(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs5(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx6(\"style\", { children: `\n        @keyframes scroll_unroll_width {\n          0%, 100% { width: 14px; }\n          40%, 75% { width: 95px; }\n        }\n        .scroll-body {\n          animation: scroll_unroll_width 3s cubic-bezier(0.65, 0, 0.35, 1) infinite both;\n        }\n      ` }),\n        /* @__PURE__ */ jsxs5(\"div\", { className: \"relative flex items-center justify-center h-[65px]\", children: [\n          /* @__PURE__ */ jsx6(\"div\", { className: \"w-[10px] h-[65px] rounded-full bg-neutral-500 z-10\" }),\n          /* @__PURE__ */ jsx6(\"div\", { className: \"h-[52px] scroll-body bg-blue-600 flex items-center justify-center overflow-hidden\", children: /* @__PURE__ */ jsx6(\"div\", { className: \"w-8 h-2 rounded-full bg-blue-400\" }) }),\n          /* @__PURE__ */ jsx6(\"div\", { className: \"w-[10px] h-[65px] rounded-full bg-neutral-500 z-10\" })\n        ] }, activeKey)\n      ]\n    }\n  );\n}\n\n// src/components/css-animations/whimsical/ConceptTrios3.tsx\nimport { useState as useState6 } from \"react\";\nimport { jsx as jsx7, jsxs as jsxs6 } from \"react/jsx-runtime\";\nfunction DropletSquish({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 2400);\n  const [hoverKey, setHoverKey] = useState6(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs6(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx7(\"style\", { children: `\n        @keyframes droplet_squish {\n          0%, 100% { transform: scale(1, 1); border-radius: 50%; }\n          35% { transform: scale(1.4, 0.6); border-radius: 40% 40% 50% 50%; }\n          60% { transform: scale(0.7, 1.35); border-radius: 50% 50% 30% 30%; }\n          80% { transform: scale(1.1, 0.9); }\n        }\n        .droplet-anim {\n          animation: droplet_squish 2.4s ease-in-out infinite both;\n        }\n      ` }),\n        /* @__PURE__ */ jsx7(\"div\", { className: \"relative flex items-center justify-center\", children: /* @__PURE__ */ jsx7(\"div\", { className: \"w-[48px] h-[48px] droplet-anim bg-blue-500 shadow-md\" }) }, activeKey)\n      ]\n    }\n  );\n}\nfunction SegmentedLinkStretch({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 2400);\n  const [hoverKey, setHoverKey] = useState6(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs6(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx7(\"style\", { children: `\n        @keyframes link_gap_stretch {\n          0%, 100% { gap: 4px; }\n          40%, 75% { gap: 18px; }\n        }\n        .segmented-link {\n          animation: link_gap_stretch 2.4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite both;\n        }\n      ` }),\n        /* @__PURE__ */ jsxs6(\"div\", { className: \"relative flex items-center justify-center segmented-link\", children: [\n          /* @__PURE__ */ jsx7(\"div\", { className: \"w-5 h-8 rounded-full bg-blue-400\" }),\n          /* @__PURE__ */ jsx7(\"div\", { className: \"w-5 h-8 rounded-full bg-blue-500\" }),\n          /* @__PURE__ */ jsx7(\"div\", { className: \"w-5 h-8 rounded-full bg-blue-600\" })\n        ] }, activeKey)\n      ]\n    }\n  );\n}\nfunction RotatingLouvers({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 3e3);\n  const [hoverKey, setHoverKey] = useState6(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs6(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx7(\"style\", { children: `\n        @keyframes louver_rotate {\n          0%, 100% { transform: perspective(400px) rotateX(0deg); }\n          40%, 75% { transform: perspective(400px) rotateX(75deg); }\n        }\n        .louver-slat {\n          animation: louver_rotate 3s ease-in-out infinite both;\n        }\n      ` }),\n        /* @__PURE__ */ jsx7(\"div\", { className: \"relative flex flex-col gap-2\", children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsx7(\n          \"div\",\n          {\n            className: \"w-[90px] h-[10px] rounded-sm bg-blue-500 louver-slat shadow-sm\",\n            style: { animationDelay: `${i * 0.08}s` }\n          },\n          i\n        )) }, activeKey)\n      ]\n    }\n  );\n}\nfunction SlinkyCoil({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 2400);\n  const [hoverKey, setHoverKey] = useState6(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs6(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx7(\"style\", { children: `\n        @keyframes slinky_expand {\n          0%, 100% { transform: scaleY(0.4); }\n          45%, 70% { transform: scaleY(1.3); }\n        }\n        .slinky-stack {\n          transform-origin: center bottom;\n          animation: slinky_expand 2.4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite both;\n        }\n      ` }),\n        /* @__PURE__ */ jsxs6(\"div\", { className: \"relative flex flex-col items-center gap-1.5 slinky-stack\", children: [\n          /* @__PURE__ */ jsx7(\"div\", { className: \"w-12 h-2 rounded-full bg-blue-300\" }),\n          /* @__PURE__ */ jsx7(\"div\", { className: \"w-12 h-2 rounded-full bg-blue-400\" }),\n          /* @__PURE__ */ jsx7(\"div\", { className: \"w-12 h-2 rounded-full bg-blue-500\" }),\n          /* @__PURE__ */ jsx7(\"div\", { className: \"w-12 h-2 rounded-full bg-blue-600\" }),\n          /* @__PURE__ */ jsx7(\"div\", { className: \"w-12 h-2 rounded-full bg-blue-700\" })\n        ] }, activeKey)\n      ]\n    }\n  );\n}\nfunction SquashStretchSphere({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 2200);\n  const [hoverKey, setHoverKey] = useState6(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs6(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx7(\"style\", { children: `\n        @keyframes sphere_squash_bounce {\n          0% { transform: translateY(-50px) scale(0.85, 1.25); }\n          40% { transform: translateY(0) scale(1.4, 0.6); }\n          55% { transform: translateY(-15px) scale(0.9, 1.15); }\n          70% { transform: translateY(0) scale(1.15, 0.85); }\n          85%, 100% { transform: translateY(-50px) scale(1, 1); }\n        }\n        .squash-sphere {\n          transform-origin: center bottom;\n          animation: sphere_squash_bounce 2.2s cubic-bezier(0.25, 1, 0.5, 1) infinite both;\n        }\n      ` }),\n        /* @__PURE__ */ jsxs6(\"div\", { className: \"relative flex flex-col items-center\", children: [\n          /* @__PURE__ */ jsx7(\"div\", { className: \"w-9 h-9 rounded-full bg-blue-500 squash-sphere shadow-md\" }),\n          /* @__PURE__ */ jsx7(\"div\", { className: \"w-14 h-1 rounded-full bg-neutral-700 mt-2\" })\n        ] }, activeKey)\n      ]\n    }\n  );\n}\nfunction CardDeckCascade({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 3e3);\n  const [hoverKey, setHoverKey] = useState6(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs6(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx7(\"style\", { children: `\n        @keyframes card_fan_spread {\n          0%, 100% { transform: rotate(0deg) translateX(0); }\n          40%, 75% { transform: rotate(var(--rot)) translateX(var(--tx)); }\n        }\n        .fan-card {\n          transform-origin: bottom center;\n          animation: card_fan_spread 3s cubic-bezier(0.34, 1.56, 0.64, 1) infinite both;\n        }\n      ` }),\n        /* @__PURE__ */ jsxs6(\"div\", { className: \"relative w-[110px] h-[75px] flex items-center justify-center\", children: [\n          /* @__PURE__ */ jsx7(\"div\", { className: \"absolute w-[42px] h-[58px] rounded-xl bg-blue-700 border border-neutral-600 fan-card\", style: { \"--rot\": \"-22deg\", \"--tx\": \"-24px\" } }),\n          /* @__PURE__ */ jsx7(\"div\", { className: \"absolute w-[42px] h-[58px] rounded-xl bg-blue-600 border border-neutral-500 fan-card\", style: { \"--rot\": \"0deg\", \"--tx\": \"0px\" } }),\n          /* @__PURE__ */ jsx7(\"div\", { className: \"absolute w-[42px] h-[58px] rounded-xl bg-blue-500 border border-neutral-400 fan-card\", style: { \"--rot\": \"22deg\", \"--tx\": \"24px\" } })\n        ] }, activeKey)\n      ]\n    }\n  );\n}\nfunction GearToothStep({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 3e3);\n  const [hoverKey, setHoverKey] = useState6(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs6(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx7(\"style\", { children: `\n        @keyframes gear_cw { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\n        @keyframes gear_ccw { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } }\n        .gear-1 { animation: gear_cw 4s linear infinite; }\n        .gear-2 { animation: gear_ccw 4s linear infinite; }\n      ` }),\n        /* @__PURE__ */ jsxs6(\"div\", { className: \"relative flex items-center gap-1\", children: [\n          /* @__PURE__ */ jsx7(\"div\", { className: \"w-10 h-10 rounded-full border-4 border-dashed border-blue-400 gear-1 flex items-center justify-center\", children: /* @__PURE__ */ jsx7(\"div\", { className: \"w-3 h-3 rounded-full bg-blue-400\" }) }),\n          /* @__PURE__ */ jsx7(\"div\", { className: \"w-10 h-10 rounded-full border-4 border-dashed border-blue-600 gear-2 flex items-center justify-center -ml-2 mt-4\", children: /* @__PURE__ */ jsx7(\"div\", { className: \"w-3 h-3 rounded-full bg-blue-600\" }) })\n        ] }, activeKey)\n      ]\n    }\n  );\n}\n\n// src/components/css-animations/whimsical/YuiPhysicsExperiments.tsx\nimport { useState as useState7 } from \"react\";\nimport { jsx as jsx8, jsxs as jsxs7 } from \"react/jsx-runtime\";\nfunction NeonSignDraw({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 2800);\n  const [hoverKey, setHoverKey] = useState7(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs7(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx8(\"style\", { children: `\n        @keyframes neon_draw_line {\n          0% { opacity: 0; stroke-dasharray: 0 240px; }\n          20%, 100% { opacity: 1; stroke-dasharray: 240px 240px; }\n        }\n        @keyframes neon_clear_line {\n          0%, 65% { stroke-dashoffset: 0; opacity: 1; }\n          100% { stroke-dashoffset: -240px; opacity: 0; }\n        }\n        .neon-stroke-path {\n          --sl: 240px;\n          stroke-dasharray: 240px 240px;\n          animation: \n            neon_draw_line 1.2s ease-in-out 0s both, \n            neon_clear_line 1.2s ease-in-out 1.4s forwards;\n        }\n      ` }),\n        /* @__PURE__ */ jsx8(\"div\", { className: \"relative w-[130px] h-[65px] flex items-center justify-center\", children: /* @__PURE__ */ jsx8(\"svg\", { viewBox: \"0 0 160 80\", className: \"w-full h-full\", fill: \"none\", stroke: theme === \"dark\" ? \"#0a84ff\" : \"#0071e3\", strokeWidth: \"5\", strokeLinecap: \"round\", strokeLinejoin: \"round\", children: /* @__PURE__ */ jsx8(\"polyline\", { className: \"neon-stroke-path\", points: \"15,40 50,40 70,18 90,62 110,40 145,40\" }) }) }, activeKey)\n      ]\n    }\n  );\n}\nfunction SuddenBrake({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 2800);\n  const [hoverKey, setHoverKey] = useState7(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs7(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx8(\"style\", { children: `\n        @keyframes brake_translate {\n          0% { transform: translateX(180px); }\n          100% { transform: translateX(0); }\n        }\n        @keyframes brake_rotate {\n          0% { transform: rotate(0deg); }\n          25% { transform: rotate(-18deg); }\n          55% { transform: rotate(4deg); }\n          75% { transform: rotate(-2deg); }\n          100% { transform: rotate(0deg); }\n        }\n        .brake-car-wrapper {\n          animation: brake_translate 0.75s cubic-bezier(0, 0.7, 0.6, 1) 0s both;\n        }\n        .brake-car-body {\n          transform-origin: left bottom;\n          animation: brake_rotate 0.9s ease-in-out 0.65s both;\n        }\n      ` }),\n        /* @__PURE__ */ jsxs7(\"div\", { className: \"relative w-[130px] h-[75px] flex items-center justify-center overflow-hidden\", children: [\n          /* @__PURE__ */ jsx8(\"div\", { className: \"brake-car-wrapper\", children: /* @__PURE__ */ jsxs7(\"div\", { className: \"brake-car-body flex flex-col items-center\", children: [\n            /* @__PURE__ */ jsx8(\"div\", { className: \"w-[52px] h-[34px] rounded-xl bg-blue-600 shadow-md flex items-center justify-center\", children: /* @__PURE__ */ jsx8(\"div\", { className: \"w-4 h-4 rounded-md bg-white/90\" }) }),\n            /* @__PURE__ */ jsxs7(\"div\", { className: \"flex justify-between w-[44px] -mt-1.5\", children: [\n              /* @__PURE__ */ jsx8(\"div\", { className: \"w-3.5 h-3.5 rounded-full bg-neutral-700 border-2 border-neutral-500\" }),\n              /* @__PURE__ */ jsx8(\"div\", { className: \"w-3.5 h-3.5 rounded-full bg-neutral-700 border-2 border-neutral-500\" })\n            ] })\n          ] }) }),\n          /* @__PURE__ */ jsx8(\"div\", { className: \"absolute bottom-3 left-3 right-3 h-[2px] rounded-full bg-neutral-700/60\" })\n        ] }, activeKey)\n      ]\n    }\n  );\n}\nfunction RollingTumble({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 2600);\n  const [hoverKey, setHoverKey] = useState7(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs7(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx8(\"style\", { children: `\n        @keyframes rolling_box_step {\n          0% { transform: translateX(-40px) rotate(0deg); }\n          30% { transform: translateX(-10px) rotate(90deg); }\n          60% { transform: translateX(20px) rotate(180deg); }\n          85%, 100% { transform: translateX(45px) rotate(270deg); }\n        }\n        .rolling-cube {\n          transform-origin: center center;\n          animation: rolling_box_step 2.2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite both;\n        }\n      ` }),\n        /* @__PURE__ */ jsxs7(\"div\", { className: \"relative w-[130px] h-[75px] flex items-center justify-center\", children: [\n          /* @__PURE__ */ jsx8(\"div\", { className: \"w-[34px] h-[34px] rounded-xl bg-blue-500 rolling-cube shadow-md flex items-center justify-center\", children: /* @__PURE__ */ jsx8(\"div\", { className: \"w-2.5 h-2.5 rounded-full bg-white/90\" }) }),\n          /* @__PURE__ */ jsx8(\"div\", { className: \"absolute bottom-4 left-4 right-4 h-[2px] rounded-full bg-neutral-700/60\" })\n        ] }, activeKey)\n      ]\n    }\n  );\n}\nfunction PageTurnCurl({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 3e3);\n  const [hoverKey, setHoverKey] = useState7(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs7(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx8(\"style\", { children: `\n        @keyframes page_curl_rise {\n          0%, 100% { transform: translateY(60px) rotateX(45deg); opacity: 0; border-radius: 4px 4px 28px 28px; }\n          40%, 75% { transform: translateY(0) rotateX(0deg); opacity: 1; border-radius: 16px; }\n        }\n        .page-sheet {\n          transform-origin: bottom center;\n          animation: page_curl_rise 3s cubic-bezier(0.78, 0, 0.2, 1) infinite both;\n        }\n      ` }),\n        /* @__PURE__ */ jsxs7(\"div\", { className: \"relative w-[100px] h-[75px] flex items-center justify-center\", children: [\n          /* @__PURE__ */ jsx8(\"div\", { className: `absolute w-[80px] h-[60px] rounded-2xl border ${theme === \"dark\" ? \"bg-[#1c1c1e] border-[#2c2c2e]\" : \"bg-white border-[#d2d2d7]\"}`, children: /* @__PURE__ */ jsx8(\"div\", { className: \"absolute bottom-2.5 left-3 w-8 h-1.5 rounded-full bg-neutral-600\" }) }),\n          /* @__PURE__ */ jsxs7(\"div\", { className: \"absolute w-[80px] h-[60px] page-sheet bg-blue-600 shadow-lg flex flex-col items-center justify-center gap-1.5 p-2\", children: [\n            /* @__PURE__ */ jsx8(\"div\", { className: \"w-10 h-2 rounded-full bg-white/90\" }),\n            /* @__PURE__ */ jsx8(\"div\", { className: \"w-6 h-1.5 rounded-full bg-white/60\" })\n          ] })\n        ] }, activeKey)\n      ]\n    }\n  );\n}\nfunction ShutterStepBlocks({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 2800);\n  const [hoverKey, setHoverKey] = useState7(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs7(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx8(\"style\", { children: `\n        @keyframes shutter_step_slice {\n          0%, 100% { transform: scaleX(0); }\n          40%, 75% { transform: scaleX(1); }\n        }\n        .shutter-slice {\n          transform-origin: left center;\n          animation: shutter_step_slice 2.8s cubic-bezier(0.65, 0, 0.35, 1) infinite both;\n        }\n      ` }),\n        /* @__PURE__ */ jsx8(\"div\", { className: \"relative w-[100px] h-[65px] flex flex-col justify-between py-1\", children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsx8(\n          \"div\",\n          {\n            className: `h-[11px] rounded-md shutter-slice ${i % 2 === 0 ? \"bg-blue-600\" : \"bg-blue-400\"}`,\n            style: { animationDelay: `${i * 0.08}s` }\n          },\n          i\n        )) }, activeKey)\n      ]\n    }\n  );\n}\nfunction InertiaSkidStop({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 2800);\n  const [hoverKey, setHoverKey] = useState7(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs7(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx8(\"style\", { children: `\n        @keyframes inertia_slide {\n          0% { transform: translateX(-80px) skewX(20deg); }\n          50% { transform: translateX(10px) skewX(-15deg); }\n          75% { transform: translateX(-4px) skewX(5deg); }\n          100% { transform: translateX(0) skewX(0deg); }\n        }\n        .inertia-block {\n          animation: inertia_slide 2.8s cubic-bezier(0.25, 1, 0.5, 1) infinite both;\n        }\n      ` }),\n        /* @__PURE__ */ jsx8(\"div\", { className: \"relative w-[130px] h-[75px] flex items-center justify-center\", children: /* @__PURE__ */ jsx8(\"div\", { className: \"w-[50px] h-[32px] rounded-xl bg-blue-500 inertia-block shadow-md flex items-center justify-center\", children: /* @__PURE__ */ jsx8(\"div\", { className: \"w-8 h-1.5 rounded-full bg-white\" }) }) }, activeKey)\n      ]\n    }\n  );\n}\n\n// src/components/css-animations/whimsical/RedesignedPhysicsTrios.tsx\nimport { useState as useState8 } from \"react\";\nimport { jsx as jsx9, jsxs as jsxs8 } from \"react/jsx-runtime\";\nfunction CardStackPeel({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 3e3);\n  const [hoverKey, setHoverKey] = useState8(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs8(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx9(\"style\", { children: `\n        @keyframes card_peel_drop {\n          0%, 100% { transform: translateY(0) rotateX(0deg); opacity: 1; }\n          40%, 75% { transform: perspective(400px) translateY(24px) rotateX(25deg); opacity: 0.9; }\n        }\n        .card-top-sheet {\n          transform-origin: top center;\n          animation: card_peel_drop 3s cubic-bezier(0.34, 1.56, 0.64, 1) infinite both;\n        }\n      ` }),\n        /* @__PURE__ */ jsxs8(\"div\", { className: \"relative w-[110px] h-[75px] flex items-center justify-center\", children: [\n          /* @__PURE__ */ jsx9(\"div\", { className: `absolute w-[100px] h-[65px] rounded-2xl border ${theme === \"dark\" ? \"bg-[#1c1c1e] border-[#2c2c2e]\" : \"bg-white border-[#d2d2d7]\"}`, children: /* @__PURE__ */ jsx9(\"div\", { className: \"absolute top-3 left-3 w-10 h-1.5 rounded-full bg-blue-500\" }) }),\n          /* @__PURE__ */ jsx9(\"div\", { className: \"absolute w-[100px] h-[65px] rounded-2xl card-top-sheet bg-blue-600 shadow-md flex items-center justify-center\", children: /* @__PURE__ */ jsx9(\"div\", { className: \"w-12 h-2 rounded-full bg-white/90\" }) })\n        ] }, activeKey)\n      ]\n    }\n  );\n}\nfunction ElasticTagSnap({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 3e3);\n  const [hoverKey, setHoverKey] = useState8(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs8(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx9(\"style\", { children: `\n        @keyframes tag_bungee_snap {\n          0%, 100% { transform: translateY(0) scaleY(1); }\n          30% { transform: translateY(28px) scaleY(1.2); }\n          50% { transform: translateY(-8px) scaleY(0.9); }\n          70% { transform: translateY(4px) scaleY(1.05); }\n          85% { transform: translateY(0) scaleY(1); }\n        }\n        .bungee-tag {\n          transform-origin: top center;\n          animation: tag_bungee_snap 3s cubic-bezier(0.34, 1.56, 0.64, 1) infinite both;\n        }\n      ` }),\n        /* @__PURE__ */ jsx9(\"div\", { className: \"relative w-[110px] h-[85px] flex items-start justify-center pt-1\", children: /* @__PURE__ */ jsxs8(\"div\", { className: \"bungee-tag flex flex-col items-center\", children: [\n          /* @__PURE__ */ jsx9(\"div\", { className: \"w-[3px] h-[28px] rounded-full bg-neutral-500\" }),\n          /* @__PURE__ */ jsx9(\"div\", { className: \"w-[48px] h-[40px] rounded-xl bg-blue-600 shadow-md flex items-center justify-center -mt-1\", children: /* @__PURE__ */ jsx9(\"div\", { className: \"w-5 h-5 rounded-full border-2 border-white\" }) })\n        ] }) }, activeKey)\n      ]\n    }\n  );\n}\nfunction SplitGateReveal({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 3e3);\n  const [hoverKey, setHoverKey] = useState8(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs8(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx9(\"style\", { children: `\n        @keyframes gate_left_split {\n          0%, 100% { transform: translateY(0); }\n          40%, 75% { transform: translateY(-75%); }\n        }\n        @keyframes gate_right_split {\n          0%, 100% { transform: translateY(0); }\n          40%, 75% { transform: translateY(75%); }\n        }\n        .gate-panel-top    { animation: gate_left_split 3s cubic-bezier(0.65, 0, 0.35, 1) infinite both; }\n        .gate-panel-bottom { animation: gate_right_split 3s cubic-bezier(0.65, 0, 0.35, 1) infinite both; }\n      ` }),\n        /* @__PURE__ */ jsxs8(\"div\", { className: \"relative w-[110px] h-[75px] rounded-2xl overflow-hidden border border-neutral-700 bg-blue-600 flex items-center justify-center\", children: [\n          /* @__PURE__ */ jsx9(\"span\", { className: \"text-xs font-mono font-bold text-white tracking-widest\", children: \"MOVA\" }),\n          /* @__PURE__ */ jsx9(\"div\", { className: `absolute top-0 left-0 w-full h-1/2 gate-panel-top border-b ${theme === \"dark\" ? \"bg-[#1c1c1e] border-[#2c2c2e]\" : \"bg-[#e5e5ea] border-[#d1d1d6]\"}` }),\n          /* @__PURE__ */ jsx9(\"div\", { className: `absolute bottom-0 left-0 w-full h-1/2 gate-panel-bottom border-t ${theme === \"dark\" ? \"bg-[#1c1c1e] border-[#2c2c2e]\" : \"bg-[#e5e5ea] border-[#d1d1d6]\"}` })\n        ] }, activeKey)\n      ]\n    }\n  );\n}\nfunction OrigamiEnvelopeUnfold({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 3e3);\n  const [hoverKey, setHoverKey] = useState8(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs8(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx9(\"style\", { children: `\n        @keyframes envelope_flap_flip {\n          0%, 100% { transform: perspective(400px) rotateX(0deg); }\n          40%, 75% { transform: perspective(400px) rotateX(180deg); }\n        }\n        .envelope-flap {\n          transform-origin: top center;\n          animation: envelope_flap_flip 3s cubic-bezier(0.65, 0, 0.35, 1) infinite both;\n        }\n      ` }),\n        /* @__PURE__ */ jsxs8(\"div\", { className: \"relative w-[100px] h-[65px] rounded-xl bg-blue-700 border border-neutral-600 flex items-center justify-center\", children: [\n          /* @__PURE__ */ jsx9(\"div\", { className: \"w-[80px] h-[45px] rounded-lg bg-blue-400 flex items-center justify-center\", children: /* @__PURE__ */ jsx9(\"div\", { className: \"w-8 h-1.5 rounded-full bg-white\" }) }),\n          /* @__PURE__ */ jsx9(\"div\", { className: \"absolute top-0 left-0 w-full h-full envelope-flap pointer-events-none\", style: { clipPath: \"polygon(0 0, 50% 50%, 100% 0)\" }, children: /* @__PURE__ */ jsx9(\"div\", { className: \"w-full h-full bg-blue-500\" }) })\n        ] }, activeKey)\n      ]\n    }\n  );\n}\nfunction SmartCardDispenser({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 3e3);\n  const [hoverKey, setHoverKey] = useState8(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs8(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx9(\"style\", { children: `\n        @keyframes card_eject_push {\n          0%, 100% { transform: translateY(0); }\n          40%, 75% { transform: translateY(-38px); }\n        }\n        .dispenser-card {\n          animation: card_eject_push 3s cubic-bezier(0.34, 1.56, 0.64, 1) infinite both;\n        }\n      ` }),\n        /* @__PURE__ */ jsxs8(\"div\", { className: \"relative w-[110px] h-[85px] flex flex-col items-center justify-end pb-1\", children: [\n          /* @__PURE__ */ jsxs8(\"div\", { className: \"w-[70px] h-[45px] rounded-xl bg-blue-500 dispenser-card shadow-md flex items-center justify-between px-3\", children: [\n            /* @__PURE__ */ jsx9(\"div\", { className: \"w-3 h-3 rounded-full bg-white/80\" }),\n            /* @__PURE__ */ jsx9(\"div\", { className: \"w-8 h-1.5 rounded-full bg-white/60\" })\n          ] }),\n          /* @__PURE__ */ jsx9(\"div\", { className: `w-[95px] h-[34px] -mt-4 rounded-xl z-20 flex items-center justify-center border ${theme === \"dark\" ? \"bg-[#1c1c1e] border-[#2c2c2e]\" : \"bg-[#e5e5ea] border-[#d1d1d6]\"}`, children: /* @__PURE__ */ jsx9(\"div\", { className: \"w-[75px] h-[3px] rounded-full bg-neutral-600\" }) })\n        ] }, activeKey)\n      ]\n    }\n  );\n}\nfunction CircuitTraceDraw({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 3e3);\n  const [hoverKey, setHoverKey] = useState8(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs8(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx9(\"style\", { children: `\n        @keyframes circuit_trace_anim {\n          0% { stroke-dashoffset: 400; }\n          50% { stroke-dashoffset: 0; }\n          80%, 100% { stroke-dashoffset: -400; }\n        }\n        .circuit-line {\n          stroke-dasharray: 400;\n          animation: circuit_trace_anim 3s ease-in-out infinite both;\n        }\n      ` }),\n        /* @__PURE__ */ jsx9(\"div\", { className: \"relative w-[110px] h-[65px] flex items-center justify-center\", children: /* @__PURE__ */ jsxs8(\"svg\", { viewBox: \"0 0 140 70\", className: \"w-full h-full\", fill: \"none\", stroke: theme === \"dark\" ? \"#3b82f6\" : \"#0071e3\", strokeWidth: \"4\", strokeLinecap: \"round\", strokeLinejoin: \"round\", children: [\n          /* @__PURE__ */ jsx9(\"polyline\", { className: \"circuit-line\", points: \"10,35 40,35 60,15 90,15 110,50 130,50\" }),\n          /* @__PURE__ */ jsx9(\"circle\", { cx: \"10\", cy: \"35\", r: \"4\", fill: theme === \"dark\" ? \"#3b82f6\" : \"#0071e3\" }),\n          /* @__PURE__ */ jsx9(\"circle\", { cx: \"130\", cy: \"50\", r: \"4\", fill: theme === \"dark\" ? \"#3b82f6\" : \"#0071e3\" })\n        ] }) }, activeKey)\n      ]\n    }\n  );\n}\nfunction HexagonLatticeDraw({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 3e3);\n  const [hoverKey, setHoverKey] = useState8(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs8(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx9(\"style\", { children: `\n        @keyframes hex_draw_loop {\n          0% { stroke-dashoffset: 300; }\n          50% { stroke-dashoffset: 0; }\n          80%, 100% { stroke-dashoffset: -300; }\n        }\n        .hex-path {\n          stroke-dasharray: 300;\n          animation: hex_draw_loop 3s ease-in-out infinite both;\n        }\n      ` }),\n        /* @__PURE__ */ jsx9(\"div\", { className: \"relative w-[75px] h-[75px] flex items-center justify-center\", children: /* @__PURE__ */ jsx9(\"svg\", { viewBox: \"0 0 100 100\", className: \"w-full h-full\", fill: \"none\", stroke: theme === \"dark\" ? \"#60a5fa\" : \"#2563eb\", strokeWidth: \"5\", strokeLinecap: \"round\", strokeLinejoin: \"round\", children: /* @__PURE__ */ jsx9(\"polygon\", { className: \"hex-path\", points: \"50,10 85,30 85,70 50,90 15,70 15,30\" }) }) }, activeKey)\n      ]\n    }\n  );\n}\nfunction PrismBlockStack({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 3e3);\n  const [hoverKey, setHoverKey] = useState8(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs8(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx9(\"style\", { children: `\n        @keyframes prism_drop {\n          0% { transform: translateY(-60px) rotate(15deg); opacity: 0; }\n          30% { transform: translateY(0) rotate(0deg); opacity: 1; }\n          75% { opacity: 1; transform: translateY(0); }\n          100% { transform: translateY(60px); opacity: 0; }\n        }\n        .prism-1 { animation: prism_drop 3s cubic-bezier(0.34, 1.56, 0.64, 1) 0s infinite both; }\n        .prism-2 { animation: prism_drop 3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s infinite both; }\n        .prism-3 { animation: prism_drop 3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s infinite both; }\n      ` }),\n        /* @__PURE__ */ jsxs8(\"div\", { className: \"relative flex flex-col items-center gap-1.5\", children: [\n          /* @__PURE__ */ jsx9(\"div\", { className: \"w-10 h-4 rounded-md bg-blue-400 prism-3 shadow-sm\" }),\n          /* @__PURE__ */ jsx9(\"div\", { className: \"w-14 h-4 rounded-md bg-blue-500 prism-2 shadow-sm\" }),\n          /* @__PURE__ */ jsx9(\"div\", { className: \"w-18 h-4 rounded-md bg-blue-700 prism-1 shadow-sm\" })\n        ] }, activeKey)\n      ]\n    }\n  );\n}\nfunction ModularTileSnap({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 3e3);\n  const [hoverKey, setHoverKey] = useState8(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs8(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx9(\"style\", { children: `\n        @keyframes tile_snap_anim {\n          0%, 100% { transform: scale(0.6) rotate(15deg); opacity: 0; }\n          35%, 75% { transform: scale(1) rotate(0deg); opacity: 1; }\n        }\n        .snap-tile-1 { animation: tile_snap_anim 3s cubic-bezier(0.34, 1.56, 0.64, 1) 0s infinite both; }\n        .snap-tile-2 { animation: tile_snap_anim 3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s infinite both; }\n      ` }),\n        /* @__PURE__ */ jsxs8(\"div\", { className: \"relative flex items-center gap-1.5\", children: [\n          /* @__PURE__ */ jsx9(\"div\", { className: \"w-9 h-9 rounded-xl bg-blue-500 snap-tile-1 flex items-center justify-center shadow-md\", children: /* @__PURE__ */ jsx9(\"div\", { className: \"w-3 h-3 rounded-full bg-white/90\" }) }),\n          /* @__PURE__ */ jsx9(\"div\", { className: \"w-9 h-9 rounded-xl bg-blue-700 snap-tile-2 flex items-center justify-center shadow-md\", children: /* @__PURE__ */ jsx9(\"div\", { className: \"w-3 h-3 rounded-md bg-white/90\" }) })\n        ] }, activeKey)\n      ]\n    }\n  );\n}\nfunction RollerBlindDrop({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 3e3);\n  const [hoverKey, setHoverKey] = useState8(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs8(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx9(\"style\", { children: `\n        @keyframes blind_roll_drop {\n          0%, 100% { height: 8px; }\n          40%, 75% { height: 55px; }\n        }\n        .roller-cloth {\n          animation: blind_roll_drop 3s cubic-bezier(0.65, 0, 0.35, 1) infinite both;\n        }\n      ` }),\n        /* @__PURE__ */ jsxs8(\"div\", { className: \"relative w-[100px] flex flex-col items-center\", children: [\n          /* @__PURE__ */ jsx9(\"div\", { className: \"w-full h-2.5 rounded-full bg-neutral-600 z-10\" }),\n          /* @__PURE__ */ jsx9(\"div\", { className: \"w-[88px] roller-cloth bg-blue-600 rounded-b-xl flex items-end justify-center pb-1 shadow-md\", children: /* @__PURE__ */ jsx9(\"div\", { className: \"w-10 h-1 rounded-full bg-blue-400\" }) })\n        ] }, activeKey)\n      ]\n    }\n  );\n}\nfunction RibbonBannerSlide({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 3e3);\n  const [hoverKey, setHoverKey] = useState8(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs8(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx9(\"style\", { children: `\n        @keyframes banner_slide_expand {\n          0%, 100% { width: 12px; }\n          40%, 75% { width: 95px; }\n        }\n        .ribbon-banner {\n          animation: banner_slide_expand 3s cubic-bezier(0.34, 1.56, 0.64, 1) infinite both;\n        }\n      ` }),\n        /* @__PURE__ */ jsx9(\"div\", { className: \"relative flex items-center justify-center h-[45px]\", children: /* @__PURE__ */ jsxs8(\"div\", { className: \"h-[36px] ribbon-banner bg-blue-500 rounded-xl flex items-center justify-between px-3 overflow-hidden shadow-md\", children: [\n          /* @__PURE__ */ jsx9(\"div\", { className: \"w-2 h-2 rounded-full bg-white\" }),\n          /* @__PURE__ */ jsx9(\"div\", { className: \"w-10 h-1.5 rounded-full bg-white/80\" })\n        ] }) }, activeKey)\n      ]\n    }\n  );\n}\nfunction GeometricIrisShutter({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 3e3);\n  const [hoverKey, setHoverKey] = useState8(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs8(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx9(\"style\", { children: `\n        @keyframes iris_blade_open {\n          0%, 100% { transform: rotate(0deg) scale(0.3); }\n          40%, 75% { transform: rotate(60deg) scale(1); }\n        }\n        .iris-blade {\n          animation: iris_blade_open 3s cubic-bezier(0.65, 0, 0.35, 1) infinite both;\n        }\n      ` }),\n        /* @__PURE__ */ jsx9(\"div\", { className: \"relative w-[75px] h-[75px] rounded-2xl border-2 border-neutral-700 flex items-center justify-center overflow-hidden\", children: /* @__PURE__ */ jsx9(\"div\", { className: \"w-[50px] h-[50px] rounded-xl bg-blue-600 iris-blade flex items-center justify-center\", children: /* @__PURE__ */ jsx9(\"div\", { className: \"w-4 h-4 rounded-full bg-blue-300\" }) }) }, activeKey)\n      ]\n    }\n  );\n}\nfunction PendulumBubbleLevel({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 3e3);\n  const [hoverKey, setHoverKey] = useState8(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs8(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx9(\"style\", { children: `\n        @keyframes bubble_level_shift {\n          0%, 100% { transform: translateX(0); }\n          25% { transform: translateX(-24px); }\n          50% { transform: translateX(24px); }\n          75% { transform: translateX(-8px); }\n        }\n        .bubble-core {\n          animation: bubble_level_shift 3s ease-in-out infinite both;\n        }\n      ` }),\n        /* @__PURE__ */ jsxs8(\"div\", { className: \"relative w-[110px] h-[28px] rounded-full border-2 border-neutral-700 bg-neutral-900 flex items-center justify-center px-1\", children: [\n          /* @__PURE__ */ jsx9(\"div\", { className: \"absolute w-[2px] h-full bg-neutral-600 left-1/2 -translate-x-1/2\" }),\n          /* @__PURE__ */ jsx9(\"div\", { className: \"w-5 h-5 rounded-full bg-blue-400 bubble-core shadow-md\" })\n        ] }, activeKey)\n      ]\n    }\n  );\n}\nfunction KineticTickingMetronome({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 2e3);\n  const [hoverKey, setHoverKey] = useState8(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs8(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx9(\"style\", { children: `\n        @keyframes metronome_tick {\n          0%, 100% { transform: rotate(-35deg); }\n          50% { transform: rotate(35deg); }\n        }\n        .metronome-arm {\n          transform-origin: bottom center;\n          animation: metronome_tick 1s ease-in-out infinite alternate both;\n        }\n      ` }),\n        /* @__PURE__ */ jsxs8(\"div\", { className: \"relative w-[80px] h-[75px] flex flex-col items-center justify-end pb-1\", children: [\n          /* @__PURE__ */ jsx9(\"div\", { className: \"w-[3px] h-[52px] bg-neutral-500 metronome-arm flex flex-col items-center\", children: /* @__PURE__ */ jsx9(\"div\", { className: \"w-4 h-4 rounded-md bg-blue-500 shadow-md -mt-1\" }) }),\n          /* @__PURE__ */ jsx9(\"div\", { className: \"w-12 h-2 rounded-full bg-neutral-700 mt-1\" })\n        ] }, activeKey)\n      ]\n    }\n  );\n}\nfunction NestedOrbitalGimbal({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 3e3);\n  const [hoverKey, setHoverKey] = useState8(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs8(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx9(\"style\", { children: `\n        @keyframes gimbal_spin {\n          0% { transform: rotate(0deg); }\n          100% { transform: rotate(360deg); }\n        }\n        .gimbal-outer { animation: gimbal_spin 4s linear infinite; }\n        .gimbal-inner { animation: gimbal_spin 2s linear infinite reverse; }\n      ` }),\n        /* @__PURE__ */ jsxs8(\"div\", { className: \"relative w-[70px] h-[70px] flex items-center justify-center\", children: [\n          /* @__PURE__ */ jsx9(\"div\", { className: \"absolute inset-0 rounded-2xl border-2 border-blue-600 gimbal-outer\" }),\n          /* @__PURE__ */ jsx9(\"div\", { className: \"absolute w-[44px] h-[44px] rounded-full border-2 border-blue-400 gimbal-inner\" }),\n          /* @__PURE__ */ jsx9(\"div\", { className: \"w-3 h-3 rounded-full bg-white shadow-sm\" })\n        ] }, activeKey)\n      ]\n    }\n  );\n}\nfunction DualMagnetDipole({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 2400);\n  const [hoverKey, setHoverKey] = useState8(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs8(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx9(\"style\", { children: `\n        @keyframes dipole_snap {\n          0%, 100% { transform: scale(1); gap: 28px; }\n          40%, 70% { transform: scale(1.1); gap: 4px; }\n        }\n        .dipole-cluster {\n          animation: dipole_snap 2.4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite both;\n        }\n      ` }),\n        /* @__PURE__ */ jsxs8(\"div\", { className: \"relative flex items-center justify-center dipole-cluster\", children: [\n          /* @__PURE__ */ jsx9(\"div\", { className: \"w-7 h-7 rounded-xl bg-blue-500 shadow-md flex items-center justify-center font-bold text-xs text-white\", children: \"N\" }),\n          /* @__PURE__ */ jsx9(\"div\", { className: \"w-7 h-7 rounded-xl bg-blue-700 shadow-md flex items-center justify-center font-bold text-xs text-white\", children: \"S\" })\n        ] }, activeKey)\n      ]\n    }\n  );\n}\nfunction CompassNeedleDeflect({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 2600);\n  const [hoverKey, setHoverKey] = useState8(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs8(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx9(\"style\", { children: `\n        @keyframes compass_swing {\n          0%, 100% { transform: rotate(0deg); }\n          30% { transform: rotate(65deg); }\n          60% { transform: rotate(-45deg); }\n          80% { transform: rotate(15deg); }\n        }\n        .compass-dial {\n          animation: compass_swing 2.6s ease-in-out infinite both;\n        }\n      ` }),\n        /* @__PURE__ */ jsx9(\"div\", { className: \"relative w-[70px] h-[70px] rounded-full border-2 border-neutral-700 flex items-center justify-center\", children: /* @__PURE__ */ jsxs8(\"div\", { className: \"w-[6px] h-[48px] compass-dial flex flex-col items-center justify-between\", children: [\n          /* @__PURE__ */ jsx9(\"div\", { className: \"w-[6px] h-[22px] bg-blue-500 rounded-t-full\" }),\n          /* @__PURE__ */ jsx9(\"div\", { className: \"w-[6px] h-[22px] bg-neutral-500 rounded-b-full\" })\n        ] }) }, activeKey)\n      ]\n    }\n  );\n}\n\n// src/components/css-animations/yui-components/RedesignedUiTrios.tsx\nimport { useState as useState9 } from \"react\";\nimport { motion, AnimatePresence } from \"motion/react\";\nimport {\n  Bookmark,\n  Check,\n  ChevronUp,\n  ChevronDown,\n  Layers,\n  LayoutGrid,\n  Info\n} from \"lucide-react\";\nimport { jsx as jsx10, jsxs as jsxs9 } from \"react/jsx-runtime\";\nfunction SegmentedArcMeter({ theme = \"dark\" }) {\n  const [level, setLevel] = useState9(3);\n  const segments = [1, 2, 3, 4];\n  return /* @__PURE__ */ jsxs9(\n    \"div\",\n    {\n      onClick: () => setLevel(level % 4 + 1),\n      className: \"flex items-center gap-1.5 cursor-pointer p-2 select-none\",\n      children: [\n        segments.map((s) => /* @__PURE__ */ jsx10(\n          \"div\",\n          {\n            className: `w-3 h-8 rounded-full transition-all duration-300 ${s <= level ? \"bg-blue-600 scale-y-100\" : theme === \"dark\" ? \"bg-neutral-800 scale-y-75\" : \"bg-neutral-200 scale-y-75\"}`\n          },\n          s\n        )),\n        /* @__PURE__ */ jsxs9(\"span\", { className: \"text-xs font-mono font-bold ml-1.5\", children: [\n          level * 25,\n          \"%\"\n        ] })\n      ]\n    }\n  );\n}\nfunction SegmentedStepperDots({ theme = \"dark\" }) {\n  const [active, setActive] = useState9(1);\n  const total = 4;\n  return /* @__PURE__ */ jsx10(\"div\", { className: `flex items-center gap-2 p-2 rounded-full border ${theme === \"dark\" ? \"bg-[#181818] border-neutral-700\" : \"bg-neutral-100 border-neutral-200\"}`, children: Array.from({ length: total }).map((_, i) => {\n    const isActive = active === i;\n    return /* @__PURE__ */ jsx10(\n      \"button\",\n      {\n        onClick: () => setActive(i),\n        className: \"relative cursor-pointer border-0 bg-transparent p-0 flex items-center justify-center\",\n        children: /* @__PURE__ */ jsx10(\n          motion.div,\n          {\n            animate: { width: isActive ? 24 : 8, backgroundColor: isActive ? \"#0071e3\" : theme === \"dark\" ? \"#555\" : \"#ccc\" },\n            transition: { type: \"spring\", bounce: 0.25, duration: 0.35 },\n            className: \"h-2 rounded-full\"\n          }\n        )\n      },\n      i\n    );\n  }) });\n}\nfunction CardGlancePreview({ theme = \"dark\" }) {\n  const [open, setOpen] = useState9(false);\n  return /* @__PURE__ */ jsxs9(\"div\", { className: \"relative flex flex-col items-center justify-center\", children: [\n    /* @__PURE__ */ jsx10(AnimatePresence, { children: open && /* @__PURE__ */ jsxs9(\n      motion.div,\n      {\n        initial: { opacity: 0, y: 6, scale: 0.92 },\n        animate: { opacity: 1, y: -8, scale: 1 },\n        exit: { opacity: 0, y: 4, scale: 0.92 },\n        className: `absolute -top-12 px-3 py-2 rounded-xl border text-[11px] shadow-xl flex items-center gap-2 whitespace-nowrap z-20 pointer-events-none ${theme === \"dark\" ? \"bg-[#1c1c1e] border-neutral-700 text-neutral-200\" : \"bg-white border-neutral-200 text-neutral-900\"}`,\n        children: [\n          /* @__PURE__ */ jsx10(\"div\", { className: \"w-2 h-2 rounded-full bg-blue-500\" }),\n          /* @__PURE__ */ jsx10(\"span\", { children: \"Interactive Glance Preview\" })\n        ]\n      }\n    ) }),\n    /* @__PURE__ */ jsx10(\n      motion.button,\n      {\n        onMouseEnter: () => setOpen(true),\n        onMouseLeave: () => setOpen(false),\n        whileHover: { scale: 1.08 },\n        whileTap: { scale: 0.92 },\n        className: `w-10 h-10 rounded-2xl border flex items-center justify-center cursor-pointer shadow-sm ${theme === \"dark\" ? \"bg-[#1e1e1e] border-neutral-700 text-blue-400\" : \"bg-white border-neutral-200 text-blue-600\"}`,\n        children: /* @__PURE__ */ jsx10(Info, { className: \"w-5 h-5\" })\n      }\n    )\n  ] });\n}\nfunction VerticalWheelCounter({ theme = \"dark\" }) {\n  const [count, setCount] = useState9(5);\n  return /* @__PURE__ */ jsxs9(\"div\", { className: `flex items-center gap-2 p-1 px-2.5 rounded-2xl border ${theme === \"dark\" ? \"bg-[#181818] border-neutral-700\" : \"bg-white border-neutral-200\"}`, children: [\n    /* @__PURE__ */ jsx10(\"div\", { className: \"w-6 h-7 overflow-hidden relative flex items-center justify-center font-mono font-bold text-sm\", children: /* @__PURE__ */ jsx10(\n      motion.span,\n      {\n        initial: { y: 15, opacity: 0 },\n        animate: { y: 0, opacity: 1 },\n        exit: { y: -15, opacity: 0 },\n        transition: { duration: 0.15 },\n        className: \"absolute\",\n        children: count\n      },\n      count\n    ) }),\n    /* @__PURE__ */ jsxs9(\"div\", { className: \"flex flex-col gap-0.5\", children: [\n      /* @__PURE__ */ jsx10(\n        \"button\",\n        {\n          onClick: () => setCount(count + 1),\n          className: \"p-0.5 hover:bg-neutral-500/20 rounded cursor-pointer border-0 bg-transparent text-inherit\",\n          children: /* @__PURE__ */ jsx10(ChevronUp, { className: \"w-3.5 h-3.5\" })\n        }\n      ),\n      /* @__PURE__ */ jsx10(\n        \"button\",\n        {\n          onClick: () => setCount(Math.max(1, count - 1)),\n          className: \"p-0.5 hover:bg-neutral-500/20 rounded cursor-pointer border-0 bg-transparent text-inherit\",\n          children: /* @__PURE__ */ jsx10(ChevronDown, { className: \"w-3.5 h-3.5\" })\n        }\n      )\n    ] })\n  ] });\n}\nfunction PerspectiveLayoutSwitcher({ theme = \"dark\" }) {\n  const [layout, setLayout] = useState9(\"grid\");\n  return /* @__PURE__ */ jsxs9(\n    motion.button,\n    {\n      whileTap: { scale: 0.94 },\n      onClick: () => setLayout(layout === \"grid\" ? \"stack\" : \"grid\"),\n      className: `flex items-center gap-2 px-4 py-2 rounded-2xl border text-xs font-semibold cursor-pointer transition-colors ${theme === \"dark\" ? \"bg-[#181818] border-neutral-700 text-white\" : \"bg-white border-neutral-200 text-neutral-900\"}`,\n      children: [\n        /* @__PURE__ */ jsx10(\n          motion.div,\n          {\n            initial: { rotate: -45, scale: 0.8 },\n            animate: { rotate: 0, scale: 1 },\n            transition: { duration: 0.2 },\n            children: layout === \"grid\" ? /* @__PURE__ */ jsx10(LayoutGrid, { className: \"w-4 h-4 text-blue-500\" }) : /* @__PURE__ */ jsx10(Layers, { className: \"w-4 h-4 text-blue-500\" })\n          },\n          layout\n        ),\n        /* @__PURE__ */ jsx10(\"span\", { children: layout === \"grid\" ? \"Grid View\" : \"Stack View\" })\n      ]\n    }\n  );\n}\nfunction BookmarkSavePill({ theme = \"dark\" }) {\n  const [saved, setSaved] = useState9(false);\n  return /* @__PURE__ */ jsxs9(\n    motion.button,\n    {\n      whileHover: { scale: 1.05 },\n      whileTap: { scale: 0.94 },\n      onClick: () => setSaved(!saved),\n      className: `flex items-center gap-2 px-4 py-2 rounded-full border text-xs font-semibold cursor-pointer transition-all ${saved ? \"bg-blue-600 border-blue-500 text-white shadow-md\" : theme === \"dark\" ? \"bg-[#1e1e1e] border-neutral-700 text-white\" : \"bg-white border-neutral-200 text-neutral-900\"}`,\n      children: [\n        saved ? /* @__PURE__ */ jsx10(Check, { className: \"w-3.5 h-3.5 text-white\" }) : /* @__PURE__ */ jsx10(Bookmark, { className: \"w-3.5 h-3.5 text-blue-400\" }),\n        /* @__PURE__ */ jsx10(\"span\", { children: saved ? \"Saved\" : \"Save Item\" })\n      ]\n    }\n  );\n}\n\n// src/components/css-animations/whimsical/WhimsicalVariations.tsx\nimport { useState as useState10 } from \"react\";\nimport { jsx as jsx11, jsxs as jsxs10 } from \"react/jsx-runtime\";\nfunction BlindPull({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 2800);\n  const [hoverKey, setHoverKey] = useState10(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs10(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx11(\"style\", { children: `\n        @keyframes blind_slat_expand {\n          0% { transform: translateY(0) scaleY(0.2); opacity: 0.4; }\n          45% { transform: translateY(var(--ty)) scaleY(1); opacity: 1; }\n          55% { transform: translateY(calc(var(--ty) * 0.95)) scaleY(1); opacity: 1; }\n          80% { transform: translateY(var(--ty)) scaleY(1); opacity: 1; }\n          100% { transform: translateY(0) scaleY(0.2); opacity: 0.4; }\n        }\n        @keyframes blind_cord_pull {\n          0%, 100% { height: 20px; }\n          45%, 80% { height: 95px; }\n        }\n        .blind-cord {\n          animation: blind_cord_pull 2.8s cubic-bezier(0.65, 0, 0.35, 1) infinite both;\n        }\n        .blind-slat {\n          animation: blind_slat_expand 2.8s cubic-bezier(0.65, 0, 0.35, 1) infinite both;\n        }\n      ` }),\n        /* @__PURE__ */ jsx11(\"div\", { className: \"absolute inset-0 flex items-center justify-center\", children: /* @__PURE__ */ jsxs10(\"div\", { className: \"relative w-[110px] h-[100px] flex flex-col items-center\", children: [\n          /* @__PURE__ */ jsx11(\"div\", { className: `w-[110px] h-[8px] rounded-full z-20 ${theme === \"dark\" ? \"bg-neutral-600\" : \"bg-neutral-400\"}` }),\n          [1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ jsx11(\n            \"div\",\n            {\n              className: `absolute top-0 w-[100px] h-[7px] rounded-full blind-slat z-10 ${theme === \"dark\" ? \"bg-blue-500\" : \"bg-blue-600\"}`,\n              style: {\n                \"--ty\": `${i * 17}px`,\n                animationDelay: `${i * 0.04}s`\n              }\n            },\n            i\n          )),\n          /* @__PURE__ */ jsx11(\n            \"div\",\n            {\n              className: `absolute top-[4px] right-[10px] w-[2px] blind-cord ${theme === \"dark\" ? \"bg-neutral-600\" : \"bg-neutral-300\"}`,\n              children: /* @__PURE__ */ jsx11(\n                \"div\",\n                {\n                  className: `absolute -bottom-1.5 -left-1 w-2.5 h-2.5 rounded-full ${theme === \"dark\" ? \"bg-blue-400\" : \"bg-blue-600\"}`\n                }\n              )\n            }\n          )\n        ] }, activeKey) })\n      ]\n    }\n  );\n}\nfunction GelatinWobble({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 2200);\n  const [hoverKey, setHoverKey] = useState10(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs10(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx11(\"style\", { children: `\n        @keyframes jelly_drop_wobble {\n          0% { transform: translateY(-70px) scale(0.8, 1.25); opacity: 0; }\n          30% { transform: translateY(0) scale(1.4, 0.6); opacity: 1; }\n          45% { transform: translateY(-16px) scale(0.85, 1.2); }\n          60% { transform: translateY(0) scale(1.15, 0.85); }\n          75% { transform: translateY(-4px) scale(0.95, 1.05); }\n          88% { transform: translateY(0) scale(1.02, 0.98); }\n          95%, 100% { transform: translateY(0) scale(1, 1); }\n        }\n        .jelly-box {\n          transform-origin: center bottom;\n          animation: jelly_drop_wobble 2.2s cubic-bezier(0.25, 1, 0.5, 1) infinite both;\n        }\n      ` }),\n        /* @__PURE__ */ jsx11(\"div\", { className: \"absolute inset-0 flex items-center justify-center\", children: /* @__PURE__ */ jsxs10(\"div\", { className: \"relative flex flex-col items-center\", children: [\n          /* @__PURE__ */ jsx11(\n            \"div\",\n            {\n              className: `w-[48px] h-[48px] rounded-2xl jelly-box ${theme === \"dark\" ? \"bg-blue-500\" : \"bg-blue-600\"}`\n            }\n          ),\n          /* @__PURE__ */ jsx11(\"div\", { className: `w-[72px] h-[5px] rounded-full mt-2 ${theme === \"dark\" ? \"bg-neutral-700\" : \"bg-neutral-300\"}` })\n        ] }, activeKey) })\n      ]\n    }\n  );\n}\nfunction DominoChain({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 3e3);\n  const [hoverKey, setHoverKey] = useState10(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs10(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx11(\"style\", { children: `\n        @keyframes domino_tip {\n          0%, 15% { transform: rotate(0deg); }\n          35%, 80% { transform: rotate(72deg); }\n          95%, 100% { transform: rotate(0deg); }\n        }\n        .domino-tile {\n          transform-origin: bottom right;\n          animation: domino_tip 3s cubic-bezier(0.6, -0.28, 0.735, 0.045) infinite both;\n        }\n      ` }),\n        /* @__PURE__ */ jsx11(\"div\", { className: \"absolute inset-0 flex items-center justify-center\", children: /* @__PURE__ */ jsxs10(\"div\", { className: \"relative w-[130px] h-[60px] flex items-end justify-between px-2\", children: [\n          [0, 1, 2, 3, 4].map((i) => /* @__PURE__ */ jsx11(\n            \"div\",\n            {\n              className: `w-[10px] h-[36px] rounded-[3px] domino-tile ${theme === \"dark\" ? i % 2 === 0 ? \"bg-blue-400\" : \"bg-neutral-300\" : i % 2 === 0 ? \"bg-blue-600\" : \"bg-neutral-700\"}`,\n              style: { animationDelay: `${i * 0.12}s` }\n            },\n            i\n          )),\n          /* @__PURE__ */ jsx11(\"div\", { className: `absolute bottom-0 left-0 right-0 h-[3px] rounded-full ${theme === \"dark\" ? \"bg-neutral-700\" : \"bg-neutral-300\"}` })\n        ] }, activeKey) })\n      ]\n    }\n  );\n}\nfunction MagneticDisks({\n  trigger = \"hover\",\n  loop = true,\n  theme = \"dark\",\n  className = \"\"\n}) {\n  const loopFlg = useLoopFlg(true, 2400);\n  const [hoverKey, setHoverKey] = useState10(0);\n  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;\n  return /* @__PURE__ */ jsxs10(\n    \"div\",\n    {\n      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,\n      onMouseEnter: trigger === \"hover\" ? () => setHoverKey((k) => k + 1) : void 0,\n      onClick: trigger === \"click\" ? () => setHoverKey((k) => k + 1) : void 0,\n      children: [\n        /* @__PURE__ */ jsx11(\"style\", { children: `\n        @keyframes disk_left_snap {\n          0%, 100% { transform: translateX(-35px) scale(1, 1); }\n          35% { transform: translateX(-20px) scale(1.2, 0.85); }\n          50% { transform: translateX(0) scale(0.85, 1.25); }\n          65% { transform: translateX(0) scale(1, 1); }\n          80% { transform: translateX(-35px) scale(0.9, 1.1); }\n        }\n        @keyframes disk_right_snap {\n          0%, 100% { transform: translateX(35px) scale(1, 1); }\n          35% { transform: translateX(20px) scale(1.2, 0.85); }\n          50% { transform: translateX(0) scale(0.85, 1.25); }\n          65% { transform: translateX(0) scale(1, 1); }\n          80% { transform: translateX(35px) scale(0.9, 1.1); }\n        }\n        .disk-left {\n          animation: disk_left_snap 2.4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite both;\n        }\n        .disk-right {\n          animation: disk_right_snap 2.4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite both;\n        }\n      ` }),\n        /* @__PURE__ */ jsx11(\"div\", { className: \"absolute inset-0 flex items-center justify-center\", children: /* @__PURE__ */ jsxs10(\"div\", { className: \"relative w-[120px] h-[50px] flex items-center justify-center\", children: [\n          /* @__PURE__ */ jsx11(\n            \"div\",\n            {\n              className: `absolute w-[28px] h-[28px] rounded-full disk-left ${theme === \"dark\" ? \"bg-blue-400\" : \"bg-blue-600\"}`\n            }\n          ),\n          /* @__PURE__ */ jsx11(\n            \"div\",\n            {\n              className: `absolute w-[28px] h-[28px] rounded-full disk-right ${theme === \"dark\" ? \"bg-blue-600\" : \"bg-blue-800\"}`\n            }\n          )\n        ] }, activeKey) })\n      ]\n    }\n  );\n}\n\n// src/components/css-animations/yui-components/UiKitTrios.tsx\nimport { useState as useState11 } from \"react\";\nimport { motion as motion2, AnimatePresence as AnimatePresence2 } from \"motion/react\";\nimport { ArrowRight, ChevronRight } from \"lucide-react\";\nimport { jsx as jsx12, jsxs as jsxs11 } from \"react/jsx-runtime\";\nfunction FilterTagPill({ theme = \"dark\" }) {\n  const [selected, setSelected] = useState11(0);\n  const tags = [\"All\", \"Featured\", \"New\"];\n  return /* @__PURE__ */ jsx12(\"div\", { className: `flex items-center gap-1 p-1 rounded-2xl border ${theme === \"dark\" ? \"bg-[#181818] border-neutral-700\" : \"bg-neutral-100 border-neutral-200\"}`, children: tags.map((tag, idx) => /* @__PURE__ */ jsxs11(\n    \"button\",\n    {\n      onClick: () => setSelected(idx),\n      className: \"relative px-3 py-1.5 rounded-xl text-xs font-semibold cursor-pointer border-0 bg-transparent\",\n      children: [\n        selected === idx && /* @__PURE__ */ jsx12(\n          motion2.div,\n          {\n            layoutId: \"filter-tag-pill\",\n            transition: { type: \"spring\", bounce: 0.2, duration: 0.35 },\n            className: `absolute inset-0 rounded-xl ${theme === \"dark\" ? \"bg-blue-600\" : \"bg-blue-600 text-white\"}`\n          }\n        ),\n        /* @__PURE__ */ jsx12(\"span\", { className: `relative z-10 ${selected === idx ? \"text-white font-bold\" : theme === \"dark\" ? \"text-neutral-400\" : \"text-neutral-600\"}`, children: tag })\n      ]\n    },\n    tag\n  )) });\n}\nfunction SubmenuFlyout({ theme = \"dark\" }) {\n  const [open, setOpen] = useState11(false);\n  return /* @__PURE__ */ jsxs11(\"div\", { className: \"relative flex flex-col items-center\", children: [\n    /* @__PURE__ */ jsxs11(\n      motion2.button,\n      {\n        whileTap: { scale: 0.95 },\n        onClick: () => setOpen(!open),\n        className: `flex items-center gap-2 px-4 py-2 rounded-2xl border text-xs font-semibold cursor-pointer ${theme === \"dark\" ? \"bg-[#181818] border-neutral-700 text-white\" : \"bg-white border-neutral-200 text-neutral-900\"}`,\n        children: [\n          /* @__PURE__ */ jsx12(\"span\", { children: \"View Details\" }),\n          /* @__PURE__ */ jsx12(ChevronRight, { className: \"w-3.5 h-3.5 text-neutral-400\" })\n        ]\n      }\n    ),\n    /* @__PURE__ */ jsx12(AnimatePresence2, { children: open && /* @__PURE__ */ jsx12(\n      motion2.div,\n      {\n        initial: { opacity: 0, x: -6 },\n        animate: { opacity: 1, x: 4 },\n        exit: { opacity: 0, x: -6 },\n        className: `absolute left-full top-0 ml-1 p-1 rounded-2xl border shadow-xl flex flex-col gap-0.5 z-30 ${theme === \"dark\" ? \"bg-[#181818] border-neutral-700 text-white\" : \"bg-white border-neutral-200 text-neutral-900\"}`,\n        children: /* @__PURE__ */ jsx12(\"div\", { className: \"px-3 py-1.5 text-[11px] rounded-lg hover:bg-blue-600 hover:text-white cursor-pointer whitespace-nowrap\", children: \"Expanded Panel\" })\n      }\n    ) })\n  ] });\n}\nfunction MagneticIconButton({ theme = \"dark\" }) {\n  return /* @__PURE__ */ jsxs11(\n    motion2.button,\n    {\n      whileHover: { scale: 1.05, x: 3 },\n      whileTap: { scale: 0.95 },\n      className: `flex items-center gap-2 px-5 py-2.5 rounded-full border text-xs font-semibold cursor-pointer ${theme === \"dark\" ? \"bg-[#1e1e1e] border-neutral-700 text-white\" : \"bg-white border-neutral-200 text-neutral-900\"}`,\n      children: [\n        /* @__PURE__ */ jsx12(\"span\", { children: \"Explore Docs\" }),\n        /* @__PURE__ */ jsx12(ArrowRight, { className: \"w-3.5 h-3.5 text-blue-400\" })\n      ]\n    }\n  );\n}\nfunction MorphActionPill({ theme = \"dark\" }) {\n  const [expanded, setExpanded] = useState11(false);\n  return /* @__PURE__ */ jsxs11(\n    motion2.div,\n    {\n      layout: true,\n      onMouseEnter: () => setExpanded(true),\n      onMouseLeave: () => setExpanded(false),\n      className: `flex items-center gap-2 px-4 py-2 rounded-full border text-xs font-semibold cursor-pointer ${theme === \"dark\" ? \"bg-blue-600 border-blue-500 text-white\" : \"bg-blue-600 border-blue-500 text-white\"}`,\n      children: [\n        /* @__PURE__ */ jsx12(\"span\", { children: \"Action\" }),\n        /* @__PURE__ */ jsx12(AnimatePresence2, { children: expanded && /* @__PURE__ */ jsx12(\n          motion2.span,\n          {\n            initial: { opacity: 0, width: 0 },\n            animate: { opacity: 1, width: \"auto\" },\n            exit: { opacity: 0, width: 0 },\n            className: \"text-[11px] font-normal whitespace-nowrap overflow-hidden\",\n            children: \"\\u2192 Launch\"\n          }\n        ) })\n      ]\n    }\n  );\n}\nfunction SegmentedStepBar({ theme = \"dark\" }) {\n  const [level, setLevel] = useState11(2);\n  return /* @__PURE__ */ jsx12(\"div\", { className: \"flex items-center gap-1.5 cursor-pointer\", onClick: () => setLevel(level % 3 + 1), children: [1, 2, 3].map((i) => /* @__PURE__ */ jsx12(\n    \"div\",\n    {\n      className: `w-6 h-2 rounded-full transition-colors ${i <= level ? \"bg-blue-600\" : theme === \"dark\" ? \"bg-neutral-700\" : \"bg-neutral-300\"}`\n    },\n    i\n  )) });\n}\n\n// src/components/css-animations/yui-components/YuiUiKit1.tsx\nimport { useState as useState12 } from \"react\";\nimport { motion as motion3, AnimatePresence as AnimatePresence3 } from \"motion/react\";\nimport {\n  ChevronDown as ChevronDown2,\n  ExternalLink,\n  Plus,\n  Minus,\n  Sun,\n  Moon,\n  X,\n  ChevronLeft,\n  ChevronRight as ChevronRight2\n} from \"lucide-react\";\nimport { jsx as jsx13, jsxs as jsxs12 } from \"react/jsx-runtime\";\nfunction CategorySelect({ theme = \"dark\" }) {\n  const [isOpen, setIsOpen] = useState12(false);\n  const [selected, setSelected] = useState12(\"Category 1\");\n  const options = [\"Category 1\", \"Category 2\", \"Category 3\"];\n  return /* @__PURE__ */ jsxs12(\"div\", { className: \"relative flex flex-col items-center select-none\", children: [\n    /* @__PURE__ */ jsxs12(\n      motion3.button,\n      {\n        whileTap: { scale: 0.96 },\n        onClick: () => setIsOpen(!isOpen),\n        className: `flex items-center justify-between gap-3 px-4 py-2.5 rounded-2xl border text-xs font-semibold shadow-sm transition-all cursor-pointer ${theme === \"dark\" ? \"bg-[#181818] border-white/10 text-white hover:bg-neutral-800\" : \"bg-white border-neutral-200 text-neutral-900 hover:bg-neutral-50\"}`,\n        children: [\n          /* @__PURE__ */ jsx13(\"span\", { children: selected }),\n          /* @__PURE__ */ jsx13(motion3.div, { animate: { rotate: isOpen ? 180 : 0 }, transition: { duration: 0.2 }, children: /* @__PURE__ */ jsx13(ChevronDown2, { className: \"w-3.5 h-3.5 text-neutral-400\" }) })\n        ]\n      }\n    ),\n    /* @__PURE__ */ jsx13(AnimatePresence3, { children: isOpen && /* @__PURE__ */ jsx13(\n      motion3.div,\n      {\n        initial: { opacity: 0, y: -6, scale: 0.95 },\n        animate: { opacity: 1, y: 4, scale: 1 },\n        exit: { opacity: 0, y: -6, scale: 0.95 },\n        transition: { duration: 0.2, ease: [0.16, 1, 0.3, 1] },\n        className: `absolute top-full z-30 w-36 p-1 rounded-2xl border shadow-xl flex flex-col gap-0.5 ${theme === \"dark\" ? \"bg-[#181818] border-white/10\" : \"bg-white border-neutral-200\"}`,\n        children: options.map((opt) => /* @__PURE__ */ jsx13(\n          \"button\",\n          {\n            onClick: () => {\n              setSelected(opt);\n              setIsOpen(false);\n            },\n            className: `w-full text-left px-3 py-2 rounded-xl text-xs font-medium transition-colors cursor-pointer border-0 ${selected === opt ? theme === \"dark\" ? \"bg-white/10 text-white font-semibold\" : \"bg-neutral-100 text-black font-semibold\" : theme === \"dark\" ? \"text-neutral-400 hover:text-white hover:bg-white/5\" : \"text-neutral-600 hover:text-black hover:bg-neutral-50\"}`,\n            children: opt\n          },\n          opt\n        ))\n      }\n    ) })\n  ] });\n}\nfunction HoverLinkCard({ theme = \"dark\" }) {\n  const [isHovered, setIsHovered] = useState12(false);\n  return /* @__PURE__ */ jsxs12(\"div\", { className: \"relative flex flex-col items-center justify-center\", children: [\n    /* @__PURE__ */ jsx13(AnimatePresence3, { children: isHovered && /* @__PURE__ */ jsxs12(\n      motion3.div,\n      {\n        initial: { opacity: 0, y: 6, scale: 0.9 },\n        animate: { opacity: 1, y: -8, scale: 1 },\n        exit: { opacity: 0, y: 4, scale: 0.9 },\n        transition: { duration: 0.2 },\n        className: \"absolute -top-7 px-2.5 py-1 rounded-lg bg-neutral-900 border border-white/15 text-[10px] font-mono text-indigo-300 shadow-xl whitespace-nowrap z-20 pointer-events-none\",\n        children: [\n          \"https://mova-ui.com\",\n          /* @__PURE__ */ jsx13(\"div\", { className: \"absolute -bottom-1 left-1/2 -translate-x-1/2 w-2 h-2 bg-neutral-900 border-r border-b border-white/15 rotate-45\" })\n        ]\n      }\n    ) }),\n    /* @__PURE__ */ jsxs12(\n      motion3.a,\n      {\n        href: \"https://mova-ui.com\",\n        target: \"_blank\",\n        rel: \"noopener noreferrer\",\n        onMouseEnter: () => setIsHovered(true),\n        onMouseLeave: () => setIsHovered(false),\n        whileHover: { scale: 1.05, y: -2 },\n        whileTap: { scale: 0.96 },\n        className: `flex items-center gap-2 px-5 py-2.5 rounded-full border text-xs font-semibold shadow-md transition-shadow duration-200 no-underline cursor-pointer ${theme === \"dark\" ? \"bg-[#1e1e1e] border-white/10 text-white hover:shadow-indigo-500/10\" : \"bg-white border-neutral-200 text-neutral-900 hover:shadow-neutral-300/60\"}`,\n        children: [\n          /* @__PURE__ */ jsx13(\"span\", { children: \"Portfolio\" }),\n          /* @__PURE__ */ jsx13(ExternalLink, { className: \"w-3.5 h-3.5 text-neutral-400\" })\n        ]\n      }\n    )\n  ] });\n}\nfunction PlusMinusToggle({ theme = \"dark\" }) {\n  const [activeBtn, setActiveBtn] = useState12(\"plus\");\n  return /* @__PURE__ */ jsxs12(\"div\", { className: \"flex items-center gap-3\", children: [\n    /* @__PURE__ */ jsx13(\n      motion3.button,\n      {\n        whileTap: { scale: 0.88 },\n        onClick: () => setActiveBtn(\"plus\"),\n        className: `w-11 h-11 rounded-xl border flex items-center justify-center transition-all duration-200 cursor-pointer ${activeBtn === \"plus\" ? theme === \"dark\" ? \"bg-neutral-200 text-neutral-900 border-white shadow-md\" : \"bg-neutral-900 text-white border-neutral-900 shadow-md\" : theme === \"dark\" ? \"bg-neutral-900 text-neutral-400 border-white/10 hover:text-white\" : \"bg-white text-neutral-600 border-neutral-200 hover:text-black\"}`,\n        children: /* @__PURE__ */ jsx13(Plus, { className: \"w-5 h-5\" })\n      }\n    ),\n    /* @__PURE__ */ jsx13(\n      motion3.button,\n      {\n        whileTap: { scale: 0.88 },\n        onClick: () => setActiveBtn(\"minus\"),\n        className: `w-11 h-11 rounded-xl border flex items-center justify-center transition-all duration-200 cursor-pointer ${activeBtn === \"minus\" ? theme === \"dark\" ? \"bg-neutral-200 text-neutral-900 border-white shadow-md\" : \"bg-neutral-900 text-white border-neutral-900 shadow-md\" : theme === \"dark\" ? \"bg-neutral-900 text-neutral-400 border-white/10 hover:text-white\" : \"bg-white text-neutral-600 border-neutral-200 hover:text-black\"}`,\n        children: /* @__PURE__ */ jsx13(Minus, { className: \"w-5 h-5\" })\n      }\n    )\n  ] });\n}\nfunction LightDarkMorphToggle({ theme = \"dark\" }) {\n  const [isDark, setIsDark] = useState12(theme === \"dark\");\n  return /* @__PURE__ */ jsx13(\n    motion3.button,\n    {\n      whileTap: { scale: 0.9 },\n      onClick: () => setIsDark(!isDark),\n      className: `relative w-14 h-14 rounded-2xl border-2 flex items-center justify-center transition-colors duration-300 cursor-pointer shadow-md ${isDark ? \"bg-[#181818] border-white/15\" : \"bg-amber-50/80 border-amber-200\"}`,\n      children: /* @__PURE__ */ jsx13(\n        motion3.div,\n        {\n          animate: { rotate: isDark ? 180 : 0, scale: [0.85, 1.05, 1] },\n          transition: { type: \"spring\", stiffness: 200, damping: 12 },\n          className: \"flex items-center justify-center\",\n          children: isDark ? /* @__PURE__ */ jsx13(Moon, { className: \"w-6 h-6 text-indigo-300 drop-shadow-[0_0_8px_rgba(165,180,252,0.5)]\" }) : /* @__PURE__ */ jsx13(Sun, { className: \"w-6 h-6 text-amber-500 drop-shadow-[0_0_8px_rgba(245,158,11,0.5)]\" })\n        }\n      )\n    }\n  );\n}\nfunction ProgressStepper({ theme = \"dark\" }) {\n  const [step, setStep] = useState12(2);\n  const steps = [1, 2, 3];\n  return /* @__PURE__ */ jsxs12(\"div\", { className: \"flex flex-col items-center gap-3\", children: [\n    /* @__PURE__ */ jsxs12(\"div\", { className: \"relative flex items-center justify-between w-48\", children: [\n      /* @__PURE__ */ jsx13(\"div\", { className: `absolute top-1/2 left-0 right-0 h-1 -translate-y-1/2 rounded-full ${theme === \"dark\" ? \"bg-neutral-800\" : \"bg-neutral-200\"}` }),\n      /* @__PURE__ */ jsx13(\n        motion3.div,\n        {\n          animate: { width: `${(step - 1) / (steps.length - 1) * 100}%` },\n          transition: { duration: 0.4, ease: [0.16, 1, 0.3, 1] },\n          className: \"absolute top-1/2 left-0 h-1 -translate-y-1/2 rounded-full bg-indigo-500\"\n        }\n      ),\n      steps.map((s) => {\n        const isDone = s <= step;\n        const isCurrent = s === step;\n        return /* @__PURE__ */ jsx13(\n          motion3.button,\n          {\n            whileTap: { scale: 0.9 },\n            onClick: () => setStep(s),\n            animate: { scale: isCurrent ? 1.2 : 1 },\n            className: `relative z-10 w-7 h-7 rounded-full border-2 flex items-center justify-center text-[10px] font-bold transition-colors cursor-pointer ${isDone ? \"bg-indigo-500 border-indigo-400 text-white shadow-md\" : theme === \"dark\" ? \"bg-[#181818] border-neutral-700 text-neutral-500\" : \"bg-white border-neutral-300 text-neutral-400\"}`,\n            children: s\n          },\n          s\n        );\n      })\n    ] }),\n    /* @__PURE__ */ jsxs12(\"span\", { className: \"text-[11px] font-mono text-neutral-400\", children: [\n      \"STEP \",\n      step,\n      \" of 3\"\n    ] })\n  ] });\n}\nfunction MultiTabCloseBar({ theme = \"dark\" }) {\n  const [tabs, setTabs] = useState12([\"Tab 1\", \"Tab 2\"]);\n  const [activeTab, setActiveTab] = useState12(0);\n  const addTab = () => {\n    if (tabs.length < 4) {\n      setTabs([...tabs, `Tab ${tabs.length + 1}`]);\n      setActiveTab(tabs.length);\n    }\n  };\n  const removeTab = (index, e) => {\n    e.stopPropagation();\n    if (tabs.length > 1) {\n      const next = tabs.filter((_, i) => i !== index);\n      setTabs(next);\n      setActiveTab(Math.max(0, activeTab - 1));\n    }\n  };\n  return /* @__PURE__ */ jsxs12(\"div\", { className: `flex items-center gap-1.5 p-1 rounded-2xl border max-w-[280px] overflow-x-auto ${theme === \"dark\" ? \"bg-[#181818] border-white/10\" : \"bg-neutral-100 border-neutral-200\"}`, children: [\n    /* @__PURE__ */ jsx13(AnimatePresence3, { mode: \"popLayout\", children: tabs.map((t, idx) => {\n      const isActive = activeTab === idx;\n      return /* @__PURE__ */ jsxs12(\n        motion3.div,\n        {\n          layout: true,\n          initial: { opacity: 0, scale: 0.8 },\n          animate: { opacity: 1, scale: 1 },\n          exit: { opacity: 0, scale: 0.8 },\n          transition: { duration: 0.2 },\n          onClick: () => setActiveTab(idx),\n          className: `flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-xs font-medium cursor-pointer transition-colors border ${isActive ? theme === \"dark\" ? \"bg-neutral-800 border-white/10 text-white shadow-sm\" : \"bg-white border-neutral-200 text-black shadow-sm\" : \"bg-transparent border-transparent text-neutral-400 hover:text-white\"}`,\n          children: [\n            /* @__PURE__ */ jsx13(\"span\", { children: t }),\n            /* @__PURE__ */ jsx13(\n              \"button\",\n              {\n                onClick: (e) => removeTab(idx, e),\n                className: \"hover:bg-rose-500/20 p-0.5 rounded-md text-neutral-400 hover:text-rose-400 border-0 bg-transparent cursor-pointer\",\n                children: /* @__PURE__ */ jsx13(X, { className: \"w-3 h-3\" })\n              }\n            )\n          ]\n        },\n        t\n      );\n    }) }),\n    tabs.length < 4 && /* @__PURE__ */ jsx13(\n      motion3.button,\n      {\n        whileTap: { scale: 0.9 },\n        onClick: addTab,\n        className: `p-1.5 rounded-xl border border-transparent transition-colors cursor-pointer ${theme === \"dark\" ? \"hover:bg-white/10 text-neutral-400 hover:text-white\" : \"hover:bg-neutral-200 text-neutral-600 hover:text-black\"}`,\n        title: \"New Tab\",\n        children: /* @__PURE__ */ jsx13(Plus, { className: \"w-3.5 h-3.5\" })\n      }\n    )\n  ] });\n}\nfunction DatePositionSelector({ theme = \"dark\" }) {\n  const [selectedDay, setSelectedDay] = useState12(\"25th\");\n  const days = [\"24th\", \"25th\", \"26th\"];\n  return /* @__PURE__ */ jsx13(\"div\", { className: `flex items-center gap-2 p-1.5 rounded-full border shadow-inner ${theme === \"dark\" ? \"bg-[#181818] border-white/10\" : \"bg-neutral-100 border-neutral-200\"}`, children: days.map((day) => {\n    const isSelected = selectedDay === day;\n    return /* @__PURE__ */ jsxs12(\n      motion3.button,\n      {\n        whileTap: { scale: 0.9 },\n        onClick: () => setSelectedDay(day),\n        className: \"relative px-3.5 py-1.5 rounded-full text-xs font-semibold cursor-pointer border-0 bg-transparent\",\n        children: [\n          isSelected && /* @__PURE__ */ jsx13(\n            motion3.div,\n            {\n              layoutId: \"day-pill\",\n              transition: { type: \"spring\", bounce: 0.2, duration: 0.4 },\n              className: `absolute inset-0 rounded-full shadow-md ${theme === \"dark\" ? \"bg-neutral-200\" : \"bg-neutral-900\"}`\n            }\n          ),\n          /* @__PURE__ */ jsx13(\"span\", { className: `relative z-10 ${isSelected ? theme === \"dark\" ? \"text-neutral-900 font-bold\" : \"text-white font-bold\" : theme === \"dark\" ? \"text-neutral-500 hover:text-white\" : \"text-neutral-400 hover:text-black\"}`, children: day })\n        ]\n      },\n      day\n    );\n  }) });\n}\n\n// src/components/css-animations/yui-components/YuiUiKit2.tsx\nimport { useState as useState13 } from \"react\";\nimport { motion as motion4, AnimatePresence as AnimatePresence4 } from \"motion/react\";\nimport {\n  Edit3,\n  Trash2,\n  HelpCircle,\n  Download,\n  Check as Check3,\n  Layers as Layers2,\n  Plus as Plus2,\n  Minus as Minus2,\n  Grid,\n  List,\n  MoreHorizontal,\n  LayoutGrid as LayoutGrid2,\n  LayoutList\n} from \"lucide-react\";\nimport { jsx as jsx14, jsxs as jsxs13 } from \"react/jsx-runtime\";\nfunction ContextMenuEditDelete({ theme = \"dark\" }) {\n  const [isOpen, setIsOpen] = useState13(false);\n  return /* @__PURE__ */ jsxs13(\"div\", { className: \"relative flex flex-col items-center\", children: [\n    /* @__PURE__ */ jsx14(\n      motion4.button,\n      {\n        whileTap: { scale: 0.95 },\n        onClick: () => setIsOpen(!isOpen),\n        className: `px-4 py-2 rounded-2xl border text-xs font-semibold shadow-sm cursor-pointer ${theme === \"dark\" ? \"bg-[#181818] border-neutral-700 text-white\" : \"bg-white border-neutral-200 text-neutral-900\"}`,\n        children: \"Actions Menu\"\n      }\n    ),\n    /* @__PURE__ */ jsx14(AnimatePresence4, { children: isOpen && /* @__PURE__ */ jsxs13(\n      motion4.div,\n      {\n        initial: { opacity: 0, scale: 0.88, y: -4 },\n        animate: { opacity: 1, scale: 1, y: 6 },\n        exit: { opacity: 0, scale: 0.88, y: -4 },\n        transition: { duration: 0.2 },\n        className: `absolute top-full z-30 w-32 p-1 rounded-2xl border shadow-xl flex flex-col gap-0.5 ${theme === \"dark\" ? \"bg-[#181818] border-neutral-700\" : \"bg-white border-neutral-200\"}`,\n        children: [\n          /* @__PURE__ */ jsxs13(\n            \"button\",\n            {\n              onClick: () => setIsOpen(false),\n              className: `flex items-center gap-2 w-full text-left px-3 py-2 rounded-xl text-xs font-medium cursor-pointer border-0 ${theme === \"dark\" ? \"text-white hover:bg-neutral-800\" : \"text-neutral-900 hover:bg-neutral-100\"}`,\n              children: [\n                /* @__PURE__ */ jsx14(Edit3, { className: \"w-3.5 h-3.5\" }),\n                /* @__PURE__ */ jsx14(\"span\", { children: \"Edit\" })\n              ]\n            }\n          ),\n          /* @__PURE__ */ jsxs13(\n            \"button\",\n            {\n              onClick: () => setIsOpen(false),\n              className: \"flex items-center gap-2 w-full text-left px-3 py-2 rounded-xl text-xs font-medium text-rose-500 hover:bg-rose-500/10 cursor-pointer border-0\",\n              children: [\n                /* @__PURE__ */ jsx14(Trash2, { className: \"w-3.5 h-3.5\" }),\n                /* @__PURE__ */ jsx14(\"span\", { children: \"Delete\" })\n              ]\n            }\n          )\n        ]\n      }\n    ) })\n  ] });\n}\nfunction DownloadAnimatedIcons({ theme = \"dark\" }) {\n  const [isDownloading, setIsDownloading] = useState13(false);\n  return /* @__PURE__ */ jsxs13(\"div\", { className: \"flex items-center gap-4\", children: [\n    /* @__PURE__ */ jsx14(\n      motion4.button,\n      {\n        whileHover: { scale: 1.08 },\n        whileTap: { scale: 0.9 },\n        onClick: () => {\n          setIsDownloading(true);\n          setTimeout(() => setIsDownloading(false), 2e3);\n        },\n        className: `w-11 h-11 rounded-2xl border flex items-center justify-center shadow-md cursor-pointer ${theme === \"dark\" ? \"bg-[#181818] border-neutral-700 text-white\" : \"bg-white border-neutral-200 text-neutral-900\"}`,\n        children: /* @__PURE__ */ jsx14(\n          motion4.div,\n          {\n            animate: isDownloading ? { y: [0, 4, 0] } : {},\n            transition: { repeat: Infinity, duration: 0.6 },\n            children: /* @__PURE__ */ jsx14(Download, { className: \"w-5 h-5 text-[#0a84ff]\" })\n          }\n        )\n      }\n    ),\n    /* @__PURE__ */ jsx14(\n      motion4.button,\n      {\n        whileHover: { scale: 1.08 },\n        whileTap: { scale: 0.9 },\n        className: `w-11 h-11 rounded-2xl border flex items-center justify-center shadow-md cursor-pointer ${isDownloading ? \"bg-emerald-500/20 border-emerald-500/40 text-emerald-400\" : theme === \"dark\" ? \"bg-[#181818] border-neutral-700 text-neutral-300\" : \"bg-white border-neutral-200 text-neutral-700\"}`,\n        children: isDownloading ? /* @__PURE__ */ jsx14(Check3, { className: \"w-5 h-5\" }) : /* @__PURE__ */ jsx14(Download, { className: \"w-5 h-5\" })\n      }\n    )\n  ] });\n}\nfunction SegmentedABTabs({ theme = \"dark\" }) {\n  const [tab, setTab] = useState13(\"A\");\n  return /* @__PURE__ */ jsx14(\"div\", { className: `relative flex items-center p-1 rounded-2xl border shadow-inner ${theme === \"dark\" ? \"bg-[#181818] border-neutral-700\" : \"bg-neutral-100 border-neutral-200\"}`, children: [\"A\", \"B\"].map((item) => {\n    const isSelected = tab === item;\n    return /* @__PURE__ */ jsxs13(\n      \"button\",\n      {\n        onClick: () => setTab(item),\n        className: \"relative px-6 py-2 rounded-xl text-xs font-bold cursor-pointer border-0 bg-transparent\",\n        children: [\n          isSelected && /* @__PURE__ */ jsx14(\n            motion4.div,\n            {\n              layoutId: \"ab-tab-pill\",\n              transition: { type: \"spring\", bounce: 0.2, duration: 0.4 },\n              className: `absolute inset-0 rounded-xl shadow-md ${theme === \"dark\" ? \"bg-neutral-200\" : \"bg-neutral-900\"}`\n            }\n          ),\n          /* @__PURE__ */ jsx14(\"span\", { className: `relative z-10 ${isSelected ? theme === \"dark\" ? \"text-neutral-900\" : \"text-white\" : theme === \"dark\" ? \"text-neutral-500\" : \"text-neutral-400\"}`, children: item })\n        ]\n      },\n      item\n    );\n  }) });\n}\n\n// src/components/css-animations/yui-components/AnimatedSidebar.tsx\nimport { useMemo, useState as useState14 } from \"react\";\nimport { AnimatePresence as AnimatePresence5, motion as motion5, useReducedMotion } from \"motion/react\";\nimport { Send, Webhook } from \"lucide-react\";\nimport { jsx as jsx15, jsxs as jsxs14 } from \"react/jsx-runtime\";\nvar SUB_ITEMS = [\n  { id: \"send\", label: \"Send API\" },\n  { id: \"templates\", label: \"React Email supported\" },\n  { id: \"events\", label: \"Webhooks\" }\n];\nvar SECTIONS = [\n  { id: \"transactional\", label: \"Transactional Email\" },\n  { id: \"analytics\", label: \"Email Analytics\" },\n  { id: \"templates\", label: \"AI Email Templates\" }\n];\nvar PALETTE = {\n  light: {\n    surface: \"#ffffff\",\n    border: \"rgba(15, 23, 42, 0.10)\",\n    rail: \"#e5e7eb\",\n    heading: \"#111111\",\n    body: \"#667085\",\n    bodyHover: \"#1f2937\",\n    accent: \"#f97316\",\n    accentSoft: \"rgba(249, 115, 22, 0.10)\",\n    iconInactive: \"#a0a6b0\"\n  },\n  dark: {\n    surface: \"#0a0a0a\",\n    border: \"rgba(255, 255, 255, 0.10)\",\n    rail: \"#262628\",\n    heading: \"#f5f5f7\",\n    body: \"rgba(255, 255, 255, 0.48)\",\n    bodyHover: \"#ffffff\",\n    accent: \"#fb923c\",\n    accentSoft: \"rgba(251, 146, 60, 0.12)\",\n    iconInactive: \"rgba(255, 255, 255, 0.38)\"\n  }\n};\nfunction ReactEmailIcon({ className, style }) {\n  return /* @__PURE__ */ jsxs14(\n    \"svg\",\n    {\n      viewBox: \"0 0 24 24\",\n      fill: \"none\",\n      stroke: \"currentColor\",\n      strokeWidth: \"1.5\",\n      className,\n      style,\n      \"aria-hidden\": \"true\",\n      children: [\n        /* @__PURE__ */ jsx15(\"ellipse\", { cx: \"12\", cy: \"12\", rx: \"10\", ry: \"4.5\" }),\n        /* @__PURE__ */ jsx15(\"ellipse\", { cx: \"12\", cy: \"12\", rx: \"10\", ry: \"4.5\", transform: \"rotate(60 12 12)\" }),\n        /* @__PURE__ */ jsx15(\"ellipse\", { cx: \"12\", cy: \"12\", rx: \"10\", ry: \"4.5\", transform: \"rotate(120 12 12)\" }),\n        /* @__PURE__ */ jsx15(\"circle\", { cx: \"12\", cy: \"12\", r: \"1.5\", fill: \"currentColor\", stroke: \"none\" })\n      ]\n    }\n  );\n}\nfunction SubItemIcon({ item, className, style }) {\n  if (item === \"templates\") return /* @__PURE__ */ jsx15(ReactEmailIcon, { className, style });\n  if (item === \"events\") return /* @__PURE__ */ jsx15(Webhook, { className, style });\n  return /* @__PURE__ */ jsx15(Send, { className, style });\n}\nfunction AnimatedSidebar({\n  theme = \"dark\",\n  className = \"\",\n  initialActiveItem = \"events\",\n  onItemChange\n}) {\n  const [activeSection, setActiveSection] = useState14(\"transactional\");\n  const [activeItem, setActiveItem] = useState14(initialActiveItem);\n  const [hoveredSection, setHoveredSection] = useState14(null);\n  const [hoveredItem, setHoveredItem] = useState14(null);\n  const shouldReduceMotion = useReducedMotion();\n  const palette = PALETTE[theme];\n  const activeIndex = useMemo(\n    () => SUB_ITEMS.findIndex((item) => item.id === (hoveredItem ?? activeItem)),\n    [activeItem, hoveredItem]\n  );\n  const totalHeight = SUB_ITEMS.length * 34;\n  const inactiveConnectorPath = useMemo(\n    () => [\n      `M 0.5 0 L 0.5 ${(SUB_ITEMS.length - 1) * 34 + 9}`,\n      ...SUB_ITEMS.map((_, index) => `M 0.5 ${index * 34 + 9} Q 0.5 ${index * 34 + 17} 8.5 ${index * 34 + 17} L 14 ${index * 34 + 17}`)\n    ].join(\" \"),\n    []\n  );\n  const activeConnectorPath = activeIndex >= 0 ? `M 0.5 0 L 0.5 ${activeIndex * 34 + 9} Q 0.5 ${activeIndex * 34 + 17} 8.5 ${activeIndex * 34 + 17} L 14 ${activeIndex * 34 + 17}` : \"\";\n  const motionTransition = shouldReduceMotion ? { duration: 0 } : { type: \"spring\", bounce: 0.15, duration: 0.28 };\n  const selectSection = (section) => {\n    setActiveSection(section);\n    if (section === \"transactional\") {\n      onItemChange?.(activeItem);\n    }\n  };\n  const selectItem = (item) => {\n    setActiveSection(\"transactional\");\n    setActiveItem(item);\n    onItemChange?.(item);\n  };\n  return /* @__PURE__ */ jsx15(\n    \"div\",\n    {\n      \"data-testid\": \"mova-animated-sidebar\",\n      \"data-theme\": theme,\n      \"data-active-section\": activeSection,\n      \"data-active-item\": activeSection === \"transactional\" ? activeItem : \"\",\n      className: `mova-animated-sidebar relative isolate min-h-[278px] w-full max-w-[540px] overflow-hidden rounded-[18px] border border-[var(--mova-sidebar-border)] bg-[var(--mova-sidebar-surface)] p-5 transition-colors duration-300 sm:p-8 ${className}`,\n      style: {\n        \"--mova-sidebar-surface\": palette.surface,\n        \"--mova-sidebar-border\": palette.border,\n        \"--mova-sidebar-rail\": palette.rail,\n        \"--mova-sidebar-accent\": palette.accent,\n        \"--mova-sidebar-accent-soft\": palette.accentSoft,\n        fontFamily: '-apple-system, BlinkMacSystemFont, \"SF Pro Display\", \"SF Pro Text\", \"Helvetica Neue\", sans-serif'\n      },\n      children: /* @__PURE__ */ jsxs14(\"div\", { className: \"relative mx-auto w-full max-w-[376px]\", children: [\n        /* @__PURE__ */ jsx15(\n          \"div\",\n          {\n            \"aria-hidden\": \"true\",\n            className: \"pointer-events-none absolute bottom-[14px] left-[3px] top-[15px] w-px bg-[var(--mova-sidebar-rail)] transition-colors duration-300\"\n          }\n        ),\n        SECTIONS.map((section) => {\n          const isSectionActive = activeSection === section.id;\n          const hasSubItems = section.id === \"transactional\";\n          const isSectionHovered = hoveredSection === section.id;\n          return /* @__PURE__ */ jsxs14(\"div\", { className: \"relative w-full\", children: [\n            /* @__PURE__ */ jsxs14(\n              \"button\",\n              {\n                type: \"button\",\n                \"aria-current\": isSectionActive ? \"page\" : void 0,\n                onClick: () => selectSection(section.id),\n                onMouseEnter: () => setHoveredSection(section.id),\n                onMouseLeave: () => setHoveredSection(null),\n                className: `group relative flex min-h-[42px] w-full items-center px-7 py-2 text-left text-[17px] leading-6 tracking-[-0.02em] transition-colors duration-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ${isSectionActive ? \"font-medium\" : \"font-normal\"}`,\n                style: {\n                  color: isSectionActive || isSectionHovered ? palette.heading : palette.body,\n                  outlineColor: palette.accent\n                },\n                children: [\n                  isSectionHovered && /* @__PURE__ */ jsx15(\n                    motion5.span,\n                    {\n                      layoutId: \"mova-sidebar-parent-hover\",\n                      className: \"pointer-events-none absolute inset-x-2 inset-y-1 rounded-lg bg-[var(--mova-sidebar-accent-soft)]\",\n                      initial: { opacity: 0 },\n                      animate: { opacity: 1 },\n                      exit: { opacity: 0 },\n                      transition: { duration: shouldReduceMotion ? 0 : 0.16 }\n                    }\n                  ),\n                  isSectionActive && /* @__PURE__ */ jsx15(\n                    motion5.span,\n                    {\n                      layoutId: \"mova-sidebar-active-indicator\",\n                      className: \"pointer-events-none absolute bottom-1.5 left-[2px] top-1.5 w-0.5 rounded-full bg-[var(--mova-sidebar-accent)]\",\n                      transition: motionTransition\n                    }\n                  ),\n                  /* @__PURE__ */ jsx15(\"span\", { className: \"relative z-10\", children: section.label })\n                ]\n              }\n            ),\n            /* @__PURE__ */ jsx15(AnimatePresence5, { initial: false, children: hasSubItems && isSectionActive && /* @__PURE__ */ jsx15(\n              motion5.div,\n              {\n                initial: { height: 0, opacity: 0 },\n                animate: { height: \"auto\", opacity: 1 },\n                exit: { height: 0, opacity: 0 },\n                transition: {\n                  height: shouldReduceMotion ? { duration: 0 } : { duration: 0.28, ease: [0.16, 1, 0.3, 1] },\n                  opacity: shouldReduceMotion ? { duration: 0 } : { duration: 0.18, ease: \"easeInOut\" }\n                },\n                className: \"relative ml-8 flex flex-col overflow-hidden\",\n                children: /* @__PURE__ */ jsxs14(\"div\", { className: \"relative flex flex-col py-1.5\", children: [\n                  /* @__PURE__ */ jsxs14(\n                    \"svg\",\n                    {\n                      \"aria-hidden\": \"true\",\n                      className: \"pointer-events-none absolute left-0 top-1.5 h-full w-5 overflow-visible\",\n                      width: \"20\",\n                      height: totalHeight,\n                      viewBox: `0 0 20 ${totalHeight}`,\n                      fill: \"none\",\n                      children: [\n                        /* @__PURE__ */ jsx15(\n                          \"path\",\n                          {\n                            d: inactiveConnectorPath,\n                            stroke: palette.rail,\n                            strokeWidth: \"1\",\n                            strokeLinecap: \"round\",\n                            strokeLinejoin: \"round\"\n                          }\n                        ),\n                        activeIndex >= 0 && /* @__PURE__ */ jsx15(\n                          motion5.path,\n                          {\n                            initial: false,\n                            animate: { d: activeConnectorPath, stroke: palette.accent },\n                            transition: motionTransition,\n                            strokeWidth: \"1\",\n                            strokeLinecap: \"round\",\n                            strokeLinejoin: \"round\"\n                          }\n                        )\n                      ]\n                    }\n                  ),\n                  SUB_ITEMS.map((item) => {\n                    const isSelected = activeItem === item.id && activeSection === \"transactional\";\n                    const isHighlighted = (hoveredItem ?? activeItem) === item.id && activeSection === \"transactional\";\n                    const isHovered = hoveredItem === item.id;\n                    return /* @__PURE__ */ jsxs14(\n                      \"button\",\n                      {\n                        type: \"button\",\n                        \"aria-current\": isSelected ? \"page\" : void 0,\n                        onClick: () => selectItem(item.id),\n                        onMouseEnter: () => setHoveredItem(item.id),\n                        onMouseLeave: () => setHoveredItem(null),\n                        className: \"group relative z-0 flex h-[34px] w-full items-center pr-3 pl-6 text-left text-[13.5px] leading-5 tracking-[-0.01em] transition-colors duration-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px]\",\n                        style: {\n                          color: isHighlighted ? palette.heading : isHovered ? palette.bodyHover : palette.body,\n                          outlineColor: palette.accent,\n                          fontWeight: isHighlighted ? 600 : 400\n                        },\n                        children: [\n                          isHovered && /* @__PURE__ */ jsx15(\n                            motion5.span,\n                            {\n                              layoutId: \"mova-sidebar-child-hover\",\n                              className: \"pointer-events-none absolute inset-x-1 inset-y-0 rounded-lg bg-[var(--mova-sidebar-accent-soft)]\",\n                              initial: { opacity: 0 },\n                              animate: { opacity: 1 },\n                              exit: { opacity: 0 },\n                              transition: { duration: shouldReduceMotion ? 0 : 0.16 }\n                            }\n                          ),\n                          /* @__PURE__ */ jsx15(\n                            SubItemIcon,\n                            {\n                              item: item.id,\n                              className: \"relative z-10 mr-2 h-3.5 w-3.5 shrink-0 transition-colors duration-200\",\n                              style: { color: isHighlighted ? palette.accent : palette.iconInactive }\n                            }\n                          ),\n                          /* @__PURE__ */ jsx15(\n                            \"span\",\n                            {\n                              className: \"relative z-10 truncate\",\n                              style: { color: isHighlighted ? palette.heading : palette.body },\n                              children: item.label\n                            }\n                          )\n                        ]\n                      },\n                      item.id\n                    );\n                  })\n                ] })\n              },\n              \"transactional-submenu\"\n            ) })\n          ] }, section.id);\n        })\n      ] })\n    }\n  );\n}\n\n// src/components/accordion-blind.tsx\nimport { jsx as jsx16 } from \"react/jsx-runtime\";\nfunction MovaComponent({ theme = \"dark\" }) {\n  const previewLoopTrigger = 0;\n  const renderLiveComponent = (id) => {\n    switch (id) {\n      case \"dock\":\n        return /* @__PURE__ */ jsx16(\"div\", { className: \"w-full flex items-center justify-center py-2 origin-center\", children: /* @__PURE__ */ jsx16(Dock, { theme: \"dark\" }) });\n      // ROW 1: CARD & RIBBON PEEL (3 VARIATIONS)\n      case \"anim-card-peel\":\n        return /* @__PURE__ */ jsx16(\"div\", { className: \"w-full h-full flex items-center justify-center\", children: /* @__PURE__ */ jsx16(CardStackPeel, { loop: true, trigger: \"hover\", theme: \"dark\" }) }, `cp-${previewLoopTrigger}`);\n      case \"anim-bookmark-corner\":\n        return /* @__PURE__ */ jsx16(\"div\", { className: \"w-full h-full flex items-center justify-center\", children: /* @__PURE__ */ jsx16(BookmarkCornerPeel, { loop: true, trigger: \"hover\", theme: \"dark\" }) }, `bmc-${previewLoopTrigger}`);\n      case \"anim-elastic-tag\":\n        return /* @__PURE__ */ jsx16(\"div\", { className: \"w-full h-full flex items-center justify-center\", children: /* @__PURE__ */ jsx16(ElasticTagSnap, { loop: true, trigger: \"hover\", theme: \"dark\" }) }, `et-${previewLoopTrigger}`);\n      // ROW 2: SPLIT GATES & SHUTTERS (3 VARIATIONS)\n      case \"anim-split-gate\":\n        return /* @__PURE__ */ jsx16(\"div\", { className: \"w-full h-full flex items-center justify-center\", children: /* @__PURE__ */ jsx16(SplitGateReveal, { loop: true, trigger: \"hover\", theme: \"dark\" }) }, `sg-${previewLoopTrigger}`);\n      case \"anim-shutter-slide\":\n        return /* @__PURE__ */ jsx16(\"div\", { className: \"w-full h-full flex items-center justify-center\", children: /* @__PURE__ */ jsx16(ShutterSlide, { loop: true, trigger: \"hover\", theme: \"dark\" }) }, `ss-${previewLoopTrigger}`);\n      case \"anim-origami-envelope\":\n        return /* @__PURE__ */ jsx16(\"div\", { className: \"w-full h-full flex items-center justify-center\", children: /* @__PURE__ */ jsx16(OrigamiEnvelopeUnfold, { loop: true, trigger: \"hover\", theme: \"dark\" }) }, `oe-${previewLoopTrigger}`);\n      // ROW 3: DISPENSERS & CARDS (3 VARIATIONS)\n      case \"anim-card-dispenser\":\n        return /* @__PURE__ */ jsx16(\"div\", { className: \"w-full h-full flex items-center justify-center\", children: /* @__PURE__ */ jsx16(SmartCardDispenser, { loop: true, trigger: \"hover\", theme: \"dark\" }) }, `cd-${previewLoopTrigger}`);\n      case \"anim-sticky-note\":\n        return /* @__PURE__ */ jsx16(\"div\", { className: \"w-full h-full flex items-center justify-center\", children: /* @__PURE__ */ jsx16(StickyNotePeel, { loop: true, trigger: \"hover\", theme: \"dark\" }) }, `sn-${previewLoopTrigger}`);\n      case \"anim-receipt-tape\":\n        return /* @__PURE__ */ jsx16(\"div\", { className: \"w-full h-full flex items-center justify-center\", children: /* @__PURE__ */ jsx16(ReceiptTapePrint, { loop: true, trigger: \"hover\", theme: \"dark\" }) }, `rt-${previewLoopTrigger}`);\n      // ROW 4: CIRCUIT & LATTICE DRAWING (3 VARIATIONS)\n      case \"anim-circuit-trace\":\n        return /* @__PURE__ */ jsx16(\"div\", { className: \"w-full h-full flex items-center justify-center\", children: /* @__PURE__ */ jsx16(CircuitTraceDraw, { loop: true, trigger: \"hover\", theme: \"dark\" }) }, `ct-${previewLoopTrigger}`);\n      case \"anim-hex-lattice\":\n        return /* @__PURE__ */ jsx16(\"div\", { className: \"w-full h-full flex items-center justify-center\", children: /* @__PURE__ */ jsx16(HexagonLatticeDraw, { loop: true, trigger: \"hover\", theme: \"dark\" }) }, `hl-${previewLoopTrigger}`);\n      case \"anim-stroke-waveform\":\n        return /* @__PURE__ */ jsx16(\"div\", { className: \"w-full h-full flex items-center justify-center\", children: /* @__PURE__ */ jsx16(StrokeWaveform, { loop: true, trigger: \"hover\", theme: \"dark\" }) }, `sw-${previewLoopTrigger}`);\n      // ROW 5: PRISM & MODULAR BLOCKS (3 VARIATIONS)\n      case \"anim-prism-stack\":\n        return /* @__PURE__ */ jsx16(\"div\", { className: \"w-full h-full flex items-center justify-center\", children: /* @__PURE__ */ jsx16(PrismBlockStack, { loop: true, trigger: \"hover\", theme: \"dark\" }) }, `ps-${previewLoopTrigger}`);\n      case \"anim-modular-tile\":\n        return /* @__PURE__ */ jsx16(\"div\", { className: \"w-full h-full flex items-center justify-center\", children: /* @__PURE__ */ jsx16(ModularTileSnap, { loop: true, trigger: \"hover\", theme: \"dark\" }) }, `mt-${previewLoopTrigger}`);\n      case \"anim-pyramid-build\":\n        return /* @__PURE__ */ jsx16(\"div\", { className: \"w-full h-full flex items-center justify-center\", children: /* @__PURE__ */ jsx16(PyramidBlockBuild, { loop: true, trigger: \"hover\", theme: \"dark\" }) }, `pb-${previewLoopTrigger}`);\n      // ROW 6: ROLLERS & SCROLLS (3 VARIATIONS)\n      case \"anim-roller-blind\":\n        return /* @__PURE__ */ jsx16(\"div\", { className: \"w-full h-full flex items-center justify-center\", children: /* @__PURE__ */ jsx16(RollerBlindDrop, { loop: true, trigger: \"hover\", theme: \"dark\" }) }, `rb-${previewLoopTrigger}`);\n      case \"anim-scroll-canvas\":\n        return /* @__PURE__ */ jsx16(\"div\", { className: \"w-full h-full flex items-center justify-center\", children: /* @__PURE__ */ jsx16(ScrollCanvasUnroll, { loop: true, trigger: \"hover\", theme: \"dark\" }) }, `sc-${previewLoopTrigger}`);\n      case \"anim-ribbon-banner\":\n        return /* @__PURE__ */ jsx16(\"div\", { className: \"w-full h-full flex items-center justify-center\", children: /* @__PURE__ */ jsx16(RibbonBannerSlide, { loop: true, trigger: \"hover\", theme: \"dark\" }) }, `rbs-${previewLoopTrigger}`);\n      // ROW 7: ELASTICITY & MORPHING (3 VARIATIONS)\n      case \"anim-tension-capsule\":\n        return /* @__PURE__ */ jsx16(\"div\", { className: \"w-full h-full flex items-center justify-center\", children: /* @__PURE__ */ jsx16(KineticTensionCapsule, { loop: true, trigger: \"hover\", theme: \"dark\" }) }, `tc-${previewLoopTrigger}`);\n      case \"anim-droplet-squish\":\n        return /* @__PURE__ */ jsx16(\"div\", { className: \"w-full h-full flex items-center justify-center\", children: /* @__PURE__ */ jsx16(DropletSquish, { loop: true, trigger: \"hover\", theme: \"dark\" }) }, `ds-${previewLoopTrigger}`);\n      case \"anim-segmented-link\":\n        return /* @__PURE__ */ jsx16(\"div\", { className: \"w-full h-full flex items-center justify-center\", children: /* @__PURE__ */ jsx16(SegmentedLinkStretch, { loop: true, trigger: \"hover\", theme: \"dark\" }) }, `sl-${previewLoopTrigger}`);\n      // ROW 8: BLINDS & IRIS SHUTTERS (3 VARIATIONS)\n      case \"anim-blind-pull\":\n        return /* @__PURE__ */ jsx16(\"div\", { className: \"w-full h-full flex items-center justify-center\", children: /* @__PURE__ */ jsx16(BlindPull, { loop: true, trigger: \"hover\", theme: \"dark\" }) }, `bp-${previewLoopTrigger}`);\n      case \"anim-rotating-louvers\":\n        return /* @__PURE__ */ jsx16(\"div\", { className: \"w-full h-full flex items-center justify-center\", children: /* @__PURE__ */ jsx16(RotatingLouvers, { loop: true, trigger: \"hover\", theme: \"dark\" }) }, `rl-${previewLoopTrigger}`);\n      case \"anim-iris-shutter\":\n        return /* @__PURE__ */ jsx16(\"div\", { className: \"w-full h-full flex items-center justify-center\", children: /* @__PURE__ */ jsx16(GeometricIrisShutter, { loop: true, trigger: \"hover\", theme: \"dark\" }) }, `is-${previewLoopTrigger}`);\n      // ROW 9: BUBBLE LEVELS & METRONOMES (3 VARIATIONS)\n      case \"anim-bubble-level\":\n        return /* @__PURE__ */ jsx16(\"div\", { className: \"w-full h-full flex items-center justify-center\", children: /* @__PURE__ */ jsx16(PendulumBubbleLevel, { loop: true, trigger: \"hover\", theme: \"dark\" }) }, `bl-${previewLoopTrigger}`);\n      case \"anim-kinetic-metronome\":\n        return /* @__PURE__ */ jsx16(\"div\", { className: \"w-full h-full flex items-center justify-center\", children: /* @__PURE__ */ jsx16(KineticTickingMetronome, { loop: true, trigger: \"hover\", theme: \"dark\" }) }, `km-${previewLoopTrigger}`);\n      case \"anim-orbital-gimbal\":\n        return /* @__PURE__ */ jsx16(\"div\", { className: \"w-full h-full flex items-center justify-center\", children: /* @__PURE__ */ jsx16(NestedOrbitalGimbal, { loop: true, trigger: \"hover\", theme: \"dark\" }) }, `og-${previewLoopTrigger}`);\n      // ROW 10: HARMONIC SPRINGS (3 VARIATIONS)\n      case \"anim-gelatin-wobble\":\n        return /* @__PURE__ */ jsx16(\"div\", { className: \"w-full h-full flex items-center justify-center\", children: /* @__PURE__ */ jsx16(GelatinWobble, { loop: true, trigger: \"hover\", theme: \"dark\" }) }, `gw-${previewLoopTrigger}`);\n      case \"anim-slinky-coil\":\n        return /* @__PURE__ */ jsx16(\"div\", { className: \"w-full h-full flex items-center justify-center\", children: /* @__PURE__ */ jsx16(SlinkyCoil, { loop: true, trigger: \"hover\", theme: \"dark\" }) }, `sc-${previewLoopTrigger}`);\n      case \"anim-squash-sphere\":\n        return /* @__PURE__ */ jsx16(\"div\", { className: \"w-full h-full flex items-center justify-center\", children: /* @__PURE__ */ jsx16(SquashStretchSphere, { loop: true, trigger: \"hover\", theme: \"dark\" }) }, `sqs-${previewLoopTrigger}`);\n      // ROW 11: CASCADES & DOMINOES (3 VARIATIONS)\n      case \"anim-domino-chain\":\n        return /* @__PURE__ */ jsx16(\"div\", { className: \"w-full h-full flex items-center justify-center\", children: /* @__PURE__ */ jsx16(DominoChain, { loop: true, trigger: \"hover\", theme: \"dark\" }) }, `dc-${previewLoopTrigger}`);\n      case \"anim-card-cascade\":\n        return /* @__PURE__ */ jsx16(\"div\", { className: \"w-full h-full flex items-center justify-center\", children: /* @__PURE__ */ jsx16(CardDeckCascade, { loop: true, trigger: \"hover\", theme: \"dark\" }) }, `cdc-${previewLoopTrigger}`);\n      case \"anim-gear-step\":\n        return /* @__PURE__ */ jsx16(\"div\", { className: \"w-full h-full flex items-center justify-center\", children: /* @__PURE__ */ jsx16(GearToothStep, { loop: true, trigger: \"hover\", theme: \"dark\" }) }, `gs-${previewLoopTrigger}`);\n      // ROW 12: MAGNETICS & COMPASS (3 VARIATIONS)\n      case \"anim-magnetic-disks\":\n        return /* @__PURE__ */ jsx16(\"div\", { className: \"w-full h-full flex items-center justify-center\", children: /* @__PURE__ */ jsx16(MagneticDisks, { loop: true, trigger: \"hover\", theme: \"dark\" }) }, `md-${previewLoopTrigger}`);\n      case \"anim-dual-magnet\":\n        return /* @__PURE__ */ jsx16(\"div\", { className: \"w-full h-full flex items-center justify-center\", children: /* @__PURE__ */ jsx16(DualMagnetDipole, { loop: true, trigger: \"hover\", theme: \"dark\" }) }, `dmd-${previewLoopTrigger}`);\n      case \"anim-compass-deflect\":\n        return /* @__PURE__ */ jsx16(\"div\", { className: \"w-full h-full flex items-center justify-center\", children: /* @__PURE__ */ jsx16(CompassNeedleDeflect, { loop: true, trigger: \"hover\", theme: \"dark\" }) }, `cnd-${previewLoopTrigger}`);\n      // ROW 13: KINETIC SPEED & INERTIA (3 VARIATIONS) - NEW\n      case \"anim-sudden-brake\":\n        return /* @__PURE__ */ jsx16(\"div\", { className: \"w-full h-full flex items-center justify-center\", children: /* @__PURE__ */ jsx16(SuddenBrake, { loop: true, trigger: \"hover\", theme: \"dark\" }) }, `sb-${previewLoopTrigger}`);\n      case \"anim-rolling-tumble\":\n        return /* @__PURE__ */ jsx16(\"div\", { className: \"w-full h-full flex items-center justify-center\", children: /* @__PURE__ */ jsx16(RollingTumble, { loop: true, trigger: \"hover\", theme: \"dark\" }) }, `rtb-${previewLoopTrigger}`);\n      case \"anim-inertia-skid\":\n        return /* @__PURE__ */ jsx16(\"div\", { className: \"w-full h-full flex items-center justify-center\", children: /* @__PURE__ */ jsx16(InertiaSkidStop, { loop: true, trigger: \"hover\", theme: \"dark\" }) }, `iss-${previewLoopTrigger}`);\n      // ROW 14: NEON & PAGE MECHANICS (3 VARIATIONS) - NEW\n      case \"anim-neon-sign\":\n        return /* @__PURE__ */ jsx16(\"div\", { className: \"w-full h-full flex items-center justify-center\", children: /* @__PURE__ */ jsx16(NeonSignDraw, { loop: true, trigger: \"hover\", theme: \"dark\" }) }, `ns-${previewLoopTrigger}`);\n      case \"anim-page-turn\":\n        return /* @__PURE__ */ jsx16(\"div\", { className: \"w-full h-full flex items-center justify-center\", children: /* @__PURE__ */ jsx16(PageTurnCurl, { loop: true, trigger: \"hover\", theme: \"dark\" }) }, `ptc-${previewLoopTrigger}`);\n      case \"anim-shutter-blocks\":\n        return /* @__PURE__ */ jsx16(\"div\", { className: \"w-full h-full flex items-center justify-center\", children: /* @__PURE__ */ jsx16(ShutterStepBlocks, { loop: true, trigger: \"hover\", theme: \"dark\" }) }, `ssb-${previewLoopTrigger}`);\n      // ROW 15: LOADERS & SPINNERS (3 VARIATIONS)\n      case \"anim-matrix-loader\":\n        return /* @__PURE__ */ jsx16(MatrixGridLoader, { theme: \"dark\" });\n      case \"anim-apple-spinner\":\n        return /* @__PURE__ */ jsx16(AppleRadialSpinner, { theme: \"dark\" });\n      case \"anim-pulse-dots\":\n        return /* @__PURE__ */ jsx16(PulseOrbitDots, { theme: \"dark\" });\n      // ROW 16: SELECTS & MENUS (3 VARIATIONS)\n      case \"mova-animated-sidebar\":\n        return /* @__PURE__ */ jsx16(AnimatedSidebar, { theme });\n      case \"yui-category-select\":\n        return /* @__PURE__ */ jsx16(CategorySelect, { theme: \"dark\" });\n      case \"yui-filter-tag-pill\":\n        return /* @__PURE__ */ jsx16(FilterTagPill, { theme: \"dark\" });\n      case \"yui-submenu-flyout\":\n        return /* @__PURE__ */ jsx16(SubmenuFlyout, { theme: \"dark\" });\n      // ROW 17: BUTTONS & LINKS (3 VARIATIONS)\n      case \"yui-hover-link\":\n        return /* @__PURE__ */ jsx16(HoverLinkCard, { theme: \"dark\" });\n      case \"yui-magnetic-icon-btn\":\n        return /* @__PURE__ */ jsx16(MagneticIconButton, { theme: \"dark\" });\n      case \"yui-morph-action-pill\":\n        return /* @__PURE__ */ jsx16(MorphActionPill, { theme: \"dark\" });\n      // ROW 18: TOGGLES & MODIFIERS (3 VARIATIONS)\n      case \"yui-plus-minus-toggle\":\n        return /* @__PURE__ */ jsx16(PlusMinusToggle, { theme: \"dark\" });\n      case \"yui-light-dark-toggle\":\n        return /* @__PURE__ */ jsx16(LightDarkMorphToggle, { theme: \"dark\" });\n      case \"yui-ab-tabs\":\n        return /* @__PURE__ */ jsx16(SegmentedABTabs, { theme: \"dark\" });\n      // ROW 19: PROGRESS & STEPPERS (3 VARIATIONS)\n      case \"yui-progress-stepper\":\n        return /* @__PURE__ */ jsx16(ProgressStepper, { theme: \"dark\" });\n      case \"yui-segmented-arc-meter\":\n        return /* @__PURE__ */ jsx16(SegmentedArcMeter, { theme: \"dark\" });\n      case \"yui-segmented-step-bar\":\n        return /* @__PURE__ */ jsx16(SegmentedStepBar, { theme: \"dark\" });\n      // ROW 20: TABS & STEPPERS (3 VARIATIONS)\n      case \"yui-multi-tab-close\":\n        return /* @__PURE__ */ jsx16(MultiTabCloseBar, { theme: \"dark\" });\n      case \"yui-date-position\":\n        return /* @__PURE__ */ jsx16(DatePositionSelector, { theme: \"dark\" });\n      case \"yui-stepper-dots\":\n        return /* @__PURE__ */ jsx16(SegmentedStepperDots, { theme: \"dark\" });\n      // ROW 21: ACTION FEEDBACK & GLANCES (3 VARIATIONS)\n      case \"yui-context-menu\":\n        return /* @__PURE__ */ jsx16(ContextMenuEditDelete, { theme: \"dark\" });\n      case \"yui-glance-preview\":\n        return /* @__PURE__ */ jsx16(CardGlancePreview, { theme: \"dark\" });\n      case \"yui-download-icons\":\n        return /* @__PURE__ */ jsx16(DownloadAnimatedIcons, { theme: \"dark\" });\n      // ROW 22: CONTROLS & SWITCHERS (3 VARIATIONS)\n      case \"yui-wheel-counter\":\n        return /* @__PURE__ */ jsx16(VerticalWheelCounter, { theme: \"dark\" });\n      case \"yui-perspective-layout\":\n        return /* @__PURE__ */ jsx16(PerspectiveLayoutSwitcher, { theme: \"dark\" });\n      case \"yui-save-pill\":\n        return /* @__PURE__ */ jsx16(BookmarkSavePill, { theme: \"dark\" });\n      default:\n        return null;\n    }\n  };\n  return renderLiveComponent(\"anim-blind-pull\");\n}\nexport {\n  MovaComponent as default\n};\n",
+  "dependencies": [
+    "lucide-react",
+    "motion"
+  ],
+  "css": "/* src/components/css-animations/anime-theme.css */\n.mova-anime-page {\n  --mova-anime-accent: rgb(91 184 148);\n  --mova-anime-accent-bright: rgb(139 216 180);\n  --mova-anime-accent-strong: rgb(63 159 119);\n  --mova-anime-accent-deep: rgb(39 122 91);\n}\n.mova-anime-page[data-theme=light] {\n  --mova-anime-accent: rgb(39 122 91);\n  --mova-anime-accent-bright: rgb(91 184 148);\n  --mova-anime-accent-strong: rgb(31 101 74);\n  --mova-anime-accent-deep: rgb(23 74 54);\n}\n.mova-anime-accent {\n  color: var(--mova-anime-accent) !important;\n}\n.mova-anime-filter[data-active=true] {\n  color: var(--mova-anime-accent) !important;\n  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--mova-anime-accent) 28%, transparent);\n}\n.mova-anime-filter:focus-visible {\n  outline: 2px solid color-mix(in oklab, var(--mova-anime-accent) 58%, transparent);\n  outline-offset: 2px;\n}\n.mova-anime-preview {\n  --mova-anime-accent: rgb(91 184 148);\n  --mova-anime-accent-bright: rgb(139 216 180);\n  --mova-anime-accent-strong: rgb(63 159 119);\n  --mova-anime-accent-deep: rgb(39 122 91);\n}\n.mova-anime-preview :is([class*=bg-blue-], [class*=bg-sky-], [class*=bg-cyan-], [class*=bg-indigo-], [class*=bg-violet-], [class*=bg-purple-], [class*=bg-fuchsia-], [class*=bg-rose-], [class*=bg-pink-], [class*=bg-red-], [class*=bg-orange-], [class*=bg-amber-], [class*=bg-yellow-], [class*=bg-lime-], [class*=bg-teal-]) {\n  background-color: var(--mova-anime-accent) !important;\n}\n.mova-anime-preview :is([class*=bg-blue-300], [class*=bg-blue-400], [class*=bg-sky-300], [class*=bg-sky-400], [class*=bg-cyan-300], [class*=bg-cyan-400], [class*=bg-indigo-300], [class*=bg-indigo-400], [class*=bg-violet-300], [class*=bg-violet-400], [class*=bg-purple-300], [class*=bg-purple-400], [class*=bg-rose-300], [class*=bg-rose-400], [class*=bg-pink-300], [class*=bg-pink-400], [class*=bg-red-300], [class*=bg-red-400], [class*=bg-orange-300], [class*=bg-orange-400], [class*=bg-amber-300], [class*=bg-amber-400], [class*=bg-yellow-300], [class*=bg-yellow-400], [class*=bg-lime-300], [class*=bg-lime-400], [class*=bg-teal-300], [class*=bg-teal-400]) {\n  background-color: var(--mova-anime-accent-bright) !important;\n}\n.mova-anime-preview :is([class*=bg-blue-600], [class*=bg-blue-700], [class*=bg-blue-800], [class*=bg-sky-600], [class*=bg-sky-700], [class*=bg-cyan-600], [class*=bg-cyan-700], [class*=bg-indigo-600], [class*=bg-indigo-700], [class*=bg-violet-600], [class*=bg-violet-700], [class*=bg-purple-600], [class*=bg-purple-700], [class*=bg-rose-600], [class*=bg-rose-700], [class*=bg-pink-600], [class*=bg-pink-700], [class*=bg-red-600], [class*=bg-red-700], [class*=bg-orange-600], [class*=bg-orange-700], [class*=bg-amber-600], [class*=bg-amber-700], [class*=bg-yellow-600], [class*=bg-yellow-700], [class*=bg-lime-600], [class*=bg-lime-700], [class*=bg-teal-600], [class*=bg-teal-700]) {\n  background-color: var(--mova-anime-accent-deep) !important;\n}\n.mova-anime-preview :is([class~=bg-blue-50], [class~=\"hover:bg-blue-50\"], [class~=bg-sky-50], [class~=bg-cyan-50], [class~=bg-indigo-50], [class~=bg-violet-50], [class~=bg-purple-50], [class~=bg-rose-50], [class~=bg-pink-50], [class~=bg-red-50], [class~=bg-orange-50], [class~=bg-amber-50], [class~=bg-yellow-50], [class~=bg-lime-50], [class~=bg-teal-50], [class*=\"bg-amber-50/\"], [class*=\"bg-rose-50/\"]) {\n  background-color: color-mix(in oklab, var(--mova-anime-accent) 11%, white) !important;\n}\n.mova-anime-preview :is([class*=\"bg-blue-300/\"], [class*=\"bg-blue-400/\"], [class*=\"bg-blue-500/\"], [class*=\"bg-blue-600/\"], [class*=\"bg-sky-300/\"], [class*=\"bg-sky-400/\"], [class*=\"bg-sky-500/\"], [class*=\"bg-cyan-300/\"], [class*=\"bg-cyan-400/\"], [class*=\"bg-cyan-500/\"], [class*=\"bg-indigo-400/\"], [class*=\"bg-indigo-500/\"], [class*=\"bg-purple-400/\"], [class*=\"bg-purple-500/\"], [class*=\"bg-violet-400/\"], [class*=\"bg-violet-500/\"], [class*=\"bg-fuchsia-400/\"], [class*=\"bg-fuchsia-500/\"], [class*=\"bg-rose-400/\"], [class*=\"bg-rose-500/\"], [class*=\"bg-pink-400/\"], [class*=\"bg-pink-500/\"], [class*=\"bg-red-400/\"], [class*=\"bg-red-500/\"], [class*=\"bg-orange-400/\"], [class*=\"bg-orange-500/\"], [class*=\"bg-amber-400/\"], [class*=\"bg-amber-500/\"], [class*=\"bg-yellow-400/\"], [class*=\"bg-yellow-500/\"], [class*=\"bg-lime-400/\"], [class*=\"bg-lime-500/\"], [class*=\"bg-teal-400/\"], [class*=\"bg-teal-500/\"]) {\n  background-color: color-mix(in oklab, var(--mova-anime-accent) 20%, transparent) !important;\n}\n.mova-anime-preview :is([class*=text-blue-], [class*=text-sky-], [class*=text-cyan-], [class*=text-indigo-], [class*=text-violet-], [class*=text-purple-], [class*=text-fuchsia-], [class*=text-rose-], [class*=text-pink-], [class*=text-red-], [class*=text-orange-], [class*=text-amber-], [class*=text-yellow-], [class*=text-lime-], [class*=text-teal-]) {\n  color: var(--mova-anime-accent-bright) !important;\n}\n.mova-anime-preview :is([class*=text-blue-500], [class*=text-blue-600], [class*=text-blue-700], [class*=text-sky-500], [class*=text-sky-600], [class*=text-cyan-500], [class*=text-cyan-600], [class*=text-indigo-500], [class*=text-indigo-600], [class*=text-violet-500], [class*=text-violet-600], [class*=text-purple-500], [class*=text-purple-600], [class*=text-rose-500], [class*=text-rose-600], [class*=text-pink-500], [class*=text-pink-600], [class*=text-red-500], [class*=text-red-600], [class*=text-orange-500], [class*=text-orange-600], [class*=text-amber-500], [class*=text-amber-600], [class*=text-yellow-500], [class*=text-yellow-600], [class*=text-lime-500], [class*=text-lime-600], [class*=text-teal-500], [class*=text-teal-600]) {\n  color: var(--mova-anime-accent-strong) !important;\n}\n.mova-anime-preview :is([class*=border-blue-], [class*=border-sky-], [class*=border-cyan-], [class*=border-indigo-], [class*=border-violet-], [class*=border-purple-], [class*=border-fuchsia-], [class*=border-rose-], [class*=border-pink-], [class*=border-red-], [class*=border-orange-], [class*=border-amber-], [class*=border-yellow-], [class*=border-lime-], [class*=border-teal-]) {\n  border-color: var(--mova-anime-accent) !important;\n}\n.mova-anime-preview :is([class*=border-blue-200], [class*=border-sky-200], [class*=border-cyan-200], [class*=border-indigo-200], [class*=border-violet-200], [class*=border-purple-200], [class*=border-rose-200], [class*=border-pink-200], [class*=border-red-200], [class*=border-orange-200], [class*=border-amber-200], [class*=border-yellow-200], [class*=border-lime-200], [class*=border-teal-200]) {\n  border-color: color-mix(in oklab, var(--mova-anime-accent) 38%, white) !important;\n}\n.mova-anime-preview :is([class*=border-blue-400], [class*=border-blue-500], [class*=border-sky-400], [class*=border-sky-500], [class*=border-cyan-400], [class*=border-cyan-500], [class*=border-indigo-400], [class*=border-indigo-500], [class*=border-violet-400], [class*=border-violet-500], [class*=border-purple-400], [class*=border-purple-500], [class*=border-rose-400], [class*=border-rose-500], [class*=border-pink-400], [class*=border-pink-500], [class*=border-red-400], [class*=border-red-500], [class*=border-orange-400], [class*=border-orange-500], [class*=border-amber-400], [class*=border-amber-500], [class*=border-yellow-400], [class*=border-yellow-500], [class*=border-lime-400], [class*=border-lime-500], [class*=border-teal-400], [class*=border-teal-500]) {\n  border-color: var(--mova-anime-accent-strong) !important;\n}\n.mova-anime-preview :is([class*=\"border-blue-500/\"], [class*=\"border-sky-500/\"], [class*=\"border-cyan-500/\"], [class*=\"border-indigo-500/\"], [class*=\"border-violet-500/\"], [class*=\"border-purple-500/\"], [class*=\"border-rose-500/\"], [class*=\"border-pink-500/\"], [class*=\"border-red-500/\"], [class*=\"border-orange-500/\"], [class*=\"border-amber-500/\"], [class*=\"border-yellow-500/\"], [class*=\"border-lime-500/\"], [class*=\"border-teal-500/\"]) {\n  border-color: color-mix(in oklab, var(--mova-anime-accent) 38%, transparent) !important;\n}\n.mova-anime-preview :is([class*=fill-blue-], [class*=fill-sky-], [class*=fill-cyan-], [class*=fill-indigo-], [class*=fill-violet-], [class*=fill-purple-], [class*=fill-fuchsia-], [class*=fill-rose-], [class*=fill-pink-], [class*=fill-red-], [class*=fill-orange-], [class*=fill-amber-], [class*=fill-yellow-], [class*=fill-lime-], [class*=fill-teal-]) {\n  fill: var(--mova-anime-accent-bright) !important;\n}\n.mova-anime-preview :is([class*=stroke-blue-], [class*=stroke-sky-], [class*=stroke-cyan-], [class*=stroke-indigo-], [class*=stroke-violet-], [class*=stroke-purple-], [class*=stroke-fuchsia-], [class*=stroke-rose-], [class*=stroke-pink-], [class*=stroke-red-], [class*=stroke-orange-], [class*=stroke-amber-], [class*=stroke-yellow-], [class*=stroke-lime-], [class*=stroke-teal-]) {\n  stroke: var(--mova-anime-accent-bright) !important;\n}\n.mova-anime-preview :is([class*=ring-blue-], [class*=ring-sky-], [class*=ring-cyan-], [class*=ring-indigo-], [class*=ring-violet-], [class*=ring-purple-], [class*=ring-fuchsia-], [class*=ring-rose-], [class*=ring-pink-], [class*=ring-red-], [class*=ring-orange-], [class*=ring-amber-], [class*=ring-yellow-], [class*=ring-lime-], [class*=ring-teal-]) {\n  --tw-ring-color: var(--mova-anime-accent) !important;\n}\n.mova-anime-preview :is([class*=shadow-blue-], [class*=shadow-sky-], [class*=shadow-cyan-], [class*=shadow-indigo-], [class*=shadow-violet-], [class*=shadow-purple-], [class*=shadow-fuchsia-], [class*=shadow-rose-], [class*=shadow-pink-], [class*=shadow-red-], [class*=shadow-orange-], [class*=shadow-amber-], [class*=shadow-yellow-], [class*=shadow-lime-], [class*=shadow-teal-]) {\n  --tw-shadow-color: var(--mova-anime-accent) !important;\n}\n.mova-anime-preview :is([class*=drop-shadow-blue-], [class*=drop-shadow-sky-], [class*=drop-shadow-cyan-], [class*=drop-shadow-indigo-], [class*=drop-shadow-violet-], [class*=drop-shadow-purple-], [class*=drop-shadow-fuchsia-], [class*=drop-shadow-rose-], [class*=drop-shadow-pink-], [class*=drop-shadow-red-], [class*=drop-shadow-orange-], [class*=drop-shadow-amber-], [class*=drop-shadow-yellow-], [class*=drop-shadow-lime-], [class*=drop-shadow-teal-]) {\n  filter: drop-shadow(0 0 8px color-mix(in oklab, var(--mova-anime-accent) 50%, transparent)) !important;\n}\n.mova-anime-preview :is([class*=\"text-[#0071e3]\"], [class*=\"text-[#0a84ff]\"], [class*=\"text-[#34aadc]\"], [class*=\"text-[#64d2ff]\"], [class*=\"text-[#3b82f6]\"], [class*=\"text-[#60a5fa]\"], [class*=\"text-[#2563eb]\"], [class*=\"text-[#1d4ed8]\"], [class*=\"text-[#4f46e5]\"], [class*=\"text-[#6366f1]\"]) {\n  color: var(--mova-anime-accent-bright) !important;\n}\n.mova-anime-preview :is([class*=\"bg-[#0071e3]\"], [class*=\"bg-[#0a84ff]\"], [class*=\"bg-[#34aadc]\"], [class*=\"bg-[#64d2ff]\"], [class*=\"bg-[#3b82f6]\"], [class*=\"bg-[#60a5fa]\"], [class*=\"bg-[#2563eb]\"], [class*=\"bg-[#1d4ed8]\"], [class*=\"bg-[#0284c7]\"], [class*=\"bg-[#4f46e5]\"], [class*=\"bg-[#6366f1]\"]) {\n  background-color: var(--mova-anime-accent) !important;\n}\n.mova-anime-preview [style*=background-color] {\n  background-color: var(--mova-anime-accent) !important;\n}\n.mova-anime-preview :is([stroke=\"#0071e3\"], [stroke=\"#0a84ff\"], [stroke=\"#34aadc\"], [stroke=\"#64d2ff\"], [stroke=\"#3b82f6\"], [stroke=\"#60a5fa\"], [stroke=\"#2563eb\"], [stroke=\"#1d4ed8\"], [stroke=\"#0284c7\"], [stroke=\"#4f46e5\"], [stroke=\"#6366f1\"]) {\n  stroke: var(--mova-anime-accent-bright) !important;\n}\n.mova-anime-preview :is([fill=\"#0071e3\"], [fill=\"#0a84ff\"], [fill=\"#34aadc\"], [fill=\"#64d2ff\"], [fill=\"#3b82f6\"], [fill=\"#60a5fa\"], [fill=\"#2563eb\"], [fill=\"#1d4ed8\"], [fill=\"#0284c7\"], [fill=\"#4f46e5\"], [fill=\"#6366f1\"]) {\n  fill: var(--mova-anime-accent-bright) !important;\n}\n.mova-anime-preview .blue-matrix-loader {\n  --color-blue-400: var(--mova-anime-accent-bright) !important;\n  --color-blue-500: var(--mova-anime-accent) !important;\n  --color-blue-600: var(--mova-anime-accent-strong) !important;\n  --color-blue-700: var(--mova-anime-accent-deep) !important;\n}\n.mova-anime-preview .bookmark-mark,\n.mova-anime-preview .bookmark-mark::after,\n.mova-anime-preview .tissue-paper1,\n.mova-anime-preview .tissue-paper2 {\n  --c: var(--mova-anime-accent) !important;\n  background-color: var(--mova-anime-accent) !important;\n}\n.mova-anime-preview .bookmark-kira {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M16 0C17.2 11.5 20.5 14.8 32 16C20.5 17.2 17.2 20.5 16 32C14.8 20.5 11.5 17.2 0 16C11.5 14.8 14.8 11.5 16 0Z' fill='%238bd8b4'/%3E%3C/svg%3E\") !important;\n}\n.mova-anime-preview .curtain-cloth::before {\n  background-color: var(--mova-anime-accent-deep) !important;\n}\n.mova-anime-preview .curtain-zipper-wrapper {\n  background-color: var(--mova-anime-accent-strong) !important;\n}\n.mova-anime-preview .curtain-zipper {\n  background-color: var(--mova-anime-accent-bright) !important;\n}\n@media (prefers-reduced-motion: reduce) {\n  .mova-anime-preview *,\n  .mova-anime-preview *::before,\n  .mova-anime-preview *::after {\n    animation-duration: 1ms !important;\n    animation-delay: 0ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 1ms !important;\n    transition-delay: 0ms !important;\n    scroll-behavior: auto !important;\n  }\n}\n",
+  "usage": "import MovaComponent from './accordion-blind';\n\nexport default function Demo() {\n  return <MovaComponent />;\n}",
+  "exports": [
+    "default"
+  ]
+}

package/registry/analyzing-image.json

@@ -0,0 +1,13 @@
+{
+  "id": "analyzing-image",
+  "file": "analyzing-image.tsx",
+  "content": "\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\nimport React from 'react';\nimport { motion } from 'motion/react';\n\n// Adapted from Loading UI's analyzing-image component.\n// Source: https://github.com/turbostarter/loading-ui/blob/main/registry/components/loading-ui/analyzing-image.tsx\n// License: MIT; see ./loading-ui.LICENSE. Original animation credit: dmytro.\n\nconst transition = {\n  duration: 2.5,\n  ease: [0.175, 0.885, 0.32, 1] as [number, number, number, number],\n  times: [0, 0.6, 0.6, 1],\n  repeat: Infinity,\n  repeatType: 'mirror' as const,\n  repeatDelay: 0.2,\n};\n\nexport function AnalyzingImage({\n  className = '',\n  ...props\n}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      role=\"status\"\n      aria-label=\"Analyzing image\"\n      className={`mova-analyzing-image relative isolate shrink-0 ${className}`}\n      {...props}\n    >\n      <motion.div\n        initial={{ clipPath: 'inset(0% 0% 0% 0%)' }}\n        animate={{\n          clipPath: [\n            'inset(0% 0% 0% 0%)',\n            'inset(0% 105% 0% 0%)',\n            'inset(0% 105% 0% 0%)',\n            'inset(0% 0% 0% 0%)',\n          ],\n        }}\n        transition={transition}\n        className=\"absolute inset-0 z-10\"\n        style={{\n          background: 'var(--loading-ui-analyzing-image-background, var(--mova-loader-surface, #000))',\n        }}\n      >\n        <svg\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          className=\"w-full h-full\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M4.27209 20.7279L10.8686 14.1314C11.2646 13.7354 11.4627 13.5373 11.691 13.4632C11.8918 13.3979 12.1082 13.3979 12.309 13.4632C12.5373 13.5373 12.7354 13.7354 13.1314 14.1314L19.6839 20.6839M14 15L16.8686 12.1314C17.2646 11.7354 17.4627 11.5373 17.691 11.4632C17.8918 11.3979 18.1082 11.3979 18.309 11.4632C18.5373 11.5373 18.7354 11.7354 19.1314 12.1314L22 15M10 9C10 10.1046 9.10457 11 8 11C6.89543 11 6 10.1046 6 9C6 7.89543 6.89543 7 8 7C9.10457 7 10 7.89543 10 9ZM6.8 21H17.2C18.8802 21 19.7202 21 20.362 20.673C20.9265 20.3854 21.3854 19.9265 21.673 19.362C22 18.7202 22 17.8802 22 16.2V7.8C22 6.11984 22 5.27976 21.673 4.63803C21.3854 4.07354 20.9265 3.6146 20.362 3.32698C19.7202 3 18.8802 3 17.2 3H6.8C5.11984 3 4.27976 3 3.63803 3.32698C3.07354 3.6146 2.6146 4.07354 2.32698 4.63803C2 5.27976 2 6.11984 2 7.8V16.2C2 17.8802 2 18.7202 2.32698 19.362C2.6146 19.9265 3.07354 20.3854 3.63803 20.673C4.27976 21 5.11984 21 6.8 21Z\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1.5\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      </motion.div>\n      <motion.div\n        initial={{ transform: 'translateX(1400%)' }}\n        animate={{\n          transform: [\n            'translateX(1400%)',\n            'translateX(-80%)',\n            'translateX(-80%)',\n            'translateX(1400%)',\n          ],\n        }}\n        transition={transition}\n        className=\"absolute z-10 h-full w-[7%] rounded-full bg-current\"\n      />\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        className=\"absolute inset-0 w-full h-full\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M6.8 21H17.2C18.8802 21 19.7202 21 20.362 20.673C20.9265 20.3854 21.3854 19.9265 21.673 19.362C22 18.7202 22 17.8802 22 16.2V7.8C22 6.11984 22 5.27976 21.673 4.63803C21.3854 4.07354 20.9265 3.6146 20.362 3.32698C19.7202 3 18.8802 3 17.2 3H6.8C5.11984 3 4.27976 3 3.63803 3.32698C3.07354 3.6146 2.6146 4.07354 2.32698 4.63803C2 5.27976 2 6.11984 2 7.8V16.2C2 17.8802 2 18.7202 2.32698 19.362C2.6146 19.9265 3.07354 20.3854 3.63803 20.673C4.27976 21 5.11984 21 6.8 21Z\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.5\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n        <rect x=\"6\" y=\"19\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"7\" y=\"18\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"7\" y=\"19\" width=\"3\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"9\" y=\"18\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"14\" y=\"19\" width=\"3\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"15\" y=\"18\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"5\" y=\"18\" width=\"2\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"5\" y=\"17\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"10\" y=\"19\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"7\" y=\"17\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"11\" y=\"19\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"10\" y=\"18\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"17\" y=\"19\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"15\" y=\"4\" width=\"2\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"3\" y=\"9\" width=\"1\" height=\"3\" fill=\"currentColor\" />\n        <rect x=\"4\" y=\"10\" width=\"1\" height=\"2\" fill=\"currentColor\" />\n        <rect x=\"6\" y=\"9\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"15\" y=\"5\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"20\" y=\"8\" width=\"1\" height=\"3\" fill=\"currentColor\" />\n        <rect x=\"19\" y=\"9\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"7\" y=\"13\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"9\" y=\"11\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"16\" y=\"12\" width=\"1\" height=\"2\" fill=\"currentColor\" />\n        <rect x=\"13\" y=\"14\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"12\" y=\"11\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"10\" y=\"9\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"10\" y=\"15\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"10\" y=\"13\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"15\" y=\"9\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"13\" y=\"10\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"12\" y=\"14\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"5\" y=\"4\" width=\"3\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"6\" y=\"5\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"7\" y=\"14\" width=\"1\" height=\"2\" fill=\"currentColor\" />\n        <rect x=\"6\" y=\"14\" width=\"3\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"16\" y=\"8\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"8\" y=\"9\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"20\" y=\"16\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"12\" y=\"12\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"8\" y=\"8\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"14\" y=\"12\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"17\" y=\"16\" width=\"2\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"14\" y=\"17\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"11\" y=\"5\" width=\"3\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"12\" y=\"4\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"12\" y=\"7\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"7\" y=\"11\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"15\" y=\"15\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"11\" y=\"11\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"13\" y=\"9\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"12\" y=\"15\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"9\" y=\"12\" width=\"2\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"19\" y=\"13\" width=\"2\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"9\" y=\"6\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"20\" y=\"4\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"19\" y=\"4\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n        <rect x=\"3\" y=\"15\" width=\"1\" height=\"2\" fill=\"currentColor\" />\n        <rect x=\"3\" y=\"19\" width=\"1\" height=\"1\" fill=\"currentColor\" />\n      </svg>\n      <span className=\"sr-only\">Analyzing image</span>\n    </div>\n  );\n}\n",
+  "dependencies": [
+    "motion"
+  ],
+  "css": "",
+  "usage": "import { AnalyzingImage } from './analyzing-image';\n\nexport default function Demo() {\n  return <AnalyzingImage />;\n}",
+  "exports": [
+    "AnalyzingImage"
+  ]
+}