@nordmanai/nif 0.2.2 → 0.2.3

package/registry/ui/components/nm-icon/animated/globe.tsx

@@ -0,0 +1,61 @@
+/* From Animate UI's registry (icons-lucide-globe), with its import pointed at NIF's motion adapter. */
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@animate-ui/react/icons';
+
+type GlobeProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    meridian: {
+      initial: { scaleX: 1 },
+      animate: {
+        scaleX: [1, 0.1, 1, 0.1, 1],
+        transition: { duration: 1, ease: 'easeInOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: GlobeProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <circle cx={12} cy={12} r={10} />
+      <path d="M2 12h20" />
+      <motion.path
+        d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"
+        variants={variants.meridian}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Globe(props: GlobeProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Globe as GlobeAnimated };

package/registry/ui/components/nm-icon/animated/graduation-cap.tsx

@@ -0,0 +1,92 @@
+/* From Animate UI's registry (icons-lucide-graduation-cap), with its import pointed at NIF's motion adapter. */
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@animate-ui/react/icons';
+
+type GraduationCapProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    hat: {
+      initial: { rotate: 0, transformOrigin: '50% 50%' },
+      animate: {
+        rotate: [0, -8, 4, 0],
+        transformOrigin: '50% 50%',
+        transition: {
+          duration: 0.9,
+          times: [0, 0.35, 0.7, 1],
+          ease: 'easeInOut',
+        },
+      },
+    },
+    tassel: {
+      initial: { rotate: 0, transformOrigin: '50% 0%' },
+      animate: {
+        rotate: [0, 12, -8, 4, 0],
+        transformOrigin: '50% 0%',
+        transition: {
+          duration: 0.9,
+          delay: 0.1,
+          times: [0, 0.3, 0.6, 0.85, 1],
+          ease: 'easeInOut',
+        },
+      },
+    },
+    part: {},
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: GraduationCapProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <motion.g variants={variants.hat} initial="initial" animate={controls}>
+        <motion.path
+          d="M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z"
+          variants={variants.part}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="M22 10v6"
+          variants={variants.tassel}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="M6 12.5V16a6 3 0 0 0 12 0v-3.5"
+          variants={variants.part}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function GraduationCap(props: GraduationCapProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, GraduationCap as GraduationCapAnimated };

package/registry/ui/components/nm-icon/animated/headphones.tsx

@@ -0,0 +1,85 @@
+/* From Animate UI's registry (icons-lucide-headphones), with its import pointed at NIF's motion adapter. */
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@animate-ui/react/icons';
+
+type HeadphonesProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    cup1: {
+      initial: { scale: 1 },
+      animate: {
+        scale: [1, 1.06, 1, 1.06, 1],
+        transition: { duration: 0.8, ease: 'easeInOut' },
+      },
+    },
+    cup2: {
+      initial: { scale: 1 },
+      animate: {
+        scale: [1, 1.06, 1, 1.06, 1],
+        transition: { duration: 0.8, ease: 'easeInOut', delay: 0.12 },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  wiggle: {
+    group: {
+      initial: { rotate: 0, transformOrigin: '50% 0%' },
+      animate: {
+        rotate: [0, -5, 5, -3, 0],
+        transformOrigin: '50% 0%',
+        transition: { duration: 0.8, ease: 'easeInOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: HeadphonesProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <motion.g variants={variants.group} initial="initial" animate={controls}>
+        <motion.path
+          d="M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-5"
+          variants={variants.cup1}
+          initial="initial"
+          animate={controls}
+        />
+        <path d="M3 14v-2a9 9 0 0 1 18 0v2" />
+        <motion.path
+          d="M21 14v5a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3"
+          variants={variants.cup2}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function Headphones(props: HeadphonesProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Headphones as HeadphonesAnimated };

package/registry/ui/components/nm-icon/animated/image.tsx

@@ -0,0 +1,88 @@
+/* From Animate UI's registry (icons-lucide-image), with its import pointed at NIF's motion adapter. */
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@animate-ui/react/icons';
+
+type ImageProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    frame: {},
+    sun: {
+      initial: { pathLength: 1, opacity: 1 },
+      animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        transition: { duration: 0.4, delay: 0.05, ease: 'easeOut' },
+      },
+    },
+    mountain: {
+      initial: { pathLength: 1, opacity: 1 },
+      animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        transition: { duration: 0.5, delay: 0.3, ease: 'easeOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: ImageProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <motion.rect
+        width="18"
+        height="18"
+        x="3"
+        y="3"
+        rx="2"
+        ry="2"
+        variants={variants.frame}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.circle
+        cx="9"
+        cy="9"
+        r="2"
+        variants={variants.sun}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"
+        variants={variants.mountain}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Image(props: ImageProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Image as ImageAnimated };

package/registry/ui/components/nm-icon/animated/index.ts

@@ -0,0 +1,251 @@
+/* Generated by scripts/animate-icons.mjs. Maps a lucide icon name to its animated version. */
+import type { ComponentType } from 'react';
+import { ArchiveAnimated } from './archive.tsx';
+import { CameraAnimated } from './camera.tsx';
+import { CloudUploadAnimated } from './cloud-upload.tsx';
+import { DownloadAnimated } from './download.tsx';
+import { LockAnimated } from './lock.tsx';
+import { LogOutAnimated } from './log-out.tsx';
+import { MinimizeAnimated } from './minimize.tsx';
+import { PencilAnimated } from './pencil.tsx';
+import { PinAnimated } from './pin.tsx';
+import { ShareAnimated } from './share.tsx';
+import { Trash2Animated } from './trash-2.tsx';
+import { Volume2Animated } from './volume-2.tsx';
+import { ArrowLeftAnimated } from './arrow-left.tsx';
+import { ArrowRightAnimated } from './arrow-right.tsx';
+import { PanelLeftAnimated } from './panel-left.tsx';
+import { ArrowUpAnimated } from './arrow-up.tsx';
+import { AudioLinesAnimated } from './audio-lines.tsx';
+import { BotAnimated } from './bot.tsx';
+import { CalendarAnimated } from './calendar.tsx';
+import { CheckAnimated } from './check.tsx';
+import { CircleCheckAnimated } from './circle-check.tsx';
+import { ClockAnimated } from './clock.tsx';
+import { GaugeAnimated } from './gauge.tsx';
+import { MinusAnimated } from './minus.tsx';
+import { ChevronDownAnimated } from './chevron-down.tsx';
+import { CopyAnimated } from './copy.tsx';
+import { EllipsisAnimated } from './ellipsis.tsx';
+import { FileAnimated } from './file.tsx';
+import { FileTextAnimated } from './file-text.tsx';
+import { FolderAnimated } from './folder.tsx';
+import { GlobeAnimated } from './globe.tsx';
+import { HeadphonesAnimated } from './headphones.tsx';
+import { ImageAnimated } from './image.tsx';
+import { LibraryBigAnimated } from './library-big.tsx';
+import { ListFilterAnimated } from './list-filter.tsx';
+import { LoaderCircleAnimated } from './loader-circle.tsx';
+import { MailAnimated } from './mail.tsx';
+import { MenuAnimated } from './menu.tsx';
+import { RotateCcwAnimated } from './rotate-ccw.tsx';
+import { MessageCircleAnimated } from './message-circle.tsx';
+import { MessageCircleDashedAnimated } from './message-circle-dashed.tsx';
+import { MicAnimated } from './mic.tsx';
+import { MicOffAnimated } from './mic-off.tsx';
+import { MoonAnimated } from './moon.tsx';
+import { MusicAnimated } from './music.tsx';
+import { PanelRightAnimated } from './panel-right.tsx';
+import { PauseAnimated } from './pause.tsx';
+import { PlayAnimated } from './play.tsx';
+import { PlusAnimated } from './plus.tsx';
+import { SaveAnimated } from './save.tsx';
+import { SearchAnimated } from './search.tsx';
+import { SettingsAnimated } from './settings.tsx';
+import { SunAnimated } from './sun.tsx';
+import { TerminalAnimated } from './terminal.tsx';
+import { UploadAnimated } from './upload.tsx';
+import { UserRoundAnimated } from './user-round.tsx';
+import { UsersRoundAnimated } from './users-round.tsx';
+import { XAnimated } from './x.tsx';
+import { ActivityAnimated } from './activity.tsx';
+import { ArrowDownAnimated } from './arrow-down.tsx';
+import { ArrowUpDownAnimated } from './arrow-up-down.tsx';
+import { BookmarkAnimated } from './bookmark.tsx';
+import { BookmarkPlusAnimated } from './bookmark-plus.tsx';
+import { CalendarDaysAnimated } from './calendar-days.tsx';
+import { ChartColumnAnimated } from './chart-column.tsx';
+import { ChartColumnIncreasingAnimated } from './chart-column-increasing.tsx';
+import { ChartLineAnimated } from './chart-line.tsx';
+import { CheckCheckAnimated } from './check-check.tsx';
+import { ChevronLeftAnimated } from './chevron-left.tsx';
+import { ChevronRightAnimated } from './chevron-right.tsx';
+import { ChevronUpAnimated } from './chevron-up.tsx';
+import { CircleAlertAnimated } from './circle-alert.tsx';
+import { CircleCheckBigAnimated } from './circle-check-big.tsx';
+import { CirclePlusAnimated } from './circle-plus.tsx';
+import { CircleQuestionMarkAnimated } from './circle-question-mark.tsx';
+import { CircleXAnimated } from './circle-x.tsx';
+import { Clock3Animated } from './clock-3.tsx';
+import { Clock4Animated } from './clock-4.tsx';
+import { CloudSunAnimated } from './cloud-sun.tsx';
+import { ExternalLinkAnimated } from './external-link.tsx';
+import { EyeAnimated } from './eye.tsx';
+import { EyeOffAnimated } from './eye-off.tsx';
+import { FastForwardAnimated } from './fast-forward.tsx';
+import { FileClockAnimated } from './file-clock.tsx';
+import { GraduationCapAnimated } from './graduation-cap.tsx';
+import { InfoAnimated } from './info.tsx';
+import { KeyRoundAnimated } from './key-round.tsx';
+import { LayersAnimated } from './layers.tsx';
+import { LayoutDashboardAnimated } from './layout-dashboard.tsx';
+import { LightbulbAnimated } from './lightbulb.tsx';
+import { LinkAnimated } from './link.tsx';
+import { ListAnimated } from './list.tsx';
+import { MapPinAnimated } from './map-pin.tsx';
+import { MessageSquareAnimated } from './message-square.tsx';
+import { MessageSquarePlusAnimated } from './message-square-plus.tsx';
+import { MessageSquareTextAnimated } from './message-square-text.tsx';
+import { NotebookPenAnimated } from './notebook-pen.tsx';
+import { PaperclipAnimated } from './paperclip.tsx';
+import { PinOffAnimated } from './pin-off.tsx';
+import { PlaneTakeoffAnimated } from './plane-takeoff.tsx';
+import { PlugZapAnimated } from './plug-zap.tsx';
+import { RadioAnimated } from './radio.tsx';
+import { RefreshCwAnimated } from './refresh-cw.tsx';
+import { RocketAnimated } from './rocket.tsx';
+import { RotateCwAnimated } from './rotate-cw.tsx';
+import { SendAnimated } from './send.tsx';
+import { Share2Animated } from './share-2.tsx';
+import { ShieldCheckAnimated } from './shield-check.tsx';
+import { ShoppingBagAnimated } from './shopping-bag.tsx';
+import { SlidersHorizontalAnimated } from './sliders-horizontal.tsx';
+import { SparklesAnimated } from './sparkles.tsx';
+import { StarAnimated } from './star.tsx';
+import { TrashAnimated } from './trash.tsx';
+import { TrendingUpAnimated } from './trending-up.tsx';
+import { TriangleAlertAnimated } from './triangle-alert.tsx';
+import { TrophyAnimated } from './trophy.tsx';
+import { TypeAnimated } from './type.tsx';
+import { UserAnimated } from './user.tsx';
+import { UsersAnimated } from './users.tsx';
+import { WandSparklesAnimated } from './wand-sparkles.tsx';
+import { ZapAnimated } from './zap.tsx';
+import { ZoomInAnimated } from './zoom-in.tsx';
+import { ZoomOutAnimated } from './zoom-out.tsx';
+
+export const NM_ANIMATED_ICONS: Record<string, ComponentType<any>> = {
+  Archive: ArchiveAnimated,
+  Camera: CameraAnimated,
+  CloudUpload: CloudUploadAnimated,
+  Download: DownloadAnimated,
+  Lock: LockAnimated,
+  LogOut: LogOutAnimated,
+  Minimize: MinimizeAnimated,
+  Pencil: PencilAnimated,
+  Pin: PinAnimated,
+  Share: ShareAnimated,
+  Trash2: Trash2Animated,
+  Volume2: Volume2Animated,
+  ArrowLeft: ArrowLeftAnimated,
+  ArrowRight: ArrowRightAnimated,
+  PanelLeft: PanelLeftAnimated,
+  ArrowUp: ArrowUpAnimated,
+  AudioLines: AudioLinesAnimated,
+  Bot: BotAnimated,
+  Calendar: CalendarAnimated,
+  Check: CheckAnimated,
+  CircleCheck: CircleCheckAnimated,
+  Clock: ClockAnimated,
+  Gauge: GaugeAnimated,
+  Minus: MinusAnimated,
+  ChevronDown: ChevronDownAnimated,
+  Copy: CopyAnimated,
+  Ellipsis: EllipsisAnimated,
+  File: FileAnimated,
+  FileText: FileTextAnimated,
+  Folder: FolderAnimated,
+  Globe: GlobeAnimated,
+  Headphones: HeadphonesAnimated,
+  Image: ImageAnimated,
+  LibraryBig: LibraryBigAnimated,
+  ListFilter: ListFilterAnimated,
+  LoaderCircle: LoaderCircleAnimated,
+  Mail: MailAnimated,
+  Menu: MenuAnimated,
+  RotateCcw: RotateCcwAnimated,
+  MessageCircle: MessageCircleAnimated,
+  MessageCircleDashed: MessageCircleDashedAnimated,
+  Mic: MicAnimated,
+  MicOff: MicOffAnimated,
+  Moon: MoonAnimated,
+  Music: MusicAnimated,
+  PanelRight: PanelRightAnimated,
+  Pause: PauseAnimated,
+  Play: PlayAnimated,
+  Plus: PlusAnimated,
+  Save: SaveAnimated,
+  Search: SearchAnimated,
+  Settings: SettingsAnimated,
+  Sun: SunAnimated,
+  Terminal: TerminalAnimated,
+  Upload: UploadAnimated,
+  UserRound: UserRoundAnimated,
+  UsersRound: UsersRoundAnimated,
+  X: XAnimated,
+  Activity: ActivityAnimated,
+  ArrowDown: ArrowDownAnimated,
+  ArrowUpDown: ArrowUpDownAnimated,
+  Bookmark: BookmarkAnimated,
+  BookmarkPlus: BookmarkPlusAnimated,
+  CalendarDays: CalendarDaysAnimated,
+  ChartColumn: ChartColumnAnimated,
+  ChartColumnIncreasing: ChartColumnIncreasingAnimated,
+  ChartLine: ChartLineAnimated,
+  CheckCheck: CheckCheckAnimated,
+  ChevronLeft: ChevronLeftAnimated,
+  ChevronRight: ChevronRightAnimated,
+  ChevronUp: ChevronUpAnimated,
+  CircleAlert: CircleAlertAnimated,
+  CircleCheckBig: CircleCheckBigAnimated,
+  CirclePlus: CirclePlusAnimated,
+  CircleQuestionMark: CircleQuestionMarkAnimated,
+  CircleX: CircleXAnimated,
+  Clock3: Clock3Animated,
+  Clock4: Clock4Animated,
+  CloudSun: CloudSunAnimated,
+  ExternalLink: ExternalLinkAnimated,
+  Eye: EyeAnimated,
+  EyeOff: EyeOffAnimated,
+  FastForward: FastForwardAnimated,
+  FileClock: FileClockAnimated,
+  GraduationCap: GraduationCapAnimated,
+  Info: InfoAnimated,
+  KeyRound: KeyRoundAnimated,
+  Layers: LayersAnimated,
+  LayoutDashboard: LayoutDashboardAnimated,
+  Lightbulb: LightbulbAnimated,
+  Link: LinkAnimated,
+  List: ListAnimated,
+  MapPin: MapPinAnimated,
+  MessageSquare: MessageSquareAnimated,
+  MessageSquarePlus: MessageSquarePlusAnimated,
+  MessageSquareText: MessageSquareTextAnimated,
+  NotebookPen: NotebookPenAnimated,
+  Paperclip: PaperclipAnimated,
+  PinOff: PinOffAnimated,
+  PlaneTakeoff: PlaneTakeoffAnimated,
+  PlugZap: PlugZapAnimated,
+  Radio: RadioAnimated,
+  RefreshCw: RefreshCwAnimated,
+  Rocket: RocketAnimated,
+  RotateCw: RotateCwAnimated,
+  Send: SendAnimated,
+  Share2: Share2Animated,
+  ShieldCheck: ShieldCheckAnimated,
+  ShoppingBag: ShoppingBagAnimated,
+  SlidersHorizontal: SlidersHorizontalAnimated,
+  Sparkles: SparklesAnimated,
+  Star: StarAnimated,
+  Trash: TrashAnimated,
+  TrendingUp: TrendingUpAnimated,
+  TriangleAlert: TriangleAlertAnimated,
+  Trophy: TrophyAnimated,
+  Type: TypeAnimated,
+  User: UserAnimated,
+  Users: UsersAnimated,
+  WandSparkles: WandSparklesAnimated,
+  Zap: ZapAnimated,
+  ZoomIn: ZoomInAnimated,
+  ZoomOut: ZoomOutAnimated,
+};

package/registry/ui/components/nm-icon/animated/info.tsx

@@ -0,0 +1,75 @@
+/* From Animate UI's registry (icons-lucide-info), with its import pointed at NIF's motion adapter. */
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@animate-ui/react/icons';
+
+type InfoProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    mark: {
+      initial: { y: 0 },
+      animate: {
+        y: [0, -2, 0, -0.8, 0],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+          times: [0, 0.3, 0.55, 0.75, 1],
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  blink: {
+    mark: {
+      initial: { opacity: 1 },
+      animate: {
+        opacity: [1, 0.15, 1, 0.15, 1],
+        transition: {
+          duration: 1.1,
+          times: [0, 0.2, 0.45, 0.7, 1],
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: InfoProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <circle cx={12} cy={12} r={10} />
+      <motion.g variants={variants.mark} initial="initial" animate={controls}>
+        <path d="M12 8h.01" />
+        <path d="M12 16v-4" />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function Info(props: InfoProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export { animations, Info as InfoAnimated };