{
  "name": "motion-wrapper",
  "type": "registry:lib",
  "description": "Inline wrapper for enter/exit animations (avoids AbsoluteFill overlap)",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/bases/default/lib/motion-wrapper.tsx",
      "type": "registry:lib",
      "content": "import type { CSSProperties, ReactNode } from \"react\";\n\nexport type MotionWrapperProps = {\n  children: ReactNode;\n  style?: CSSProperties;\n  className?: string;\n  /**\n   * Fill the parent's width instead of shrink-wrapping the child. Needed when\n   * the child sizes itself from its container — a bar, a justified headline —\n   * because an inline-block parent collapses to the content width.\n   */\n  block?: boolean;\n};\n\n/**\n * Inline wrapper for enter/exit animations.\n * Use this instead of AbsoluteFill so siblings stack in flex/grid layout.\n * @see skills/remotion/remotion-create/video-layout.md\n */\nexport const MotionWrapper: React.FC<MotionWrapperProps> = ({\n  children,\n  style,\n  className,\n  block = false,\n}) => (\n  <div\n    className={className}\n    style={{\n      display: block ? \"block\" : \"inline-block\",\n      ...(block ? { width: \"100%\" } : {}),\n      verticalAlign: \"top\",\n      ...style,\n    }}\n  >\n    {children}\n  </div>\n);\n"
    }
  ]
}