'use client'; import * as React from 'react'; import { motion, type Variants } from 'motion/react'; import { getVariants, useAnimateIconContext, IconWrapper, type IconProps, } from '@/components/odyssey/icons/icon'; type PartyPopperProps = IconProps; const popperAnimation: Variants = { initial: { opacity: 1, pathLength: 1, pathOffset: 0, scale: 1, x: 0, y: 0, }, animate: { opacity: [0, 0, 0, 1, 1], scale: [0.3, 0.8, 1, 1.1, 1], pathLength: [0, 0.5, 1], pathOffset: [1, 0.5, 0], x: [-5, 0], y: [5, 0], transition: { duration: 0.6, ease: 'easeInOut', }, }, }; const animations = { default: { group: { initial: { x: 0, y: 0, }, animate: { x: [-1, 1, 0], y: [1, -1, 0], scale: [1, 0.7, 1.1, 1], transformOrigin: 'bottom left', transition: { duration: 0.6, ease: 'easeInOut', }, }, }, path1: {}, path2: {}, path3: { initial: { opacity: 1, scale: 1, x: 0, y: 0 }, animate: { opacity: [0, 0, 0, 1, 1], x: [-5, 0], y: [5, 0], scale: [0.5, 1, 1.2, 1], transition: { duration: 0.6, }, }, }, path4: { initial: { opacity: 1, scale: 1, x: 0, y: 0 }, animate: { opacity: [0, 0, 0, 1, 1], x: [-10, 0], y: [10, 0], scale: [0.5, 1, 1.2, 1], transition: { duration: 0.6, }, }, }, path5: { initial: { opacity: 1, scale: 1, x: 0, y: 0 }, animate: { opacity: [0, 0, 0, 1, 1], x: [-10, 0], y: [10, 0], scale: [0.5, 1, 1.2, 1], transition: { duration: 0.6, }, }, }, path6: { initial: { opacity: 1, scale: 1, x: 0, y: 0 }, animate: { opacity: [0, 0, 0, 1, 1], x: [-5, 0], y: [5, 0], scale: [0.5, 1, 1.2, 1], transition: { duration: 0.6, }, }, }, path7: popperAnimation, path8: popperAnimation, path9: popperAnimation, } satisfies Record, } as const; function IconComponent({ size, ...props }: PartyPopperProps) { const { controls } = useAnimateIconContext(); const variants = getVariants(animations); return ( ); } function PartyPopper(props: PartyPopperProps) { return ; } export { animations, PartyPopper, PartyPopper as PartyPopperIcon, type PartyPopperProps, type PartyPopperProps as PartyPopperIconProps, };