{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "morphing-sidebar-controls",
  "type": "registry:component",
  "title": "Morphing Sidebar Controls",
  "description": "A premium morphing sidebar control panel with progressive configuration, motion presets, and animated layout transitions for advanced animation workflows.",
  "dependencies": [
    "@hugeicons/core-free-icons",
    "@hugeicons/react",
    "motion"
  ],
  "files": [
    {
      "path": "components/watermelon/morphing-sidebar-controls.tsx",
      "type": "registry:component",
      "content": "import {\n  ArrowLeft02Icon,\n  ArrowRight04Icon,\n  PlayIcon,\n  PlusSignIcon,\n  ZapIcon,\n} from '@hugeicons/core-free-icons';\nimport { HugeiconsIcon } from '@hugeicons/react';\nimport { useState } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\n\nexport interface MorphingSidebarControlsProps {\n  title?: string;\n  configOptions?: { label: string; value: string | number }[];\n  primaryFeatureName?: string;\n  secondaryFeatureName?: string;\n  asymmetricOptionsName?: string;\n  tabs?: [string, string];\n  types?: string[];\n  easeOptions?: { icons: React.ReactNode; title: string }[];\n  sliderConfigs?: {\n    name: string;\n    insertion: [string | number, string | number];\n    removal: [string | number, string | number];\n  }[];\n  onAddProperty?: () => void;\n  onFeatureToggle?: (isActive: boolean) => void;\n  onAsymmetricToggle?: (isActive: boolean) => void;\n  onTabChange?: (tab: string) => void;\n  onTypeChange?: (type: string) => void;\n  onEaseChange?: (easeTitle: string) => void;\n}\n\nexport default function MorphingSidebarControls({\n  title = 'Configuration',\n  configOptions = [\n    { label: 'Width', value: '300' },\n    { label: 'Height', value: '300' },\n  ],\n  primaryFeatureName = 'Visual Change',\n  secondaryFeatureName = 'Transition',\n  asymmetricOptionsName = 'Asymmetric',\n  tabs = ['Insertion', 'Removal'],\n  types = ['Spring', 'Cubic'],\n  easeOptions,\n  sliderConfigs = [\n    {\n      name: 'Opacity',\n      insertion: ['0', '1'],\n      removal: ['1', '0'],\n    },\n    {\n      name: 'Blur',\n      insertion: ['16', '0'],\n      removal: ['0', '16'],\n    },\n  ],\n  onAddProperty,\n  onFeatureToggle,\n  onAsymmetricToggle,\n  onTabChange,\n  onTypeChange,\n  onEaseChange,\n}: MorphingSidebarControlsProps) {\n  const [isAsymmetric, setIsAsymmetric] = useState(false);\n  const [isTransition, setIsTransition] = useState(false);\n  const [activeTab, setActiveTab] = useState<string>(tabs[0]);\n  const [activeType, setActiveType] = useState<string>(types[0]);\n  const [activeEase, setActiveEase] = useState<string>('Smooth');\n  const [isMotion, setIsMotion] = useState(false);\n\n  const handleFeatureToggle = () => {\n    const newState = !isTransition;\n    setIsTransition(newState);\n    onFeatureToggle?.(newState);\n  };\n\n  const handleAsymmetricToggle = () => {\n    const newState = !isAsymmetric;\n    setIsAsymmetric(newState);\n    onAsymmetricToggle?.(newState);\n  };\n\n  const handleTabChange = (tab: string) => {\n    setActiveTab(tab);\n    onTabChange?.(tab);\n  };\n\n  const handleTypeChange = (type: string) => {\n    setActiveType(type);\n    onTypeChange?.(type);\n  };\n\n  const handleEaseChange = (easeTitle: string) => {\n    setActiveEase(easeTitle);\n    onEaseChange?.(easeTitle);\n  };\n\n  const resolvedEaseOptions = easeOptions || [\n    { icons: <SmoothCurve />, title: 'Smooth' },\n    { icons: <Bouncy />, title: 'Bouncy' },\n    { icons: <Snappy />, title: 'Snappy' },\n    { icons: <Custom />, title: 'Custom' },\n  ];\n\n  return (\n    <div className=\"flex w-[350px] flex-col gap-3 rounded-3xl bg-neutral-100 p-3 transition-colors duration-300 dark:bg-neutral-900/50\">\n      <div className=\"flex w-full items-center justify-between gap-1 p-2\">\n        <div className=\"flex w-full items-center justify-between\">\n          <AnimatePresence mode=\"popLayout\">\n            {isMotion && (\n              <motion.div\n                layoutId=\"icon\"\n                key=\"left-button\"\n                initial={{ opacity: 0, rotate: 45, filter: 'blur(4px)' }}\n                animate={{ opacity: 1, rotate: 0, filter: 'blur(0px)' }}\n                exit={{ opacity: 0, rotate: 45, filter: 'blur(4px)' }}\n                transition={{ type: 'spring', bounce: 0.25, duration: 0.5 }}\n                onClick={() => setIsMotion(!isMotion)}\n                className=\"cursor-pointer rounded-full bg-neutral-900 p-2\"\n              >\n                <HugeiconsIcon\n                  icon={ArrowLeft02Icon}\n                  className=\"size-4 rounded-full fill-neutral-50 text-neutral-100\"\n                />\n              </motion.div>\n            )}\n\n            {!isMotion && (\n              <motion.p\n                key=\"title\"\n                initial={{\n                  opacity: 0,\n                  filter: 'blur(4px)',\n                  x: -20,\n                }}\n                animate={{\n                  opacity: 1,\n                  filter: 'blur(0px)',\n                  x: 0,\n                }}\n                exit={{\n                  opacity: 0,\n                  filter: 'blur(4px)',\n                  x: -20,\n                }}\n                transition={{ type: 'spring', bounce: 0.25, duration: 0.5 }}\n                className=\"text-neutral-1000 font-semibold tracking-tight dark:text-neutral-400\"\n              >\n                {title}\n              </motion.p>\n            )}\n\n            {isMotion && (\n              <motion.p\n                key=\"motion-text\"\n                initial={{\n                  opacity: 0,\n                  filter: 'blur(4px)',\n                  x: 10,\n                }}\n                animate={{\n                  opacity: 1,\n                  filter: 'blur(0px)',\n                  x: 0,\n                }}\n                exit={{\n                  opacity: 0,\n                  filter: 'blur(4px)',\n                  x: 10,\n                }}\n                transition={{ type: 'spring', bounce: 0.3, duration: 0.5 }}\n                className=\"text-neutral-1000 mr-24 font-semibold tracking-tight dark:text-neutral-400\"\n              >\n                Motion\n              </motion.p>\n            )}\n\n            {!isMotion && (\n              <motion.div\n                layoutId=\"icon\"\n                key=\"right-button\"\n                initial={{ opacity: 0, rotate: 45, filter: 'blur(4px)' }}\n                animate={{ opacity: 1, rotate: 0, filter: 'blur(0px)' }}\n                exit={{ opacity: 0, rotate: 45, filter: 'blur(4px)' }}\n                transition={{ type: 'spring', bounce: 0.25, duration: 0.5 }}\n                onClick={() => setIsMotion(!isMotion)}\n                className=\"cursor-pointer rounded-full bg-neutral-900 p-2\"\n              >\n                <HugeiconsIcon\n                  icon={ZapIcon}\n                  className=\"size-4 rounded-full fill-neutral-50 text-neutral-100\"\n                />\n              </motion.div>\n            )}\n          </AnimatePresence>\n        </div>\n        <div className=\"cursor-pointer rounded-full bg-neutral-900 p-2\">\n          <HugeiconsIcon\n            icon={PlayIcon}\n            className=\"size-4 rounded-full fill-neutral-50 text-neutral-100\"\n          />\n        </div>\n      </div>\n\n      <AnimatePresence mode=\"popLayout\">\n        {!isMotion && (\n          <motion.div\n            key=\"config-panel\"\n            initial={{ opacity: 0, y: 50, filter: 'blur(4px)' }}\n            animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}\n            exit={{ opacity: 0, y: 50, filter: 'blur(4px)' }}\n            transition={{ type: 'spring', bounce: 0.25, duration: 0.5 }}\n            className=\"flex h-full w-full flex-col gap-3\"\n          >\n            <div className=\"flex w-full flex-col items-center gap-3 rounded-3xl bg-neutral-200 p-3 transition-colors duration-300 dark:bg-neutral-900\">\n              <div className=\"flex w-full items-center gap-12\">\n                {configOptions.slice(0, 2).map((option, idx) => (\n                  <div\n                    key={idx}\n                    className=\"flex w-full items-center justify-between gap-3 rounded-2xl bg-neutral-100 px-4 py-3 transition-colors duration-300 dark:bg-neutral-800\"\n                  >\n                    <p className=\"text-neutral-1000 font-semibold tracking-tight dark:text-neutral-400\">\n                      {option.label}\n                    </p>\n                    <p className=\"text-neutral-1000 font-semibold tracking-tight dark:text-neutral-300\">\n                      {option.value}\n                    </p>\n                  </div>\n                ))}\n              </div>\n            </div>\n\n            <div className=\"flex w-full flex-col items-center gap-3 rounded-3xl bg-neutral-200 p-1 transition-colors duration-300 dark:bg-neutral-900\">\n              <div className=\"flex w-full flex-col items-center p-3\">\n                <div\n                  onClick={handleFeatureToggle}\n                  className=\"relative z-30 flex w-full cursor-pointer items-center justify-between gap-3 rounded-2xl bg-neutral-100 px-4 py-3 transition-colors duration-300 dark:bg-neutral-800\"\n                >\n                  <div className=\"relative flex h-6 flex-1 items-center\">\n                    <AnimatePresence mode=\"popLayout\">\n                      <motion.div\n                        key={\n                          isTransition\n                            ? secondaryFeatureName\n                            : primaryFeatureName\n                        }\n                        className=\"absolute flex font-semibold tracking-tight text-neutral-700 dark:text-neutral-200\"\n                        initial=\"hidden\"\n                        animate=\"visible\"\n                        exit=\"exit\"\n                        variants={{\n                          visible: {\n                            transition: { staggerChildren: 0.02 },\n                          },\n                          exit: {\n                            transition: { staggerChildren: 0.005 },\n                          },\n                        }}\n                      >\n                        {(isTransition\n                          ? secondaryFeatureName\n                          : primaryFeatureName\n                        )\n                          .split('')\n                          .map((char, index) => (\n                            <motion.span\n                              key={index}\n                              variants={{\n                                hidden: {\n                                  opacity: 0,\n                                  y: 10,\n                                  filter: 'blur(1px)',\n                                },\n                                visible: {\n                                  opacity: 1,\n                                  y: 0,\n                                  filter: 'blur(0px)',\n                                },\n                                exit: {\n                                  opacity: 0,\n                                  y: -10,\n                                  filter: 'blur(1px)',\n                                },\n                              }}\n                              className=\"whitespace-pre\"\n                            >\n                              {char}\n                            </motion.span>\n                          ))}\n                      </motion.div>\n                    </AnimatePresence>\n                  </div>\n                  <UnfoldMore />\n                </div>\n\n                <AnimatePresence>\n                  {isTransition && (\n                    <motion.div\n                      key=\"asymmetric-toggle-container\"\n                      initial={{\n                        height: 0,\n                        opacity: 0,\n                        filter: 'blur(4px)',\n                        y: -50,\n                      }}\n                      animate={{\n                        height: 'auto',\n                        opacity: 1,\n                        filter: 'blur(0px)',\n                        y: 0,\n                      }}\n                      exit={{\n                        height: 0,\n                        opacity: 0,\n                        filter: 'blur(4px)',\n                        y: -50,\n                      }}\n                      transition={{ duration: 0.3, ease: 'easeOut' }}\n                      className=\"w-full overflow-hidden\"\n                    >\n                      <div className=\"mt-3 flex w-full items-center justify-between gap-3 rounded-2xl bg-neutral-100 px-4 py-3 transition-colors duration-300 dark:bg-neutral-800\">\n                        <p className=\"font-semibold tracking-tight text-neutral-700 dark:text-neutral-200\">\n                          {asymmetricOptionsName}\n                        </p>\n                        <button\n                          onClick={handleAsymmetricToggle}\n                          className={`flex h-7 w-12 cursor-pointer rounded-full p-0.5 shadow-inner transition-colors duration-300 ease-in-out ${\n                            isAsymmetric\n                              ? 'bg-neutral-800 dark:bg-neutral-100'\n                              : 'bg-neutral-300 dark:bg-neutral-600'\n                          }`}\n                        >\n                          <motion.div\n                            layout\n                            initial={{ x: 0 }}\n                            animate={{ x: isAsymmetric ? 20 : 0 }}\n                            transition={{ duration: 0.2, ease: 'easeInOut' }}\n                            className=\"size-6 rounded-full bg-white shadow-sm dark:bg-neutral-900\"\n                          />\n                        </button>\n                      </div>\n                    </motion.div>\n                  )}\n                </AnimatePresence>\n              </div>\n\n              <div className=\"flex w-full flex-col items-center rounded-2xl bg-neutral-100 p-3 transition-colors duration-300 dark:bg-neutral-800\">\n                <AnimatePresence>\n                  {isAsymmetric && (\n                    <motion.div\n                      key=\"asymmetric-tabs-container\"\n                      initial={{\n                        height: 0,\n                        opacity: 0,\n                        filter: 'blur(4px)',\n                        y: -50,\n                      }}\n                      animate={{\n                        height: 'auto',\n                        opacity: 1,\n                        filter: 'blur(0px)',\n                        y: 0,\n                      }}\n                      exit={{\n                        height: 0,\n                        opacity: 0,\n                        filter: 'blur(4px)',\n                        y: -50,\n                      }}\n                      transition={{\n                        type: 'spring',\n                        bounce: 0.45,\n                        duration: 0.8,\n                      }}\n                      className=\"w-full overflow-hidden\"\n                    >\n                      <div className=\"relative z-20 mb-3 flex w-full items-center justify-between rounded-2xl bg-neutral-200 p-0.5 transition-colors duration-300 dark:bg-neutral-900\">\n                        <button\n                          onClick={() => handleTabChange(tabs[0])}\n                          className=\"relative z-10 w-full py-2 text-center font-semibold tracking-tight text-neutral-700 dark:text-neutral-200\"\n                        >\n                          {tabs[0]}\n                          {activeTab === tabs[0] && (\n                            <motion.span\n                              layoutId=\"progressive-disclosure-tab\"\n                              className=\"absolute inset-0 -z-10 rounded-xl bg-neutral-100 shadow-sm dark:bg-neutral-800\"\n                              transition={{\n                                type: 'spring',\n                                bounce: 0.4,\n                                duration: 0.5,\n                              }}\n                            />\n                          )}\n                        </button>\n                        <button\n                          onClick={() => handleTabChange(tabs[1])}\n                          className=\"relative z-10 w-full py-2 text-center font-semibold tracking-tight text-neutral-700 dark:text-neutral-200\"\n                        >\n                          {tabs[1]}\n                          {activeTab === tabs[1] && (\n                            <motion.span\n                              layoutId=\"progressive-disclosure-tab\"\n                              className=\"absolute inset-0 -z-10 rounded-xl bg-neutral-100 shadow-sm dark:bg-neutral-800\"\n                              transition={{\n                                type: 'spring',\n                                bounce: 0.4,\n                                duration: 0.5,\n                              }}\n                            />\n                          )}\n                        </button>\n                      </div>\n                    </motion.div>\n                  )}\n                </AnimatePresence>\n\n                {sliderConfigs.map((config, idx) => {\n                  const val1 =\n                    activeTab === tabs[0]\n                      ? config.insertion[0]\n                      : config.removal[0];\n                  const val2 =\n                    activeTab === tabs[0]\n                      ? config.insertion[1]\n                      : config.removal[1];\n\n                  return (\n                    <div\n                      key={idx}\n                      className=\"mb-3 flex w-full items-center justify-between px-1\"\n                    >\n                      <p className=\"font-semibold tracking-tight text-zinc-500 dark:text-zinc-400\">\n                        {config.name}\n                      </p>\n                      <div className=\"flex h-full w-[175px] items-center justify-around rounded-2xl bg-neutral-200 px-5 py-2 transition-colors duration-300 dark:bg-neutral-900\">\n                        <div className=\"relative flex h-6 w-6 items-center justify-center\">\n                          <AnimatePresence mode=\"popLayout\">\n                            <motion.p\n                              key={`${config.name}-left-${val1}`}\n                              initial={{ opacity: 0, y: -10 }}\n                              animate={{ opacity: 1, y: 0 }}\n                              exit={{ opacity: 0, y: 10 }}\n                              transition={{ duration: 0.2 }}\n                              className=\"absolute font-semibold tracking-tight text-neutral-700 dark:text-neutral-200\"\n                            >\n                              {val1}\n                            </motion.p>\n                          </AnimatePresence>\n                        </div>\n\n                        <HugeiconsIcon\n                          icon={ArrowRight04Icon}\n                          className=\"text-neutral-700 dark:text-neutral-400\"\n                        />\n\n                        <div className=\"relative flex h-6 w-6 items-center justify-center\">\n                          <AnimatePresence mode=\"popLayout\">\n                            <motion.p\n                              key={`${config.name}-right-${val2}`}\n                              initial={{ opacity: 0, y: -10 }}\n                              animate={{ opacity: 1, y: 0 }}\n                              exit={{ opacity: 0, y: 10 }}\n                              transition={{ duration: 0.2 }}\n                              className=\"absolute font-semibold tracking-tight text-neutral-700 dark:text-neutral-200\"\n                            >\n                              {val2}\n                            </motion.p>\n                          </AnimatePresence>\n                        </div>\n                      </div>\n                    </div>\n                  );\n                })}\n\n                <button\n                  onClick={onAddProperty}\n                  className=\"mt-2 flex w-full items-center justify-center gap-2 rounded-2xl bg-neutral-900 px-5 py-2.5 text-center font-semibold tracking-tight text-neutral-100 transition-colors duration-300 dark:bg-neutral-100 dark:text-neutral-900\"\n                >\n                  <HugeiconsIcon\n                    icon={PlusSignIcon}\n                    className=\"inline-block size-5\"\n                  />{' '}\n                  Add Property\n                </button>\n              </div>\n            </div>\n          </motion.div>\n        )}\n\n        {isMotion && (\n          <motion.div\n            key=\"motion-panel\"\n            initial={{ opacity: 0, y: 50, filter: 'blur(4px)' }}\n            animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}\n            exit={{ opacity: 0, y: 50, filter: 'blur(4px)' }}\n            transition={{ type: 'spring', bounce: 0.25, duration: 0.5 }}\n            className=\"flex h-full w-full flex-col items-center gap-3\"\n          >\n            <AnimatePresence mode=\"popLayout\">\n              <motion.div\n                key=\"asymmetric-tabs-container\"\n                initial={{\n                  height: 0,\n                  opacity: 0,\n                  filter: 'blur(4px)',\n                  y: -50,\n                }}\n                animate={{\n                  height: 'auto',\n                  opacity: 1,\n                  filter: 'blur(0px)',\n                  y: 0,\n                }}\n                exit={{\n                  height: 0,\n                  opacity: 0,\n                  filter: 'blur(4px)',\n                  y: -50,\n                }}\n                transition={{ type: 'spring', bounce: 0.45, duration: 0.8 }}\n                className=\"w-full overflow-hidden\"\n              >\n                <div className=\"relative z-20 mb-3 flex w-full items-center justify-between rounded-2xl bg-neutral-200 p-0.5 transition-colors duration-300 dark:bg-neutral-900\">\n                  <button\n                    onClick={() => handleTypeChange(types[0])}\n                    className=\"relative z-10 w-full py-2 text-center font-semibold tracking-tight text-neutral-700 dark:text-neutral-200\"\n                  >\n                    {types[0]}\n                    {activeType === types[0] && (\n                      <motion.span\n                        layoutId=\"progressive-disclosure-tab\"\n                        className=\"absolute inset-0 -z-10 rounded-xl bg-neutral-100 shadow-sm dark:bg-neutral-800\"\n                        transition={{\n                          type: 'spring',\n                          bounce: 0.4,\n                          duration: 0.5,\n                        }}\n                      />\n                    )}\n                  </button>\n                  <button\n                    onClick={() => handleTypeChange(types[1])}\n                    className=\"relative z-10 w-full py-2 text-center font-semibold tracking-tight text-neutral-700 dark:text-neutral-200\"\n                  >\n                    {types[1]}\n                    {activeType === types[1] && (\n                      <motion.span\n                        layoutId=\"progressive-disclosure-tab\"\n                        className=\"absolute inset-0 -z-10 rounded-xl bg-neutral-100 shadow-sm dark:bg-neutral-800\"\n                        transition={{\n                          type: 'spring',\n                          bounce: 0.4,\n                          duration: 0.5,\n                        }}\n                      />\n                    )}\n                  </button>\n                </div>\n              </motion.div>\n            </AnimatePresence>\n            <div className=\"grid w-full grid-cols-2 gap-2\">\n              {resolvedEaseOptions.map((item) => {\n                const isActive = activeEase === item.title;\n                return (\n                  <div\n                    key={item.title}\n                    onClick={() => handleEaseChange(item.title)}\n                    className={`group flex aspect-square w-full cursor-pointer flex-col items-center justify-between rounded-[36px] p-4 transition-all duration-300 active:scale-[0.98] ${\n                      isActive\n                        ? 'border-[6px] bg-neutral-300 text-neutral-900 shadow-sm dark:bg-neutral-700/80 dark:text-neutral-100'\n                        : 'text-neutral-1000 bg-neutral-200 hover:bg-neutral-300/50 hover:text-neutral-700 dark:bg-neutral-800 dark:text-neutral-400 dark:hover:bg-neutral-700/50 dark:hover:text-neutral-300'\n                    }`}\n                  >\n                    <div className=\"relative flex w-full flex-1 scale-[1.10] items-center justify-center p-2 transition-colors duration-300\">\n                      {item.icons}\n                    </div>\n                    <p\n                      className={`w-full text-center font-semibold tracking-tight transition-colors duration-300 ${isActive ? 'text-[15px]' : 'text-sm'}`}\n                    >\n                      {item.title}\n                    </p>\n                  </div>\n                );\n              })}\n            </div>\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n}\n\nconst UnfoldMore = ({ onClick }: { onClick?: () => void }) => {\n  return (\n    <svg\n      onClick={onClick}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className=\"lucide lucide-chevrons-up-down-icon lucide-chevrons-up-down cursor-pointer text-neutral-700 dark:text-neutral-400\"\n    >\n      <path d=\"m7 15 5 5 5-5\" />\n      <path d=\"m7 9 5-5 5 5\" />\n    </svg>\n  );\n};\n\nconst SmoothCurve = () => {\n  return (\n    <svg\n      viewBox=\"0 0 259 86\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className=\"h-auto w-[110px] text-current\"\n    >\n      <path\n        d=\"M153.002 15.5012C104.002 22.5 127.002 69 74.5026 78.5015C28.0407 86.9103 6.00195 41.5015 6.00195 41.5015\"\n        stroke=\"currentColor\"\n        strokeWidth=\"12\"\n        strokeLinecap=\"round\"\n      />\n      <path\n        d=\"M207.502 16.1061C241.002 13.6062 253.002 56.1062 253.002 56.1062\"\n        stroke=\"currentColor\"\n        strokeWidth=\"12\"\n        strokeLinecap=\"round\"\n      />\n      <circle cx=\"182.002\" cy=\"18.5\" r=\"18.5\" fill=\"currentColor\" />\n    </svg>\n  );\n};\n\nconst Bouncy = () => {\n  return (\n    <svg\n      viewBox=\"0 0 320 280\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className=\"h-auto w-[80px] text-current\"\n    >\n      <path\n        d=\"M6 255.946C6 255.946 7.10863 157.446 76.3574 157.446C150.857 157.446 150.857 255.946 150.857 255.946\"\n        stroke=\"currentColor\"\n        strokeWidth=\"12\"\n        strokeLinecap=\"round\"\n      />\n      <path\n        d=\"M152.856 254.446C152.856 254.446 151.018 183.676 177.018 123.446\"\n        stroke=\"currentColor\"\n        strokeWidth=\"12\"\n        strokeLinecap=\"round\"\n      />\n      <path\n        d=\"M224.85 60.4463C246.228 45.3003 273.94 37.0901 309.858 40.9464\"\n        stroke=\"currentColor\"\n        strokeWidth=\"12\"\n        strokeLinecap=\"round\"\n      />\n      <circle cx=\"192.857\" cy=\"87.9463\" r=\"26\" fill=\"currentColor\" />\n    </svg>\n  );\n};\n\nconst Snappy = () => {\n  return (\n    <svg\n      viewBox=\"0 0 316 164\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className=\"h-auto w-[96px] text-current\"\n    >\n      <circle cx=\"229.5\" cy=\"90\" r=\"33\" fill=\"currentColor\" />\n      <path\n        d=\"M54 93.5H181\"\n        stroke=\"currentColor\"\n        strokeWidth=\"12\"\n        strokeLinecap=\"round\"\n      />\n      <path\n        d=\"M106.5 120L192.5 120\"\n        stroke=\"currentColor\"\n        strokeWidth=\"12\"\n        strokeLinecap=\"round\"\n      />\n      <path\n        d=\"M81 66H185.5\"\n        stroke=\"currentColor\"\n        strokeWidth=\"12\"\n        strokeLinecap=\"round\"\n      />\n      <path\n        d=\"M147 41L210 41\"\n        stroke=\"currentColor\"\n        strokeWidth=\"12\"\n        strokeLinecap=\"round\"\n      />\n    </svg>\n  );\n};\n\nconst Custom = () => {\n  return (\n    <svg\n      viewBox=\"0 0 300 300\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className=\"h-auto w-[68px] text-current\"\n    >\n      <circle cx=\"151.5\" cy=\"164.5\" r=\"62.5\" fill=\"currentColor\" />\n      <path\n        d=\"M152.373 169.767C155.282 168.181 156.354 164.536 154.767 161.627C153.181 158.718 149.536 157.646 146.627 159.233L149.5 164.5L152.373 169.767ZM97.1269 186.233L91.8595 189.106L97.6057 199.64L102.873 196.767L100 191.5L97.1269 186.233ZM149.5 164.5L146.627 159.233L97.1269 186.233L100 191.5L102.873 196.767L152.373 169.767L149.5 164.5Z\"\n        fill=\"white\"\n      />\n      <circle cx=\"78.5\" cy=\"201.5\" r=\"11.5\" fill=\"currentColor\" />\n      <circle cx=\"146.5\" cy=\"83.5\" r=\"11.5\" fill=\"currentColor\" />\n      <circle cx=\"199.5\" cy=\"99.5\" r=\"11.5\" fill=\"currentColor\" />\n      <circle cx=\"93.5\" cy=\"99.5\" r=\"11.5\" fill=\"currentColor\" />\n      <circle cx=\"227.5\" cy=\"150.5\" r=\"11.5\" fill=\"currentColor\" />\n      <circle cx=\"70.5\" cy=\"150.5\" r=\"11.5\" fill=\"currentColor\" />\n      <circle cx=\"219.5\" cy=\"201.5\" r=\"11.5\" fill=\"currentColor\" />\n    </svg>\n  );\n};\n"
    }
  ]
}